7 шагов к идеальному 100/100 баллу Google PageSpeed ​​Insights

  1. 1. DNS
  2. 2. Передача времени ответа сервера
  3. 3. CSS и JavaScript блокировка рендеринга
  4. 4. Оптимизируйте изображения
  5. 5. Сократить
  6. 6. Не будьте плагином
  7. 7. Включить сжатие
  8. Заключение

Найти идеальный баланс между пользовательским опытом и быстрым результатом Google PageSpeed ​​Insights может быть довольно сложно.

Нам потребовались недели работы, чтобы достичь идеального результата 100/100.

Формула для каждого веб-сайта будет разной - не существует универсального подхода.

Будьте готовы взломать ваш сайт. Если вы этого не сделаете, вы, вероятно, не пытаетесь достаточно сильно.

Вот семь вещей, которые мы сделали для достижения этой цели.

Примечание. Все наши тесты проводились на сайте подготовки / разработки, а затем были перенесены на наш живой сайт. Наш веб-сайт построен с использованием WordPress, на котором установлена ​​последняя версия WordPress с темой Salient.

Примечание. Все наши тесты проводились на сайте подготовки / разработки, а затем были перенесены на наш живой сайт.

Найти идеальный баланс между пользовательским опытом и быстрым результатом Google PageSpeed ​​Insights может быть довольно сложно

1. DNS

Мы используем Cloudflare, но не оптимизируем его скорость.

В наших тестах мы обнаружили, что это было медленнее.

Если вы находитесь в среде общего хостинга, то Cloudflare, вероятно, очень поможет.

Но для нас, в частности, с выделенным сервером было лучше, когда все отключено.

Если у вас нет навыков или времени для установки Cloudflare в качестве альтернативы, вы можете использовать хостинг-провайдеров, таких как WP-Engine, Presslabs, Pantheon.io. Они поставляются со встроенным кэшем сервера и конфигурацией CDN.

2. Передача времени ответа сервера

эталонный тест 0,2 секунды. Что-нибудь выше этого, и Google отмечает вас.

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

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

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

Смешанные отчеты в Интернете показывают увеличение скорости перехода на PHP 7 на 20-50%. Независимо от фактического процента, нам нужна была скорость, и мы хотели ее протестировать.

Если вы не знаете, какую версию PHP вы используете, установите эту плагин и вы увидите это в «Кратком обзоре» на панели администратора.

Прежде чем идти дальше, необходимо проверить совместимость сайта. К счастью, есть Плагин проверки совместимости PHP Вы можете скачать WordPress, который просматривает ваш код и выявляет любые проблемы с переходом на PHP 7.

Результаты показали, что нужно решить несколько вещей, о которых мы быстро позаботились. Мы были наконец готовы перейти на PHP 7.

Чтобы переключиться, из WHM вы получаете доступ к «Multi PHP Manager», выберите нужный сайт и измените версию PHP. Если у вас нет доступа к WHM, обратитесь к администраторам сервера, но убедитесь, что вы делаете это в среде тестирования / разработки - не рекомендуется ломать ваш рабочий веб-сайт.

Если у вас нет доступа к WHM, обратитесь к администраторам сервера, но убедитесь, что вы делаете это в среде тестирования / разработки - не рекомендуется ломать ваш рабочий веб-сайт

3. CSS и JavaScript блокировка рендеринга

Во-первых, вы должны определить, какие части ваших файлов CSS и JS имеют решающее значение для рендеринга. После этого вам нужно загрузить эти части в элемент <head> HTML, вставив их в теги <style> и <script>.

Второй шаг включает включение отложенной загрузки или асинхронной загрузки некритических элементов. Например, если вы используете всплывающие окна на веб-сайте, которые появляются через некоторое время, когда пользователь заходит на ваш веб-сайт, вы должны отделить CSS и JS для всплывающего окна в другом файле и загрузить, как описано ниже. (Любые некритические CSS-шрифты также могут быть отложенная загрузка используя этот фрагмент кода.):

<noscript id = "deferred-styles-number-1"> & amp; lt; link rel = "stylesheet" type = "text / css" href = "https://fonts.googleapis.com/css?family= У + Hyeon "/ & Amp; Amp; GT; </ noscript> <script> window.addEventListener ('DOMContentLoaded', function () {var loadDeferredStyles = function () {var addStylesNode = document.getElementById ("deferred-styles-number-1"); замена замены = document.createElement) ("div"); replace.innerHTML = addStylesNode.textContent; document.body.appendChild (replace) addStylesNode.parentElement.removeChild (addStylesNode);}; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrameAramationFrame | window.msRequestAnimationFrame; if (raf) raf (function () {window.setTimeout (loadDeferredStyles, 0);}); еще window.addEventListener ('load', loadDeferredStyles);}); </ Скрипт>

