21-12-2016, Скрипты

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

В погоне за 100/100

google-pagespeed-insights-100

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

Важно также помнить, что достижение этой 100/100 не всегда возможна.

WordPress и Google PageSpeed Insights

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

optimus-pagespeed-insights-100-score-730x375_2x

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

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

google-pagespeed-insights-optimize-images

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

pagespeed-insights-optimize-images

2. Сжатие JS и CSS файлов

minify-javascript-css-html

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

  1. Оптимизация HTML кода
  2. Оптимизация JavaScript кода
  3. Оптимизация CSS кода

google-pagespeed-insights-minification

3. Устранение блокирующи CSS и JS в верху страницы

pagespeed-insights-render-blocking-resources

Теперь Google PageSpeed Insights говорит нам, что у нас есть JavaScript и CSS в верху сайта.

Файлы

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

  1. В разделе Параметры JavaScript снимите флажок “Force JavaScript в <head>?”
  2. Под проверкой параметров CSS “Inline all CSS?”

Font Awesome

KeyCDN спонсирует бесплатный шрифт, удивительный CDN проект, где вы можете получить самую последнюю версию и интегрировать еe в свой сайт. Проблема заключается в том, что если вы поместите это в ваш заголовок, он становится блокирующим, как CSS является блокирующим отображение. Таким образом, мы берем следующий код и перемещаем его вниз к нашему колонтитулу, прямо перед тегом </ BODY>.

 

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

Google Fonts

pagespeed-insights-google-fonts

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

Затем включить наш шрифт Google со следующим кодом в нашем колонтитуле, прямо перед тегом </ BODY>.

Примечание: Выполнение этого приведет к Foit, резкого появления невидимого текста.

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

pagespeed-insights-no-render-blocking

4. Активация кеша браузера

pagespeed-insights-leverage-browser-caching-e1455046009524

Файлы

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

И код для NGINX сервера

Google Analytics

pagespeed-insights-google-analytics-e1455046023305

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

Одним из решений, чтобы исправить это облегченный сценарий Джесси Luoto, небольшое подмножество Google Analytics, который использует API Google Analytics Measurement Protocol REST.  Автоматически устанавливает соответствующие заголовки в сценарии, так что вы можете получить положительный результат. Скопируйте следующий код, приведенный ниже в футере, непосредственно перед тегом </ BODY>. Убедитесь в том, чтобы обновить его с идентификатором отслеживания UA.

Примечание: Есть несколько вопросов, чтобы быть в курсе с помощью этого сценария. Но это, кажется, работает хорошо для просмотров страниц. Не стесняйтесь, чтобы открыть вопрос на Github, если вы нашли ошибки.

Другим решением было бы провести локальную версию analytics.js. Google не рекомендует этого делать, но если настроить скрипт, чтобы захватить последнюю версию, вероятно, не будет проблемой. Существует бесплатный WordPress плагин, который называется хост analytics.js Локально, который устанавливает задания хрон для синхронизации через периодически последнюю версию analytics.js. Тогда это также позволяет служить ей от вашего собственного CDN, таких как KeyCDN. Используете ли вы GA-облегченный сценарий или разместить локальную копию, это позволит избавиться от “кэширования браузера рычага” предупреждение с помощью Google Analytics.

pagespeed-insights-cache-control

Прочитайте в углубленном пост о том, как организовать Google Analytics на местном уровне.

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

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

Apache

Добавить в .htaccess файл.

Nginx

Добавить в ваш nginx.conf файл.

pagespeed-insights-gzip-compression

6. Сокращение времени отклика сервера

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

Вот и все! Если вы были в состоянии следить за всем выше теперь вы должны иметь в Google PageSpeed Insights на 100/100 с WordPress сайта.

optimus-google-pagespeed-insights-100-score-730x43

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

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

 

 

На этом все. Спасибо за внимание. Удачных экспериментов.

Материал взят с https://www.keycdn.com/blog/google-pagespeed-insights-wordpress/


RomualdShmidtelson

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Отправить письмо