Современные web-сайты обязаны быть не только понятными, лаконичными и стильными, но также и быстрыми. Поэтому во время оптимизации сайта необходимо обязательно проверять скорость загрузки и стараться ее увеличить при неудовлетворительных показателях. На примере CMS WordPress будет рассмотрен способ по оценке быстродействия web-ресурса при помощи Google PageSpeed.
Скорость загрузки сайта – это весьма важный фактор, влияющий на ранжирование веб-ресурса в выдаче поисковых систем, уровень конверсии, трафика и пользовательское отношение.
Google PageSpeed Insights – один из самых удобных инструментов для проверки и увеличения скорости загрузки сайта на любой платформе как для десктопных версий, так и для мобильных. Основное преимущество сервиса – наличие советов по исправлению ситуаций.
Использование сервиса Google PageSpeed Insights
Данный сервис делит оценку оптимизации сайта по трём зонам в зависимости от устройства:
- 0-49 – красная;
- 50-89 – желтая;
- 90-100 – зеленая.
Для демонстрации возьмем любой сайт. Как можно увидеть ниже, мобильная версия веб-ресурса не имеет должной оптимизации, поэтому скорость загрузки низкая, как и индекс производительности.
Видно, что сервис Google PageSpeed Insights подсказывает, какие варианты можно использовать для оптимизации сайта под мобильные устройства. Как он рекомендует, можно оптимизировать изображения, а также удалить неиспользуемый JS код.
Десктопная версия показывает индекс производительности выше, однако это тоже граница красной зоны.
Далее будут представлены способы для ручной оптимизации сайта на WordPress при помощи возможных советов от Google PageSpeed.
Как оптимизировать скорость загрузки сайта WordPress вручную?
Для ускорения сайта на WordPress необходимо провести аудит по следующим параметрам:
- структура сайта;
- HTTP-запросы;
- размер CSS и JS;
- изображения;
- версия php;
- кэширование;
- хостинг.
Далее, по каждому параметру будут предложены варианты решений для СЕО оптимизации сайта на Вордпресс.
1. Оптимизация структуры сайта на WordPress
При загрузке веб-ресурса сервер отдаёт браузеру HTML-страницу (структуру), а после загружает внешние файлы (скрипты, стили и изображения). Если имеются такие подключенные файлы в начале HTML-кода, то они будут блокировать загрузку, т.е. сервер не сможет вернуться к ним позже, пока все не прогрузит.
Чтобы не происходили подобные проблемы, необходимо в начале кода иметь только те данные, которые нужны для основной прорисовки контента. А загрузку всех стилей CSS и скриптов JS необходимо разместить в конце кода. Только тогда у Вас будет оптимизация скорости сайта WordPress. Этот способ можно осуществить через настройки CMS вручную.
2. Сокращение HTTP-запросов
Код страницы состоит из нескольких файлов, которые загружаются при помощи отдельного HTTP-запроса. Если их содержится в большим количестве, то сайт начинает медленнее работать.
Для решения данной проблемы необходимо сократить количество файлов путем их объединения. Нужно открыть для этого любой текстовый редактор и последовательно вставить код из каждого файла в необходимой последовательности. Желательно, чтобы для каждой страницы был 1 основной файл из .css- и .js вместо большого количества отдельных файлов.
3. Минимизация JS и CSS
Чем больше в коде с JS и CSS пробелов и переносов строк (лишних незначительных элементов), тем медленнее загружается страница. Поэтому в данном случае можно сделать все вручную, либо воспользоваться, например, онлайн-сервисами «CSS Minifier» и «JavaScript Compression Tool», чтобы быстро решить данную проблему. Для этого Вам нужно лишь загрузить файлы, после чего инструменты автоматически очистят код от лишних знаков, тем самым, произойдет оптимизация кода.
Однако минимизация CSS и JavaScript вручную полезна для ускорения сайта на WordPress с низкой частотой обновления. Также существует правильный способ по расположению JS и CSS на страницах: в первую очередь размещается код с CSS, а затем уже файлы с JS. Данный способ весьма эффективный и повышает скорость загрузки страниц.
4. Оптимизация изображений
Зачастую причиной низкой скорости загрузки являются изображения. В случае с CMS WordPress причина может быть в теме web-сайта. Поэтому зачастую возникает плохая оптимизация сайта WordPress под мобильные устройства и в данном случае проблема может быть решена путем обычной замены темы с меньшим размером файла.
Что касается обычных изображений на странице, то сервис Google PageSpeed Insights дает следующие рекомендации:
- Удалить ненужные картинки, если в них нет никакой важной информации.
- Использовать желательно формат .JPEG в целях отсутствия потери качества изображения при сжатии и снижении веса файла.
- Не рекомендуется использовать формат .PNG, так как сложно сжимать изображение и вес файла.
- Не делать масштабирование картинок, поскольку файл начинает весит больше при изменении разрешения с помощью CSS. По данной причине лучше использовать изображения под требуемое устройство.
А если добавить атрибут loading = “lazy” к изображениям, то уменьшится время до первого отображения картинки. Это один из самых рабочих методов для оптимизации сайта, поскольку при «ленивой загрузке» посетитель может сразу видеть рабочий web-сайт без ожидания на загрузку всех элементы страницы.
5. Обновление версии PHP
Если установленная версия php для вашего web-сайта устарела, то из-за этого может замедляться скорость обработки скриптов, вследствие чего сервис Google SpeedPage Insight может показывать низкий индекс производительности. В данный момент повсеместно применяются версии 7.1–7.4.
Существует один из самых быстрых способов узнать версию PHP в CMS WordPress:
- админ панель WordPress >> Инструменты >> Здоровье сайта;
- нажмите вкладку «Информация»;
- разверните раздел «Сервер», и вы увидите версию установленной PHP.
В каждом хостинге разный интерфейс, поэтому алгоритмы действий могут отличаться! Для обновления версии php необходимо войти в панель управления хостингом, а затем зайти на вкладку «настройка PHP». После этого выберите необходимую версию.
6. Включить функцию кэширования
Кэширование дает возможность экономить время на обработку запросов. Если данная функция включена, то сервер будет отдавать браузерам пользователей файлы только из кэша, а не генерировать каждый раз их заново.
Сделать настройку кэширования в WordPress возможно через файл .htaccess. Для этого он должен находиться в корневой директории Вашего сайта.
Пример кода из файла .htaccess для кэширования:
<ifModule mod_expires.c>
ExpiresActive On
#кэшировать флэш и изображения на одну неделю
ExpiresByType image/x-icon "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType application/x-shockwave-flash "access plus 7 days"
#кэшировать html и htm файлы на один день
ExpiresByType text/html "access plus 1 day"
#кэшировать css, javascript и текстовые файлы на одну неделю
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
#кэшировать xml файлы на десять минут
ExpiresByType application/xhtml+xml "access plus 10 minutes"
</ifModule>
Кэшировать все указанные виды статических файлов не обязательно, нужно лишь указать лишь те, которые есть у вас на сайте. Для примера указано оптимальное время хранения 7 дней, но эти значения Вы также можете установить самостоятельно.
7. Увеличение тарифа хостинга
Порой медленная загрузка сайта происходит из-за исчерпания тарифного плана. Т.е. если веб-ресурс сильно популярен и его посещают несколько тысяч пользователей, то из-за низкой мощности CPU сервер не справляется с обработкой запросов. Поэтому следует повышать тариф с максимально возможными параметрами CPU.
В каждом хостинге разный интерфейс, поэтому алгоритмы действий могут отличаться!
Для повышения тарифного плана необходимо перейти в личный кабинет хостинга, а затем в строке «тариф» нажать кнопку «Изменить». Выбрав необходимый тариф и срок услуги, Вы нажимаете «Изменить тариф», после чего в течение нескольких минут ждете вступление изменений в силу. После этого тариф хостинга увеличен.
Как сделать оптимизация сайта на WordPress при помощи плагина?
Для оптимизации сайта выбраны 2 популярных плагина, решающие проблему скорости загрузки комплексно: «PageSpeed Ninja» и «Autoptimize».
Установка плагинов в административной панели CMS WordPress:
1. Откройте административную панель WordPress.
2. Перейдите в раздел «Плагины» и нажмите «Добавить новый», как указано на изображении.
3. В поиске справа необходимо ввести название плагина: PageSpeed Ninja или Autoptimize, а дальше Вам нужно следовать инструкции в нужной вкладке.
4. Нажмите «Установить» и «Активировать» необходимый плагин.
5. Зайдите в раздел «Настройки» и выберите плагин «PageSpeed Ninja» или «Autoptimize».
6. Во вкладке «Общие» отображается оценка оптимизации мобильной и десктопной версии веб-сайта. Чтобы более тонко настроить плагин, нужно перейти во вкладку «Дополнительно». Рекомендуется использовать пресет «Safe» для обеспечения безопасности в структуре сайта от критических изменений.
7. Включите первоочередные настройки, раскрывая все вкладки и передвигая ползунок вправо:
- Gzip compression и Gzip compression in .htaccess;
- Merge whitespaces, Remove default attributes, Remove IE conditionals;
- Caching in .htaccess;
- Minify CSS Method → RESS + CSSTidy;
- Optimization (Images);
- Caching, Experimental Caching и DNS Prefetch;
- Merge embedded styles → In head only;
- Minify style attributes, Cross-files optimization, Keep extra link tag attributes, Keep extra style tag attributes;
- Cross-files optimization, Keep extra script tag attributes.
8. Когда всё будет готово, нажмите кнопку «Сохранить» в правом верхнем углу страницы.
После данной настройки сайт будет загружаться быстрее.