1. Повысьте скорость и SEO своего веб-сайта WordPress с помощью этих трюков и советов по оптимизации веб-сайтов....
2. Скорость и производительность хостинга
3. Как измерить скорость и производительность веб-страницы?
4. Почему важно оптимизировать ваш сайт WordPress?
5. Оптимизировать WordPress для SEO
6. Оптимизируйте WordPress для удобства пользователей
7. Как оптимизировать веб-страницу WordPress и повысить ее скорость, чтобы улучшить позиционирование в SEO?
8. Как интерпретировать результат анализа в GTMetrix
9. Оценка скорости страницы
10. YSlow Score
11. Время полной загрузки
12. Общий размер страницы
13. запросы
14. водопад
15. тайминги
16. Как улучшить эти показатели? Рекомендации GTMetrix и решения + хитрости, чтобы оптимизировать их в полной мере
17. 1. Оптимизируйте изображения на 63%. Решение
18. Как оптимизировать вес изображений? Решение для оптимизации изображений
19. Другие способы оптимизации изображений:
20. Что такое спрайт?
21. Почему у нас возникла эта проблема?
22. Решение. Как исправить совмещение изображений с помощью CSS Sprites?
23. 3. Используйте кеширование браузера 75%. Как это исправить
24. Как улучшить кеш веб-страницы WordPress? Есть два возможных случая
25. 3.2. Если GTMetrix просит вас кэшировать внешние URL-адреса служб
26. 4. Обслуживание масштабированных изображений 79%. Решение
27. Как решить масштабировать изображения?
28. 5. Отложите разбор Javascript 54%. Как улучшить это
29. Как исправить отложенный разбор Javascript?
30. 2. Устранение запросов к файлам Javascript
31. 3. Асинхронная загрузка
32. 6. Удалите строки запроса из статических ресурсов 61%. Простое решение
33. Как решить, Удалить строки запроса из статических ресурсов?
34. Расширенный режим
35. 7. Ленивая загрузка. Как оптимизировать загрузку изображений
36. Как сделать загрузку Lazy Загрузка изображений
37. 8. Кеш сервера. Как оптимизировать кеширование
38. Какой на мой взгляд лучший хостинг для WordPress?
39. Один из лучших хостингов WordPress, который я пробовал
40. Конечный результат оптимизации нашего сайта WordPress
41. Цель достигнута!
42. 10 основных пунктов и необходимы для оптимизации WordPress. Декалог оптимизации веб-страницы
43. Вы хотите оставить свое мнение? Знаете ли вы какой-нибудь другой прием для оптимизации WordPress?...

Повысьте скорость и SEO своего веб-сайта WordPress с помощью этих трюков и советов по оптимизации веб-сайтов. Решения по оптимизации

Оптимизация WordPress и ускорение скорости вашего сайта необходимы для улучшения SEO . Быстрая загрузка сайта стала очень важным фактором в позиционировании поисковой системы.

WPO (Оптимизация веб-производительности) - это задача, которую вы должны решить уже, если хотите, чтобы с большей вероятностью она занимала верхние позиции в Google . В большинстве случаев вы можете оптимизировать свой сайт, не будучи экспертом и бесплатно.

Кроме того, веб-оптимизация также влияет на удобство использования и удобство работы с пользователем , поэтому пришло время подумать о необходимости его выполнения.

Какие факторы делают сайт медленным или быстрым?

Есть несколько важных аспектов, которые влияют на скорость загрузки сайта. Я перечислю их, а затем расскажу , как вы можете решить их шаг за шагом.

Скорость и производительность хостинга

Вес и размер изображений

Количество запросов или запросов

Количество файлов CSS и JS

Количество установленных плагинов

Оптимизация кода шаблона

Как измерить скорость и производительность веб-страницы?

Для анализа вашего сайта я рекомендую отличный инструмент GTMetrix . Это приложение детально изучает ваш сайт и предупреждает вас о том, какие факторы замедляют загрузку, чтобы вы могли их решить.