Для файлов JavaScript вы можете просто добавить отложенные или асинхронные атрибуты в теги <script>. Вы можете узнать больше о разнице между этими методами загрузки Вот ,

После этого вы никогда не столкнетесь с проблемами блокировки рендера в вашем файле стиля.

4. Оптимизируйте изображения

Почти все сайты имеют проблемы с оптимизацией изображений. Есть несколько способов исправить это.

5. Сократить

Существует множество плагинов, которые занимаются минимизацией файлов JS и CSS. Больше всего мы видим Autoptimize и Better WordPress Minify.

С помощью Autoptimize полностью облажался сайт и контактные формы. Ползунки героя и общий функционал на сайте сломались.

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

Поэтому мы выбрали Better WordPress Minify, который обеспечивает больший контроль и позволяет выбирать, что делать с каждым файлом JS и CSS. На настройку этого потребовалось больше всего времени: нужно было перемещать сценарии, проверять правильность работы сайта, а затем повторно запускать тест.

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

6. Не будьте плагином

Если вы используете CMS, такие как WordPress, Joomla и т. Д., Вам определенно следует избегать использования слишком большого количества плагинов.

Больше плагинов = медленный сайт.

Удалить любой жир. Удалить или отключить плагины, которые не используются. Вы можете делать небольшие изменения, используя пользовательское кодирование, а не устанавливать плагины-монстры, которые загружают 2-3 файла JavaScript или CSS.

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

7. Включить сжатие

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

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

############## CACHING-GZIP ############ <IfModule mod_expires.c> ExpiresActive On ExpiresDefault A2592000 <FilesMatch "\. (Txt | xml | js ) $ "> ExpiresDefault A2592000 </ FilesMatch> <FilesMatch" \. (Css) $ "> ExpiresDefault A2592000 </ FilesMatch> <FilesMatch" \. (Flv | ico | pdf | avi | mov | ppt | doc | mp3 | wmv | wav | mp4 | m4v | ogg | webm | aac) $ "> ExpiresDefault A2592000 </ FilesMatch> <FilesMatch" \. (jpg | jpeg | png | gif | swf | webp) $ "> ExpiresDefault A2592000 </ FilesMatch> < / IfModule> <IfModule mod_headers.c> <FilesMatch "\. (Txt | xml | js) $"> Набор заголовков Cache-Control "max-age = 2592000" </ FilesMatch> <FilesMatch "\. (Css) $" > Набор заголовков Cache-Control "max-age = 2592000" </ FilesMatch> <FilesMatch "\. (Flv | ico | pdf | avi | mov | ppt | doc | mp3 | wmv | wav | mp4 | m4v | ogg | webm | aac) $ "> Набор заголовков Cache-Control" max-age = 2592000 "</ FilesMatch> <FilesMatch" \. (jpg | jpeg | png | gif | swf | webp) $ "> Набор заголовков Cache-Control" max -age = 2592000 "</ FilesMatch> </ IfModule> <IfModule mod_deflate.c> <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^ (Accept- EncodXng | X-cept-Encoding | X {15} | ~ {15} | - {15}) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] {4, 13} $ HAVE_Accept-Encoding RequestHeader добавляет Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding </ IfModule> </ IfModule> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE "application \ atom / javascript" application / atom + xml "application / atom + xml" \ "application / json" \ "application / ld + json" \ "application / manifest + json" \ "application / rdf + xml" \ "application / rss + xml" \ "application / schema + json" \ "application / vnd.geo + json "\" application / vnd.ms-fontobject "\" application / x-font-ttf "\" application / x-javascript "\" application / x-web-app-manifest + json "\" application / xhtml + xml "\" application / xml "\" font / eot "\" font / opentype "\" image / bmp "\" image / svg + xml "\" image / vnd.microsoft.icon "\" image / x-icon "\" text / cache-manifest "\" text / css "\" text / html "\" text / javascript "\" text / plain "\" text / vcard "\" text / vnd. rim.location.xloc "\" text / vtt "\" text / x-component "\" text / x-cross-domain-policy "\" text / xml "</ IfModule> <I fModule mod_mime.c> AddEncoding gzip svgz </ IfModule> </ IfModule>

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

Изображения, как правило, являются одной из основных причин низкой оценки скорости страницы, поэтому рекомендуется, чтобы на мобильных представлениях вы удаляли (или скрывали) любые изображения, которые не добавляют никакой ценности мобильному интерфейсу.

Заключение

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

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

Больше ресурсов по скорости страницы здесь:

Кредиты изображений

Популярное изображение: Геральт / Pixabay.com
In-Post Image # 1: Скриншот Cai Simpson. Снято в октябре 2017 года.
In-Post Image # 2: lmonk72 / Pixabay.com

Com/css?
C> SetEnvIfNoCase ^ (Accept- EncodXng | X-cept-Encoding | X {15} | ~ {15} | - {15}) $ ^ ((gzip | deflate) \ s *,?