Google PageSpeed ​​Insights - 100/100 с помощью WordPress

1. Зачем заботиться о скорости страницы?
2. Как скорость страницы влияет на результат
3. Не зацикливайтесь на 100/100 метрике
4. WordPress и Google PageSpeed ​​Insights
5. 1. Оптимизировать изображения
6. 2. Сократить JavaScript и CSS
7. 3. Рендеринг блокирующих ресурсов выше фолда
8. файлы
9. Font Awesome
10. Google Fonts
11. 4. Используйте кеширование браузера
12. Гугл Аналитика
13. 5. Включить сжатие
14. апаш
15. Nginx
16. 6. Уменьшите время отклика сервера
17. 7. Удалить строки запроса - необязательный шаг
18. До и после
19. Перед рекомендациями Google PageSpeed ​​Insights
20. Pingdom
21. Google PageSpeed ​​Insights - кратко

Брайан Джексон

Опубликовано 14 июня 2018 г.

Тестирование скорости с помощью таких инструментов, как Google PageSpeed ​​Insights , WebPageTest или KeyCDN тест скорости сайта всегда хороший способ помочь оценить производительность вашего сайта. Хотя эти показатели могут быть очень полезными, важно также сохранять эти данные в перспективе. Хотя они могут предоставить ценную информацию, чтобы помочь оптимизировать ваш сайт, не забывайте о воспринимаемой производительности, особенно об опыте пользователя. С учетом сказанного, посмотрите, как мы легко достигли 100/100 баллов с помощью WordPress и Google PageSpeed ​​Insights .

Зачем заботиться о скорости страницы?

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

Мы говорили об этом раньше, но стоит повторить, что по мере увеличения времени загрузки веб-страницы увеличивается вероятность ваших посетителей. прыгающий , Возьми эту статистику от Google отраслевые тесты скорости мобильной страницы руководство:

В этом же руководстве также подробно рассматриваются скорость страницы, вес страницы и другие сайты в определенных отраслях, таких как автомобилестроение, технологии, розничная торговля и т. Д. Согласно Google, лучшая практика для скорости веб-сайта - удерживать ее менее 3 секунд. время загрузки. Как видно из приведенного ниже графика, эта лучшая практика далеко не соблюдается для сайтов, базирующихся в Соединенных Штатах.

Кроме того, как рост размера веб-страницы Продолжается, рекомендуемая Google лучшая практика по поддержанию размера веб-сайта размером менее 500 КБ также в среднем не соблюдается.

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

Как скорость страницы влияет на результат

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

Вот почему Google создал калькулятор доходности это подсчитывает, какую дополнительную прибыль вы могли бы получить, если бы ваш сайт работал быстрее. Возьмите пример ниже, например. Сайт, который загружается за 2,6 секунды, имеет 200 000 посетителей в месяц, собирает среднюю стоимость заказа в 20 долларов и имеет коэффициент конверсии 2%. Если бы владелец сайта увеличил скорость и скорость этого сайта всего на 1 секунду, он мог бы потенциально увеличить свой годовой доход почти на 44 000 долларов США .

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

Не зацикливайтесь на 100/100 метрике

Многие люди пытаются получить 100/100 баллов в Google PageSpeed ​​Insights. Некоторые делают это, потому что они пытаются ускорить свой сайт, а другие, потому что клиент требует, чтобы они соответствовали этой метрике (да, это происходит чаще, чем вы думаете). Важно уделить время и подумать о том, почему мы пытаемся достичь этого показателя 100/100. Не думайте об этом исключительно с точки зрения метрик. Причина, по которой Google разработал PageSpeed ​​Insights, заключалась в том, чтобы руководствоваться лучшими практиками работы в Интернете, чтобы предоставить рекомендации по оптимизации вашего сайта . И, следуя рекомендациям, мы надеемся, что вы получите более быстрый веб-сайт.

Также важно помнить, что достижение 100/100 не всегда возможно в зависимости от того, как настроена ваша среда.

WordPress и Google PageSpeed ​​Insights