В GTMetrix вы можете видеть, какова оценка PageSpeed вашего сайта, то есть примечание, которое Google дает вашему сайту в силу многих факторов. Хороший PageSpeed ​​очень помогает в позиционировании. В этом руководстве я дам вам трюки, чтобы максимально улучшить его.

Чтобы объяснить все хитрости, я возьму в качестве примера работу, проделанную с сайтом Aula CM.

Этот случай объясняется в статье о веб-оптимизации на мероприятии Pro Marketing Day состоится 1 апреля в Мадриде.

В этом посте я расскажу вам все подробно, чтобы вы могли применить его в своем веб-проекте.

Почему важно оптимизировать ваш сайт WordPress?

По двум основным причинам:

Оптимизировать WordPress для SEO

Во-первых, SEO-позиционирование . Google учитывает скорость загрузки сайтов при их размещении.

Кроме того, с каждым днем ​​все больше пользователей переходят с мобильных устройств , и вам приходится предлагать им контент, который загружается плавно и адаптируется с помощью технологии AMP .

Оптимизируйте WordPress для удобства пользователей

Во-вторых, и не в последнюю очередь, пользовательский опыт. Сеть, которая загружается плавно, может помочь вам получить больше конверсий и продаж перед сетью, которая имеет проблемы с загрузкой.

Как оптимизировать веб-страницу WordPress и повысить ее скорость, чтобы улучшить позиционирование в SEO?

Войдите в GTMetrix и зарегистрируйтесь . Регистрация бесплатна, занимает минуту и ​​позволяет вам лучше настроить инструмент.

После регистрации нажмите « Параметры анализа» и выберите местоположение, максимально близкое к стране, в которой находится ваш веб-сайт.

Затем введите полный URL-адрес вашего веб-сайта в поле « Анализ производительности» и нажмите « Анализ» .

GTMetrix выполняет тщательную проверку вашего сайта и в течение нескольких секунд показывает вам общее заключение о статусе оптимизации вашего сайта:

Как интерпретировать результат анализа в GTMetrix

Как видите, результат анализа дает нам следующие основные метрики:

Оценка скорости страницы

Примечание, которое Google дает производительности Интернета. Очень важно

YSlow Score

Примечание, которое дает Yahoo. Менее важно, если ваша цель позиционирования - Google.

Время полной загрузки

Время загрузки сайта. Имейте в виду, что это колеблется, так как производительность хостинга является переменной. Поэтому рекомендуется сделать несколько измерений и взять среднее значение, чтобы получить более точные данные.

Общий размер страницы

Размер анализируемой страницы напрямую связан с размером изображений и элементами, которые вы загружаете на свой сайт.

запросы

Количество запросов к различным сервисам, сделанных вашим веб-сайтом для работы, важно загрузить его максимально, чтобы улучшить показатель PageSpeed.

водопад

В этом разделе вы можете увидеть время загрузки каждого из процессов вашего сайта.

тайминги

Вот еще одна важная информация: время до первого байта, то есть время, которое требуется хосту для предложения первого байта веб-страницы.

Как улучшить эти показатели? Рекомендации GTMetrix и решения + хитрости, чтобы оптимизировать их в полной мере

Помимо этих важных показателей, GTMetrix предлагает нам очень полезный список элементов, которые ухудшают производительность вашего сайта.

Взяв за основу работу по оптимизации, проделанную на веб-сайте Aula CM , я расскажу о них один за другим и расскажу, как мы оптимизировали каждый из них.

Если вы посмотрите на предыдущее изображение, вы увидите, что мы начали с PageSpeed ​​Score 70 , YSlow 60 , времени загрузки приблизительно 5 секунд , размера страницы 1,51 МБ и 131 запроса .

Помимо этого у нас были улучшенные аспекты, связанные с различными элементами кода шаблона, плагинов и т. Д. Почему это случилось?

