Речь сегодня пойдет о сервисе Google PageSpeed Insights, который позволяет оценить по 100-балльной шкале скорость загрузки Вашего сайта.
У меня достаточно большой опыт в оптимизации сайтов под эту метрику, и в этой статье я постараюсь подробно рассказать про каждый показатель, показать плюсы и минусы всех решений.
Набрать 100 баллов работающему сайту в PageSpeed нереально.
70-80 баллов по PageSpeed уже отличный показатель.
Сразу скажу, что в целом всем необходимо присмотреться к результатам данного сервиса, но не все рекомендации стоит выполнять. Достаточно выполнить базовую оптимизацию и не гнаться за заветными баллами. Давайте рассмотрим подробнее.
Что нужно делать
Предлагаю рассмотреть по пунктам рекомендации Google PageSpeed.
1. Используйте кеш браузера
Это браузерное кеширование картинок (png, jpg и др.), файлов стилей CSS, скриптов JS. Именно браузерное, не путайте с обычным кешированием сайта через плагины.
Вещь полезная и нужная. На некоторых хостингах кеширование статики включено по умолчанию, остальным придется или самому настраивать или писать в поддержку с просьбой включить кеширование статики.
Минус. В данный список попадают все ссылки на внешние ресурсы, на картинки, стили и скрипты. Все коды аналитики, метрика, рекламные коды, коды контекстных систем, аватарки — на это все Вы никак не сможете повлиять, соответственно эти пункты будут отнимать у Вас баллы.
Что делать: включить браузерное кеширование и не беспокоиться о внешних ресурсах.
2. Включите сжатие
Этот пункт нужно выполнять вместе с первым, просто напишите хостеру, что нужно включить кеширование и сжатие статики.
Минус. Все те же внешние ресурсы, которые будут забирать у Вас баллы, но повлиять на них Вы не сможете.
3. Оптимизируйте изображения
Полезно и нужно. Прогоните 1 раз все картинки из Вашей темы через сервис https://tinypng.com/ и установите плагины для оптимизации изображений. Этого достаточно.
Минус. Google PageSpeed все равно может продолжать ругаться на картинки, что их размер можно уменьшить. В большинстве случаев это погоня за байтами и прогон по нескольку раз через оптимизаторы чаще всего приводит к ухудшению качества картинки.
Что делать: оптимизировать 1 раз картинки темы и установить плагин для оптимизации загружаемых через админку картинок.
4. Сократите HTML
Удаляет пробелы, табы и переносы строк в HTML коде страницы (минификация). Экономия получается так себе.
Я создал 2 html файла с кодом статьи (с нашего демо-сайта) без минификации и с минификацией.
Без минификации: 90.2Кб
С минификацией: 80,1Кб
Разница: 10,1Кб
Десять килобайт. Насколько это ускорит загрузку сайта?
Для WordPress есть несколько плагинов для минификации, что значительно упрощает решение задачи.
Минус. Иногда плагины минификации нарушают работу скриптов, стилей, счетчиков. Нужно экспериментировать и проверять.
Что делать: установить плагин для минификации (например наш Clearfy Pro) и проверить сайт на корректную работу
5. Сократите CSS, JS
Пункт, аналогичный предыдущему. Наши темы уже включают себя минифицированные CSS и JS, мы их собираем автоматически. Для владельцев других тем есть два решения: минифицировать вручную, например, так или автоматически через плагины.
Только и в этом случае результат может быть смешной:
650 байт, Карл! Даже в эпоху диалапа это было смешно, сейчас эти байты не играют никакой роли.
Минус. Если используете плагин — проверяйте правильное отображение сайта, т.к. иногда стили, скрипты неправильно минифицируются, либо нарушается порядок при сборке одного файла стилей/скриптов.
Что делать: ничего не делать, либо минифицировать вручную или плагином.
6. Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Самый проблемный пункт, т.к. отнимает много баллов и попытки выполнить его часто оборачиваются провалом.
Увидел где-то в комментариях ссылку на сайт, который набирает 100 баллов в pagespeed. Все бы ничего, но сайт открывается так:
Посмотрите как ужасно выглядит загрузка сайта. Здесь файлы стилей перенесены в подвал, отчего загрузка сайта начинается без стилей, по мере загрузки прогружаются шрифты, иконки. Все дергается, прыгает, моргает. При чем это происходит не только при заходе на сайт, но и при любом переходе на любую страницу.
Да, Вы можете сказать, что в секцию <head> можно задать инлайн стили для верхней части сайта, это действительно частично решит проблему, но здесь есть много но. Поддерживать такой сайт становится значительно сложнее, эти работы отнимают очень много времени, добиться нормального отображения сайта без «морганий» тяжело.
Давайте посмотрим как выглядит загрузка нашей темы Root по умолчанию, когда файл стилей задан в секции <head>.
Разница очевидна.
Это именно первая загрузка страницы. Мы видим что при первом заходе на страницу загружаются нестандартные шрифты. При переходе на внутренние страницы они уже будут браться из кеша браузера.
А что если мы перенесем стили темы Root в подвал сайта, как рекомендует Google PageSpeed?
Сайт начинает прыгать при каждой загрузке. Отметаем эту идею.
Второй момент: перенести скрипты в подвал. Сама идея правильная и нужная, но на практике опять все печально. Часто такой перенос на работающем сайте приводит к ошибкам в выполнении скриптов.
Часто встречающийся пример: плагин выводит свои скрипты где-нибудь в сайдбаре или внутри контента. Он использует jQuery, а jQuery мы перенесли в подвал и на момент вызова скрипта он еще не подключен. Это вызывает ошибку и прерывает работу всех скриптов.
Да, Вы опять можете сказать, что это кривой плагин или есть хаки для отлова всех вызовов, но и это не всегда работает.
Что делать: если у Вас в секции <head> не больше 2-3 js скриптов и несколько файлов стилей — ничего не делайте. У нас обычно получается 2 файла стилей и 1-2 js файла (включая jQuery). Это вообще прекрасно и не требует каких-либо работ.
Только если у Вас тяжелая тема и установлена куча плагинов, которые в сумме добавляют десяток-другой стилей и скриптов — можно поработать над этим пунктом, но аккуратно, постоянно проверяя сайт на работоспособность.
Сократите время ответа сервера
Здесь как раз речь о времени ожидания от момента, когда пользователь перешел на Ваш сайт, до момента, когда он начнет загружаться. Здесь есть несколько простых советов.
Обязательно установите PHP 7 на сервере, просмотрите Ваш список плагинов, может какие-то Вам не нужны, подберите себе быстрый хостинг, установите плагин кеширования, например WP Super Cache или WP Rocket. Порядок примерно такой же.
Количество плагинов никак не влияет на работу. Тут больше вопрос в качестве плагинов. Можно иметь 1 тяжелый плагин, который будет замедлять работу всего сайта, а можно 20 — и не получать никакой нагрузки.
Посмотрите на скорость загрузки нашего демо-сайта, здесь необходимый набор плагинов (Clearfy Pro, Login LockDown, WP Smush, WP-PostViews, Yoast SEO), тема Root. Сайт расположен на хостинге Beget c PHP 7. Страницы загружаются за 0,1 секунду. Плагинов кеширования там нет.
Что делать: начинать ускорение именно с сервера, ставить PHP 7, пересматривать плагины, пытаться оптимизировать тему. После можно подобрать хостинг, можно взять тестовый период, установить Ваш сайт и проверить скорость работы. И только в конце ставить плагины кеширования.
Резюме
- Есть важные и простые вещи, которые нужно сделать:
- Включаем кеширование и сжатие статики (пишем хостеру)
- Оптимизируем изображения в теме, ставим плагин оптимизации для картинок
- Включить PHP 7 на хостинге (можно сделать вместе с 1 пунктом)
- Подобрать себе оптимизированную тему и поэкспериментировать с плагинами
- Есть ненужные или даже опасные рекомендации:
- Перенос стилей, скриптов в подвал
- Сокращение кода HTML, CSS, JS
- Часто PageSpeed предлагает экономить байты/килобайты, что в итоге не приведет ни к какому результату.
- Почти в каждом пункте будут внешние ресурсы, на которые Вы не сможете повлиять, но они отнимут у Вас баллы.
- Показатель PageSpeed далеко не единственный, который участвует в ранжировании, а всего лишь один из сотен, выполните основные рекомендации из этой статьи и больше не переживайте из-за него.
Проверьте конкурентов в Вашей нише, проверьте крупных игроков на рынке. Показатель 50-70 — это среднее, что Вы увидите.
Спасибо за внимание, статья получилась достаточно большой, но, надеюсь, закрывает все вопросы о Google PageSpeed.
Еще почитать по теме:
Почему не нужно беспокоиться о показателе Google PageSpeed Insights
Правда и мифы о Google PageSpeed Insights
Попробуйте сервис gtmetrix.com — показывает более точную оценку.
Сергей Алейников