Когда дело доходит до попытки ускорить WordPress Иногда это может быть довольно сложно. Мы все знаем, что WordPress не самая быстрая платформа, особенно с точки зрения разработчиков. А то, как сценарии ставятся в очередь и работают сторонние плагины, может сделать это своего рода кошмаром, особенно по сравнению с автономными фреймворками. Мы решили поэкспериментировать с нашим тестовым сайтом, и после некоторой настройки мы смогли легко получить оценку 100/100 на PageSpeed ​​Insights. Это включает в себя 100/100 Speed ​​и 100/100 User Experience для мобильных устройств, а также сводку предложений 100/100 Desktop.

Вот что мы сделали с нашей установкой WordPress. Не стесняйтесь копировать это!

1. Оптимизировать изображения

Google PageSpeed ​​Insights говорит нам, что нам нужно оптимизировать наши изображения. Чтобы исправить это предупреждение, мы просто устанавливаем и запускаем Optimus Image Optimizer Плагин, который разработан и поддерживается KeyCDN. Этот плагин ориентирован на ** интеллектуальное сжатие **, что означает, что он использует комбинацию методов сжатия без потерь и с потерями. Он имеет функцию массовой оптимизации, поэтому после первой установки вы можете сжать всю медиатеку одним щелчком мыши. И с этого момента он будет автоматически сжимать ваши изображения при загрузке. Мы также используем плагин, потому что он конвертирует наши изображения в .webp. Это позволяет даже быстрее загружать время!

Имейте в виду, что понимание PageSpeed ​​может показать две разные рекомендации по оптимизации изображений, в том числе:

1. Оптимизация изображений: «Сжатие… может сэкономить 4,7 КиБ (30% снижение)».
2. Оптимизация изображений: «Сжатие и изменение размера… может сэкономить 5,8 КиБ (сокращение на 51%)».

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

2. Сократить JavaScript и CSS

Google PageSpeed ​​Insights теперь говорит нам, что нам нужно минимизировать наш JavaScript, CSS и HTML . Чтобы решить эту проблему, мы устанавливаем бесплатный Автооптимизировать плагин , В настройках плагина вы захотите проверить следующее:

• Оптимизировать HTML-код
• Оптимизировать код JavaScript
• Оптимизировать код CSS

Мы также используем KeyCDN бесплатно WordPress Cache Enabler плагин для доставки изображений .webp, которые мы конвертировали ранее, посетителям в браузерах Chrome для ускорения загрузки. В настройках обязательно установите флажок «Создать дополнительную кэшированную версию для поддержки изображений WebP».

3. Рендеринг блокирующих ресурсов выше фолда

Теперь Google PageSpeed ​​Insights говорит нам, что у нас есть JavaScript и CSS выше сгиба . Есть три общих сценария, с которыми сталкивается большинство людей, это ваши файлы JavaScript / CSS, Font Awesome и Google Fonts. Шрифты блокируют рендеринг, как мы обсуждали в нашем примере производительность веб-шрифтов ,

файлы

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

1. В разделе «Параметры JavaScript» снимите флажок «Принудить JavaScript в?»
2. Под опциями CSS установите флажок «Inline all CSS?»

Font Awesome

Многие люди, которые используют Font Awesome, берут файл CSS и помещают его в свой заголовок. Проблема в том, что если вы поместите это в свой заголовок, он станет блокировать рендеринг, так как CSS является блокировкой рендеринга . Поэтому мы берем следующий код и перемещаем его в нижний колонтитул прямо перед тегом </ body>.

<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet">

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

Google Fonts

Третья проблема связана с нашими Google Fonts. По умолчанию WordPress использует хук с именем wp_enqueue_scripts, который загружает шрифт в ваш заголовок. Это автоматически приводит к блокировке рендера. Чтобы это исправить, мы устанавливаем бесплатный плагин под названием Отключить Google шрифты , Если вы используете собственную тему, это может немного отличаться, или вы можете спросить своего разработчика темы, как отключить шрифты Google.

Затем мы добавляем наш шрифт Google со следующим кодом в нижний колонтитул прямо перед тегом </ body>.

<link href = 'https: //fonts.googleapis.com/css? family = Noto + Serif: 400,400italic, 700,700italic' rel = 'stylesheet' type = 'text / css'>

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