Когда вы устанавливаете шаблон WordPress и проектируете свой веб-сайт, устанавливаете плагины и т. Д., Обычно можно найти похожие показатели, если вы еще не провели оптимизацию. Теперь я подробно расскажу, как мы оптимизируем все эти моменты:

1. Оптимизируйте изображения на 63%. Решение

Эта проблема была из-за отсутствия оптимизации некоторых изображений . Когда вы работаете на своем сайте, иногда стресс от повседневной работы заставляет вас забыть об этом важном аспекте и загружать ваши изображения слишком тяжело.

Как оптимизировать вес изображений? Решение для оптимизации изображений

У вас есть несколько способов быстро, легко и бесплатно решить эту проблему .

Мы сделали это очень просто благодаря инструменту IMG Optimizer , который предлагает наш хостинг бесплатно Webempresa , С помощью одного клика и в течение нескольких минут, наши изображения были идеально оптимизированы. Это так просто

Разница между премиум хостингом вроде Webempresa и другие хостинги и услуги низкого качества. Мы не играем с этим.

На этом изображении вы можете увидеть до и после оптимизации . Как видите, улучшение оптимизации изображений с 63% до 99% улучшило основные показатели сети, особенно показатель PageSpeed.

Другие способы оптимизации изображений:

• Плагины. WP Smush It. Оптимизатор EWWW. Бесплатные плагины, которые позволяют оптимизировать изображения в Интернете. Это немного медленнее, чем предыдущий, и результат не так хорош, но это хорошее решение, если у вас нет хостинга премиум-класса.
• Инструменты, такие как Tiny PNG или JPG Mini. Бесплатные онлайн-приложения, позволяющие оптимизировать вес изображений. Недостаток в том, что вы должны загрузить изображения, пропустить их через инструмент и затем загрузить их снова.

2. Объедините изображения, используя CSS Sprites 0%. Решение

Эта рекомендация GTMetrix касается использования спрайтовых изображений для уменьшения количества запросов и повышения скорости загрузки.

Что такое спрайт?

Это файл изображения, который содержит много изображений сайта в одном файле , а это означает, что вместо загрузки нескольких файлов вам нужно загрузить только один. Затем с помощью CSS вы перемещаете координаты изображения таким образом, чтобы в каждом случае отображалось другое.

Почему у нас возникла эта проблема?

На нашем сайте у нас есть главное меню типа мега-меню, с множеством разделов с иконками. Чтобы загрузить каждый значок, Интернет отправляет запрос или запрос в папку изображений на сервере, что замедляет загрузку и ухудшает показатели производительности.

Решение. Как исправить совмещение изображений с помощью CSS Sprites?

1. Создание одного изображения, которое содержит все значки в одном файле

2. Поместить изображение в качестве фона для всех значков и переместить его на 40 пикселей влево для каждого с помощью CSS

Вот пример кода, используемого для иконок

Для второй иконки, в background-position мы ставим -40px 0px; Для третьего мы ставим -80px 0px; И так далее.

Первое значение относится к горизонтальной оси X координат, а второе к вертикальной оси Y. Каждый значок перемещает свое фоновое изображение на 40 пикселей влево, и в каждом случае появляется другое изображение, даже если это один и тот же файл.

Здесь вы можете увидеть до и после оптимизации с использованием спрайтов. Улучшение было зверским, с 75% до 83% в PageSpeed ​​Score и на секунду меньше времени загрузки. Посмотрите, как количество запросов сократилось со 136 до 105.

3. Используйте кеширование браузера 75%. Как это исправить

Это уведомление указывает на необходимость увеличения кэширования элементов сети для повышения скорости ее загрузки.

Как улучшить кеш веб-страницы WordPress? Есть два возможных случая

3.1. Если GTMetrix сообщает вам, что URL-адреса, которые вы должны кэшировать, являются внутренними для вашей сети

1. Установка кеш-плагинов. Лучшими, на мой взгляд, являются WP Rocket (за плату) и W3 Total Cache , WP Rocket - впечатляющий плагин, цена которого ничто по сравнению с тем, что вы получаете. Я использую его во всех своих проектах, и разница замечательна.

