Инструкция: как получить максимум Google PageSpeed на WordPress

Опубликовано Втр, 23/10/2018 - 11:05 пользователем wshurik

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

Популярным онлайн-инструментом, который измеряет и оценивает показатель времени открытия страниц, является Google PageSpeed Insights. В этом сервисе представлены и прямые подсказки, как ускорить загрузку сайта. На примере веб-ресурса на WordPress, давайте разберемся, как добиться наивысших оценок в Пейдж Спид, а значит существенно повысить шансы на более высокие места в поиске, увеличение трафика и продаж.

Google PageSpeed - показатель времени открытия страниц

Пейдж Спид - показатель времени открытия страниц

ОСНОВНЫЕ СПОСОБЫ ОПТИМИЗАЦИИ СКОРОСТИ ЗАГРУЗКИ САЙТА:

  1. Включение кэша на стороне браузера.
  2. Оптимизация HTML-кода.
  3. Сокращение размеров и оптимизация файлов JavaScript и CSS.
  4. Удаление кода CSS и JS, блокирующего отображение страницы.
  5. Настройка загрузки шрифтов.
  6. Оптимизация темы и картинок, загруженных в WP.
  7. Активизация сжатия на стороне сервера.
  8. Другие работы на сайте по повышению скорости.

Разберем перечисленные методы ускорения веб-ресурсов детальнее.

ВКЛЮЧЕНИЕ КЭША БРАУЗЕРА

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

Включить кэш браузера в WordPress можно несколькими способами:

  1. С помощью настройки файла .htaccess. В модуле expires <IfModule mod_expires.c> задаются значения для кэширования различных типов файлов — картинок, текста, HTML-кода, скриптов. Для всех данных по умолчанию дается команда на добавление в кэш браузера, плюс для отдельных видов контента можно указать конкретный срок, к примеру, для изображений: ExpiresByType image/gif «access plus 1 month».Пример:<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresDefault "access plus 10 days"

    ExpiresByType text/css "access plus 1 week"

    ExpiresByType text/plain "access plus 1 month"

    ExpiresByType image/gif "access plus 1 month"

    ExpiresByType image/png "access plus 1 month"

    ExpiresByType image/jpeg "access plus 1 month"

    ExpiresByType application/x-javascript "access plus 1 month"

    ExpiresByType application/javascript "access plus 1 week"

    ExpiresByType application/x-icon "access plus 1 year"

    </IfModule>
  2. Используя плагины. Для включения кэширования есть как бесплатные решения, вроде W3 Total Cache, WP Super Cache и др. так и платные модули (WP Rocket).

Использование плагина для включение кэша браузера

Иногда Google PageSpeed Insights рекомендует включить кеш для сервисов статистики поисковиков (Я.Маркет) или Google Analytics. Эти данные кэшируются изначально, но с небольшим интервалом времени, так особо не замедляют загрузку веб-ресурса. Прямого доступа к этим внешним скриптам сайта нет, разве что можно установить плагин Complete Analytics Optimization Suite и тогда библиотека сервиса веб-аналитики Гугл станет локальной.

ОПТИМИЗАЦИЯ HTML-КОДА

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

Полуавтоматический метод очистки предполагает использование Google PageSpeed Insights. После проведения анализа быстродействия в сервисе, нажимайте на кнопку «Сократить HTML», а затем «Просмотреть содержимое». Остается лишь заменить используемый вариант кода на предлагаемый новый. Но данный вариант подходит только для очень небольших сайтов с простым функционалом.

Но для сайтов на WordPress есть более простые методы оптимизации кода в автоматическом режиме. Для этих целей предлагаются эффективные бесплатные плагины, к примеру, Better WordPress Minify, Autoptimize и др. В них для минимизации размеров HTML и ускорения страниц достаточно выбрать соответствующий раздел и выполнить несложную настройку.

Настройка оптимизации html-кода

СОКРАЩЕНИЕ РАЗМЕРОВ И ОПТИМИЗАЦИЯ ФАЙЛОВ JAVASCRIPT И CSS

CSS и JavaScript зачастую являются замедляющим фактором открытия веб-страниц. Сокращение их размеров за счет удаления переносов, пробелов и различных комментариев — еще одна важная задача оптимизации под Google PageSpeed Insights. Оптимизировать CSS и JS-файлы можно по аналогии с HTML. Популярные бесплатные плагины, пригодные для этого — Autoptimize и WP Minify Fix.

Как оптимизировать файлы JavaScript и CSS

Соответствующая работа в Autoptimize сводится к установке галочек напротив двух пунктов — «Оптимизировать код CSS?» и «Оптимизировать код JavaScript?».

Если же ресурс обновляется достаточно редко, то лучше минимизировать основные css и js файлы вручную, используя онлайн-сервисы минимизации, к примеру, cssminifier.com для css файлов и jscompress.com для js файлов. Такого плана онлайн-сервисов очень много и все они легко справляются с данной задачей.

Помимо этого рекомендуется позаботиться и о правильном расположении JavaScript и CSS относительно другого содержимого. CSS лучше разместить в начале, а JS-файлы — в конце страницы. В таком случае и внешний вид, и быстродействие веб-ресурса вызовет только позитивный отклик пользователей.

УДАЛЕНИЕ КОДА CSS И JS, КОТОРЫЙ БЛОКИРУЕТ ОТОБРАЖЕНИЕ СТРАНИЦЫ

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