Вы также можете загрузить свои шрифты Google асинхронно, используя Google Web Font Loader , Просто поместите следующий код в нижний колонтитул.

<script type = "text / javascript"> WebFontConfig = {google: {family: ['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);}) (); </ Скрипт>

4. Используйте кеширование браузера

файлы

Теперь мы получаем предупреждение об использовании кэширования браузера. Мы используем KeyCDN, развернутый с нашей бесплатной WordPress CDN Enabler плагин, и это означает, что любые активы, доставленные из CDN, уже имеют заголовки контроля кеша , Однако был один файл, который не доставлялся с CDN. Чтобы это исправить, мы просто добавляем заголовки управления кэшем на наш сервер происхождения, добавляя следующий код в наш файл .htaccess.

<filesMatch ". (ico | pdf | flv | jpg | svg | jpeg | png | gif | js | css | swf) $"> Набор заголовков Cache-Control "max-age = 84600, public" </ filesMatch>

А вот код, если вы находитесь на сервере Nginx.

location ~ * \. (js | css | png | jpg | svg | jpeg | gif | ico) $ {expires 2d; add_header Cache-Control "public, no-transform"; }

Гугл Аналитика

Еще одна проблема, с которой мы сталкиваемся, связана с Google Analytics. Самое смешное, что это предупреждение по собственному сценарию. http://www.google-analytics.com/analytics.js. Проблема возникает потому, что их сценарий имеет время жизни кэша всего 2 часа. Google уже сказал, что они не исправят это , В результате почти все аналитики получают предупреждение, которое они не могут исправить. Наиболее неприятная часть этого, вероятно, предназначена для людей, которые имеют дело с клиентами, желающими улучшить Google PageSpeed ​​Insights. Сказать клиенту, что вы не можете что-то исправить, потому что Google не впустит вас в свой собственный инструмент, звучит немного безумно.

Решением было бы разместить локальную версию analytics.js . Google не рекомендует это но если вы установите скрипт для получения последней версии, это, вероятно, не будет проблемой. Существует бесплатный плагин WordPress под названием Полный комплект для аналитики по оптимизации который устанавливает задание cron для периодической синхронизации последней версии analytics.js. Это также позволяет вам обслуживать его из вашего собственного CDN, такого как KeyCDN. Это избавит от предупреждения «использовать кэширование браузера» с помощью Google Analytics.

Прочитайте наш подробный пост о том, как разместить Google Analytics локально ,

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

Мы уже включили Gzip на нашем исходном сервере, и по умолчанию Gzip включен на всех пограничных серверах KeyCDN, откуда доставляются ресурсы. Ниже приведены инструкции, если вам нужно включить его на исходном сервере.

апаш

Вы можете включить сжатие, добавив следующее в ваш файл .htaccess.

<IfModule mod_deflate.c> # Сжатие HTML, CSS, JavaScript, текста, XML и шрифтов AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application_DyTyTyTyPyTypeFDTF / х-шрифт OpenType AddOutputFilterByType DEFLATE применение / х-шрифт-OTF приложение AddOutputFilterByType DEFLATE / х-шрифт TrueType приложение AddOutputFilterByType DEFLATE / х-шрифт-TTF AddOutputFilterByType DEFLATE применение / х-Javascript AddOutputFilterByType DEFLATE приложение / XHTML + XML AddOutputFilterByType DEFLATE приложение / XML AddOutputFilterByType DEFLATE шрифт / OpenType AddOutputFilterByType DEFLATE шрифт / OTF AddOutputFilterByType DEFLATE шрифт / TTF AddOutputFilterByType DEFLATE изображение / SVG + XML AddOutputFilterByType DEFLATE изображение / х-значок AddOutputFilterByType DEFLATE текст / CSS AddOutputFilterByType DEFLATE текст / html AddOutputFilterByType DEFLATE текст / JavaScript AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / xml # Удалить ошибки браузера (необходимо только для действительно старых браузеров) BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4 \ .0 [678] noMgipz bMSIE! no-gzip! gzip-only-text / html Заголовок добавляет Vary User-Agent </ IfModule>

Nginx

Вы можете включить сжатие, добавив следующее в файл nginx.conf.

GZIP на; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied любой; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types текст / обычный текст / html текст / приложение css / текст x-javascript / приложение xml / приложение xml / xml + rss text / javascript; gzip_disable "MSIE [1-6]. (?!. * SV1)"; gzip_vary on;

6. Уменьшите время отклика сервера

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

И это все! Если вы смогли выполнить все вышеперечисленное, теперь у вас должно быть 100/100 в Google PageSpeed ​​Insights на вашем сайте WordPress.

7. Удалить строки запроса - необязательный шаг

Еще одна вещь, которую мы рекомендуем удалить строки запроса из ваших статических ресурсов , Ресурсы с «?» В URL не кэшируются некоторыми прокси-серверами кэширования или CDNS, что может привести к большой пропущенной возможности для увеличения скорости. Один из способов сделать это - добавить следующее в файл functions.php.

function _remove_script_version ($ src) {$ parts = explode ('? ver', $ src); вернуть $ parts [0]; } add_filter ('script_loader_src', '_remove_script_version', 15, 1); add_filter ('style_loader_src', '_remove_script_version', 15, 1);

Другой вариант будет установить бесплатный плагин, как Удалить строки запроса из статических ресурсов ,

Этот плагин удаляет строки запроса из ваших статических ресурсов, таких как файлы CSS и JavaScript. Это улучшит производительность вашего кеша и общую оценку в Google PageSpeed ​​Insights, YSlow, Pingdom и GTmetrix. Просто установите и забудьте все, так как нет необходимости в настройке. Но не забудьте очистить кеш после установки этого плагина.

До и после

Так действительно ли 100/100 помогает нам достичь более высокой скорости страницы? Фактически, все оптимизации, которые мы применили в соответствии с рекомендациями Google PageSpeed ​​Insights, действительно сократили наше время загрузки . Мы думали, что у нас уже есть довольно быстрый сайт, но ручной просмотр каждого из них и обработка их как контрольного списка действительно сбрасывает дополнительное время. Смотрите разницу ниже.

Перед рекомендациями Google PageSpeed ​​Insights

Мы использовали Pingdom и WebPageTest, чтобы показать вам до и после. Помните, Pingdom еще не поддерживает HTTP / 2 , Но некоторые люди все еще предпочитают видеть эти тесты, так как им легче понять метрики. Мы провели тесты пять раз и, как обычно, получили медиану.

Pingdom

WebPagetest

После рекомендаций Google PageSpeed ​​Insights

Pingdom

WebPagetest

Вот сравнение результатов.

Тестирование инструмента До (s) После (s) Разница% Pingdom 0,328 0,277 - 15,55% WebPageTest 1,839 1,537 - 16,42%

Как вы можете видеть, общее время загрузки уменьшилось в среднем на 15-16% , следуя всем рекомендациям Google PageSpeed. Мы также можем избавиться от 9 HTTP-запросов, хотя это становится менее важным для HTTP / 2. Примечание. Мы обслуживали изображения .webp до и после.

Google PageSpeed ​​Insights - кратко

Как вы можете видеть, рекомендации Google PageSpeed ​​Insights являются ценными и, если их соблюдать, могут помочь оптимизировать ваш сайт. Опять же, мы не рекомендуем зацикливаться на этих цифрах. Если вы не можете выиграть 100/100, это не конец света. Наш лучший совет - просто внедрить как можно больше оптимизаций в вашей индивидуальной среде. И не забудьте проверить пользовательский опыт. Просто потому, что инструмент говорит, что ваш сайт загружается быстро, это может быть совершенно противоположным опытом для реального человека, просматривающего ваш сайт.

Мы также настоятельно рекомендуем прочитать наше полное руководство по как ускорить WordPress который содержит дополнительные советы по оптимизации. Команда PageSpeed ​​Insights также запустила инструмент тестирования скорости сайта на подумай с гуглом », Который вы можете проверить. Одна приятная особенность - это красивые отчеты, которые она генерирует. Может быть отлично подходит для отправки клиентам.

Похожие

Комментарии