1. Найм хорошего хостинга. Хостинг как Webempresa Он реализует усовершенствованную систему кэширования, такую как Magic Cache (на основе Varnish Cache), которая значительно сокращает время загрузки.

3.2. Если GTMetrix просит вас кэшировать внешние URL-адреса служб

Для кэширования внешних URL-адресов, таких как Analytics, Fonts, Maps, Facebook Event и т. Д., Этот процесс немного более продвинутый и требует помощи эксперта по веб-коду. Пошаговая процедура выглядит следующим образом:

1. Отобразите в GTMetrix поле, которое предупреждает вас о cacheado и наблюдайте, какие внешние файлы он просит вас кэшировать. Сохраните коды, которые содержат эти внешние файлы, во внутренних файлах на вашем собственном хостинге.
2. Создайте сценарий, который запускается с задачей cron (запланированная задача) каждые x часов, которая сохраняет в каталоге обновленные версии сценариев этих внешних служб.
3. Отредактируйте файл header.php и измените URL-адреса кодов так, чтобы обращения к этим файлам выполнялись для тех, которые вы загрузили на свой хостинг, и, таким образом, были загружены локально.

Оптимизация до и после показывает улучшение PageSpeed ​​от 83% до 87%, а также улучшение показателя YSlow, скорости загрузки и размера страницы.

4. Обслуживание масштабированных изображений 79%. Решение

Еще одна проблема, о которой предупредил GTMetrix, - загрузка изображений с размерами, превышающими необходимые, что довольно часто встречается на веб-страницах.

Это предупреждение может иметь две разные причины :

1. Вы вручную загрузили изображения до размера больше необходимого. Например, для поля шириной 300 пикселей вы загрузили изображение в 600 пикселей.
2. Ваш шаблон автоматически показывает изображения до неоправданно большего размера. Например, у вас дома есть полоса, разделенная на три колонки с последними тремя статьями блога.
   Изображения заголовков каждого сообщения, несмотря на то, что они имеют размер меньше исходного, все еще остаются такими же, как вы достигли ширины 900 пикселей, так как шаблон не показывает изображения, которые были ранее изменены.

Как решить масштабировать изображения?

1. Если вы загрузили изображения большего размера, чем должны, оптимизируйте их . Вы можете сделать это, загрузив изображения, изменив их масштаб с помощью программы, такой как Photoshop, или бесплатных онлайн-приложений, таких как PHOTOR , Или намного проще, с бесплатным плагином вроде Редактор фотографий ,
2. Если проблема с вашим шаблоном, с бесплатным плагином вроде Восстановить миниатюры Вы можете определить точные размеры, которые изображения должны иметь в разных местах вашей веб-страницы. Затем, немного коснувшись кода вашего шаблона, вы заказываете его, чтобы показывать эти точные размеры на каждом сайте.
3. Использование изображений векторного типа SVG . Изображения этого типа, будучи векторными, всегда обеспечивают максимальное качество, и, если вы хорошо их оптимизируете, когда генерируете их в векторе, они могут весить меньше. Априори WordPress не позволяет загружать векторные изображения, но с бесплатным плагином, как Поддержка SVG Вы можете сделать это легко.

Как только это улучшение было сделано, мы увеличили PageSpeed ​​Score до 88%, и мы продолжаем улучшать другие параметры

5. Отложите разбор Javascript 54%. Как улучшить это

Слишком много запросов к Javascript-файлам в заголовке страницы. Это типичная проблема со многими шаблонами WordPress, которые не очень хорошо оптимизированы и содержат огромное количество файлов JS.

Как исправить отложенный разбор Javascript?

1. Слияние файлов

Если мы хотим уменьшить количество обращений к файлам Javascript, один из способов сделать это - уменьшить количество файлов JS.

Вы можете сделать это путем слияния файлов с плагином, таким как WP Rocket, который, как упоминалось выше, является платным.