Решением может стать настройка асинхронной загрузки, при которой вместо последовательного отображения контента страницы, самые «тяжелые» файлы JavaScript запускаются последними. Для ускорения используется скрипт Google ExtSrcJs (изменяется код <script src=»…»> на <script extsrc=»…»>, а также подключается файл extsrc.js.

Также возможно настроить подгрузку вторичных css файлов после загрузки страницы, но при этом необходимо вынести css, который отвечает за загрузку верхней части экрана и поместить его в код html.

Еще проще избавиться от блокировки или замедления отображения страницы с помощью упоминаемого ранее плагина Autoptimize. В разделе опций Javascript необходимо снять галочку для пункта «Force JavaScript in?». А в опциях CSS нужно сделать активным пункт «Inline all CSS?».

НАСТРОЙКА ЗАГРУЗКИ ШРИФТОВ

На отображение страниц негативно влияют не только «тяжелые» файлы JavaScript и CSS, но и шрифты Google и Font Awesome. Они замедляют сайт, а также могут блокировать отображение содержимого.

Основной способ настройки шрифтов — использование асинхронной загрузки при помощи Google Font Loader и вставки в футер дополнительного кода.

<script type="text/javascript">

WebFontConfig = {

google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }

};

(function() {

var wf = document.createElement('script');

wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

wf.type = 'text/javascript';

wf.async = 'true';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(wf, s);

})(); </script>

Альтернативный вариант ускорения загрузки шрифтов Google — установка специального плагина Disable Google Fonts.

Но не стоит забывать и про “дедовский” метод, подключения Google шрифтов напрямую, для этого следует скачать веб-версию необходимого шрифта, добавить его на сервер и подключить в css файле.

Настройка загрузки шрифтов

Также ускорить загрузку Font Awesome и Google Fonts позволяет их перевод на Content Delivery Network (CDN). Это удаленные сервера, которые способствуют молниеносной передаче данных.

На CDN нередко переносят также JS-скрипты и увесистую графику, оставляя на основном хостинге веб-ресурса только HTML-код. Пример ссылки на шрифты Font Awesome в Content Delivery Network:

<link href="https://cdn.simple.com/css/font-awesome-4.4.0.min.css" rel="stylesheet">.

ОПТИМИЗАЦИЯ ТЕМЫ И КАРТИНОК, ЗАГРУЖЕННЫХ В WP

Для движка WordPress «легкость» или «тяжесть» веб-ресурса во многом определяет выбранная тема оформления. Если по ощущениям скорость загрузки страниц низка (как и оценка в Google PageSpeed), то целесообразно подобрать более шуструю альтернативу.

Оптимизация изображений, загруженных в wp

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

  1. Удаляйте с сервера все ненужные графические файлы. Если графика много весит, но не слишком информативна, то ее стоит заменить текстом.
  2. По возможности используйте изображения формата JPEG. Их сжатие не предполагает ухудшения качества картинки. Приятный внешний вид будет иметь даже файл, который уменьшен на 25-40% на фоне исходника.
  3. Не применяйте слишком часто PNG с целью получения прозрачного эффекта. Сжимать эти файлы придется практически вручную, используя такие графические редакторы, как Photoshop, Compresspng или PNGout. Также вы можете использовать онлайн-сервисы для сжатия, например TinyPNG / TinyJPG
  4. Также вы можете использовать плагины для сжатия графических файлов в самом WordPress, такой к примеру как WP Smush.  Плагин для сжатия графических файлов в WordPress
  5. Избавляйтесь от различного «мусора» в графическом материале — комментариев от дизайнеров, избыточных палитр и т.д. Помочь в этом способен сервис Smush.it.
  6. Не масштабируйте размеры картинок, применяя width и height либо CSS. Один, меняющий размеры графический файл весит достаточно много и долго загружается. Лучше добавить сразу несколько изображений, которые адаптированы под различные девайсы (стационарный компьютер, смартфон, планшет). Тем более, что в функционале WordPress заложена возможность использования изображений с различными разрешениями в зависимости от разрешения экрана. Для автоматизации загрузки нужной картинки, используйте плагин для WordPress — Imager.

АКТИВИЗАЦИЯ СЖАТИЯ НА СТОРОНЕ СЕРВЕРА

Ускорить загрузку страниц сайта можно и на этапе передачи данных с сервера. Для этого рекомендуется сжать файлы, используя Gzip. Применение данного способа ускорения весьма эффективно, но незначительно увеличивает нагрузку на сервер, что также стоит учесть.

Включить Gzip можно, обратившись в техническую поддержку хостинг-провайдера. Также есть возможность выполнить активацию своими силами: в случае если ваш сервер работает на Apache, вы можете прописать в файле .htaccess такие строчки:

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Удалить ошибки браузера (требуется только для очень старых браузеров)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

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

ДРУГИЕ РАБОТЫ НА САЙТЕ ПО ПОВЫШЕНИЮ СКОРОСТИ

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

  • настройка Nginx/Apache;
  • активное использование CDN;
  • оптимизация базы данных (удаление ревизий, лишних таблиц, спама и т.д.);
  • настройка протоколов передачи данных, в том числе HTTP/2 и TCP;
  • сокращение числа перенаправлений (301-го редиректа).

К прочим настройкам самой системы управления контентом относится следующее:

  • удаление неиспользуемых плагинов WordPress, способных замедлять загрузку;
  • избавление от строк запросов;
  • ручные настройки выполнения скриптов и т.д.
  • загрузка библиотек css и js только на страницах где они используются.

Оценка оптимизации сайта на WordPress

После того, как оптимизация выполнена, следует повторить тестирование в Google PageSpeed Insights, чтобы узнать новую оценку быстродействия и исключить другие ошибки или проблемы.

ПОДВОДИМ ИТОГИ

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

Источник

word press
wordpress