Свободной альтернативой является плагин JS & CSS Script Optimizer ,

Примечание: пока вы объединяете файлы, смотрите ниже, что ваш сайт по-прежнему работает правильно. В зависимости от шаблона и установленных плагинов, результат может отличаться.

2. Устранение запросов к файлам Javascript

Это вы должны сделать вручную, редактируя код вашего шаблона, что требует немного знаний веб-программирования.

Файлы вашей сети можно редактировать через FTP, файловый менеджер панели хостинга или непосредственно из панели администрирования WordPress, в разделе « Внешний вид»> «Редактор».

Для этого перейдите в файл header.php вашего шаблона, который динамически генерирует HTML-заголовок вашего сайта (это та часть кода, которая находится между тегами <head> </ head>).

Иногда шаблоны отправляют запросы к сервисам Javascript, которые вам не нужны. Если это так, исключите эти запросы.

Другое решение может заключаться в том, чтобы перенести некоторые запросы в нижний колонтитул страницы . Это предотвращает возникновение нагрузки в первый момент.

В обоих случаях всегда делайте это со знанием и с большой осторожностью, чтобы избежать проблем на вашем сайте.

3. Асинхронная загрузка

Асинхронная или отложенная загрузка позволяет вам выполнять параллельный вызов файлов , если они являются файлами, которые не нужны сразу для загрузки вашего сайта.

Таким образом, вы уменьшаете количество запросов к файлам Javascript при начальной загрузке вашего сайта и избегаете узких мест.

Асинхронную зарядку можно выполнить с помощью WP Rocket . Как видите, мы уже перечислили несколько улучшений, которые можно решить с помощью WP Rocket, что оправдывает его покупку.

Если с одним плагином вы оптимизируете много вещей, вы избегаете установки слишком большого количества плагинов, с проблемами, которые могут привести к весу, обслуживанию и возможным конфликтам.

Однако, если вы предпочитаете делать это бесплатно , у вас есть плагин Асинхронный Javascript.

Посмотрите, как эта оптимизация Javascript значительно повысила производительность нашего веб-сайта, резко сократив количество запросов или запросов со 105 до 72. Это позволило нам загрузить PageSpeed ​​Score до 92% и сократить время загрузки.

6. Удалите строки запроса из статических ресурсов 61%. Простое решение

Еще одна типичная проблема многих шаблонов WordPress, связанная с генерацией ненужных строк в определенных запросах. Это не очень серьезно, и это также легко решить. Очистив эти текстовые строки, вы можете улучшить кеширование и скорость.

Как решить, Удалить строки запроса из статических ресурсов?

Очень простой способ

С плагином вроде WP Rocket. Еще раз, этот плагин позволяет нам решить проблему без необходимости устанавливать разные плагины для каждого улучшения.

Если вы хотите сделать это бесплатно, у вас есть этот плагин ,

Расширенный режим

Редактирование файла functions.php вашего шаблона и вставка этого кода

Оптимизация строк запроса позволила нам немного повысить показатель PageSpeed ​​до 93% и немного улучшить другие показатели.

7. Ленивая загрузка. Как оптимизировать загрузку изображений

Ленивая загрузка изображений заключается в постепенном размещении изображений по всей странице, а не сразу. На странице, загруженной множеством изображений, может быть очень полезно уменьшить размер страницы и количество запросов.

Это не особая проблема, о которой нас предупреждает GTMetrix, но важно улучшить ключевой аспект производительности: количество запросов или запросов.

Как сделать загрузку Lazy Загрузка изображений

С таким плагином, как WP Rocket (еще один!).

Чтобы сделать это бесплатно, у вас есть две очень хорошие альтернативы. BJ Lazy Load или Speed ​​Booster Pack.

Как вы можете видеть на графике, при реализации этого улучшения мы сократили количество запросов с 72 до 37. Благодаря этому все остальные показатели улучшились, достигнув PageSpeed ​​94%.

8. Кеш сервера. Как оптимизировать кеширование

Как я уже упоминал в начале, правильное кэширование на вашем хостинге может быть важным элементом для повышения скорости загрузки вашего WordPress .

Помимо улучшений кэша, которые могут быть реализованы плагинами, такими как WP Rocket или W3 Total Cache , есть и часть, которую должен выполнять ваш сервер. Имейте премиум хостинг как Webempresa Это может быть решающим для улучшения ваших показателей и хорошего SEO в Google.

Наш хостинг Webempresa выполняет кеширование с помощью инструмента Magic Cache (на основе Varnish Cache). Varnish Cache - это усовершенствованная система кэширования в оперативной памяти, которая сокращает время загрузки и улучшает первый байт.

Какой на мой взгляд лучший хостинг для WordPress?

Я всегда так говорю, но в этом случае есть еще одна причина: хороший хостинг может иметь решающее значение для вашего интернет-бизнеса. Не играй с этим.

Один из лучших хостингов WordPress, который я пробовал

Webempresa

Качественный хостинг как Webempresa позволяет достичь более высоких времен загрузки, чем другие хостинги низкого качества, не говоря уже о его огромной безопасности, отличной поддержке и стабильности.

Почти все наши проекты размещены на этом хостинге, и мы не можем быть более удовлетворены. Если вы хотите, чтобы ваш сайт работал с высокой скоростью и работал профессионально и избегал проблем, это определенно стоит того.

Посмотрите на разницу в производительности и скорости, как только на нашем сайте будет добавлен инструмент Magic Caché от Webempresa.

Несмотря на все реализованные улучшения и осознавая сложность улучшения еще большего количества показателей, из 94% мы поднялись до 96% рейтинга PageSpeed. С 1,7 секунды скорости загрузки мы снижаем до 1,2 секунды.

Примечание. Еще один высококачественный хостинг, который я использую на этом веб-сайте, который вы читаете, Raiola Networks, в частности, оптимизированный сервис VPS , обеспечивающий невероятную скорость и производительность и помогающий мне занимать лидирующие позиции в Google.

Конечный результат оптимизации нашего сайта WordPress

На следующем графике вы можете увидеть глобальное сравнение после того, как все оптимизированные действия были выполнены на нашем сайте.

Как видите, реализованная оптимизация позволила улучшить все показатели : она увеличилась с 70% до 96% в PageSpeed ​​Score и сократила время загрузки с 4,9 до 1,2 секунды.

Цель достигнута!

Далее я покажу вам краткую сводку в виде контрольного списка вещей, о которых вы всегда должны помнить, если хотите, чтобы ваш сайт WordPress предлагал хорошую производительность и скорость.

10 основных пунктов и необходимы для оптимизации WordPress. Декалог оптимизации веб-страницы

1. Оптимизируйте вес ваших изображений и всегда помещайте их в правильный размер
2. Ищите как можно больше своего веб-сайта и внешних служб
3. Сократить и объединить файлы
4. Уменьшить ходатайства или запросы
5. Сделать асинхронную загрузку
6. Отправьте несколько скриптов и запросов на ваш веб- колонтитул
7. Анализировать и оптимизировать исчерпывающе и постоянно
8. использование шаблоны быстро хорошо оптимизирован
9. Не тратьте установку плагинов
10. Всегда используйте хороший хостинг

Хочу поблагодарить Робер Ортега партнера в Classroom CM, за его большой вклад во всю эту работу по оптимизации и в статью, которую мы сделали в Pro Marketing Day. Кряк, которому я рекомендую следовать, так как он отлично работает.

Вы хотите оставить свое мнение? Знаете ли вы какой-нибудь другой прием для оптимизации WordPress? У вас есть вопросы?

Оставьте мне комментарий, и я буду рад ответить вам и помочь оптимизировать ваш WordPress 😉

▷ Как оптимизировать WordPress и ускорить ваш веб для SEO

4,7 (94,62%) 52 голоса

Похожие

Комментарии