Тестирование скорости с помощью инструментов, как Google PageSpeed Insights, WebPagetest или KeyCDN в тест скорости сайта всегда отличный помощник, чтобы оценить производительность вашего сайта. В то время как эти показатели могут быть очень полезны, также важно сохранить эти данные в перспективе. Посмотрим, как ребята достигли 100/100 с WordPress и Google PageSpeed Insights .
к содержанию ↑В погоне за 100/100
Многие люди пытаются достичь 100/100 на Google PageSpeed Insights. Некоторые делают это потому, что они пытаются ускорить свой сайт, а некоторые, например, коммерческие проекты требуют опитимизации, потому что хотят большей конверсии. Следуя рекомендациям, мы надеемся, вы добьетесь более быстрой скорости веб-сайта.
Важно также помнить, что достижение этой 100/100 не всегда возможна.
к содержанию ↑WordPress и Google PageSpeed Insights
Когда речь идет о попытке ускорить WordPress, иногда это может быть довольно сложно. Мы все знаем, WordPress не самая быстрая платформа, особенно с точки зрения разработчиков. И то, как скрипты сторонних плагинов подключаются и работают создает дополнительные трудности. Мы решили провести эксперимент с нашим тестовым сайтом и после некоторой настройки мы легко смогли достичь 100/100 на PageSpeed Insights.
Вот то, что мы сделали для нашего WordPress. Не стесняйтесь скопировать его!
к содержанию ↑1. Оптимизация изображений
Google Insights PageSpeed говорит нам, что мы должны оптимизировать наши изображения. Чтобы исправить это предупреждение, мы должны установить и запустить Optimus Optimizer Image плагин, который разработан и поддерживается KeyCDN. Этот плагин фокусируется на сжатие без потерь, а значит, вы не будете жертвовать качеством в ваших изображений. Она имеет функцию объемной оптимизации, после того, как вы сначала установите его вы можете сжимать всю вашу медиа-библиотеку одним щелчком мыши. Также он будет автоматически сжимать изображения при загрузке. Мы также используем плагин, потому что он преобразует наши изображения в .webp. Это позволяет еще более быстро загружать!
2. Сжатие JS и CSS файлов
Google PageSpeed Insights теперь говорит нам, что мы должны сжать наш JavaScript, CSS и HTML. Чтобы устранить эту проблему, мы устанавливаем бесплатный Autoptimize плагин. В настройках плагина вы выбирайте:
- Оптимизация HTML кода
- Оптимизация JavaScript кода
- Оптимизация CSS кода
3. Устранение блокирующи CSS и JS в верху страницы
Теперь Google PageSpeed Insights говорит нам, что у нас есть JavaScript и CSS в верху сайта.
Файлы
Первое, с чем мы должны иметь дело это все наши файлы Javascript и CSS, которые в верху сайта, блокируют отображение. Чтобы исправить это, мы возвращаемся в плагин Autoptimize который мы установили ранее и сохраняем следующие параметры.
- В разделе Параметры JavaScript снимите флажок «Force JavaScript в <head>?”
- Под проверкой параметров CSS “Inline all CSS?”
Font Awesome
KeyCDN спонсирует бесплатный шрифт, удивительный CDN проект, где вы можете получить самую последнюю версию и интегрировать еe в свой сайт. Проблема заключается в том, что если вы поместите это в ваш заголовок, он становится блокирующим, как CSS является блокирующим отображение. Таким образом, мы берем следующий код и перемещаем его вниз к нашему колонтитулу, прямо перед тегом </ BODY>.
<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">
Примечание: Выполнение этого приведет к FOUT, появление текста без стилей.
Google Fonts
Третья проблема связана с нашими Google шрифтами. В теме WP 25 они включают в себя шрифт Noto с засечками. По умолчанию WordPress использует Hock называется wp_enqueue_scripts который загружает шрифт в вашем заголовке. Это автоматически приводит его к блокировке. Чтобы исправить эту ошибку мы устанавливаем бесплатный плагин под названием Disable Google Fonts. Если вы используете пользовательскую тему, это может незначительно отличаться, или вы можете попросить своего разработчика темы, как отключить шрифты 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 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>
4. Активация кеша браузера
Файлы
Теперь мы получаем предупреждение об усилении кэширования браузера. Мы используем KeyCDN, развернутый с нашим бесплатным WordPress CDN Enabler плагин, и это означает, что любые активы, поставляемые из CDN уже имеют заголовки кэш-контроля. Однако с темой Двадцать Fifteen был один файл, который не получал поставляется с CDN. Чтобы исправить это, мы просто добавиили заголовки кэш-контроля для нашего запуска сервера, добавив следующий код в наш файл .htaccess.
<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf|woff)$"> Header set Cache-Control "max-age=604800, public" </filesMatch>
И код для NGINX сервера
location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
expires 7d;
add_header Cache-Control "public, no-transform";
}
Google Analytics
Еще одна проблема, которую мы сталкиваемся, заключается в с помощью 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.
<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here </script>
Примечание: Есть несколько вопросов, чтобы быть в курсе с помощью этого сценария. Но это, кажется, работает хорошо для просмотров страниц. Не стесняйтесь, чтобы открыть вопрос на Github, если вы нашли ошибки.
Другим решением было бы провести локальную версию analytics.js. Google не рекомендует этого делать, но если настроить скрипт, чтобы захватить последнюю версию, вероятно, не будет проблемой. Существует бесплатный WordPress плагин, который называется хост analytics.js Локально, который устанавливает задания хрон для синхронизации через периодически последнюю версию analytics.js. Тогда это также позволяет служить ей от вашего собственного CDN, таких как KeyCDN. Используете ли вы GA-облегченный сценарий или разместить локальную копию, это позволит избавиться от «кэширования браузера рычага» предупреждение с помощью Google Analytics.
Прочитайте в углубленном пост о том, как организовать Google Analytics на местном уровне.
к содержанию ↑5. Включить сжатие
У нас уже был включен Gzip на нашем сервере и по умолчанию Gzip доступен на всех серверах KeyCDN, где активы доставляются. Ниже приведены инструкции, если вам необходимо включить ее на сервере происхождения.
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 # Remove browser bugs (only needed for really old browsers) 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>
Nginx
Добавить в ваш nginx.conf файл.
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
6. Сокращение времени отклика сервера
И, наконец, уменьшить предупреждение время отклика сервера. Лучшие рекомендации для этого является использование быстрого веб-хостинга, а также реализовать CDN, такие как KeyCDN.
Вот и все! Если вы были в состоянии следить за всем выше теперь вы должны иметь в Google PageSpeed Insights на 100/100 с WordPress сайта.
7. Удалить строки запросов — необязательный шаг
Еще одна вещь, которую мы рекомендуем, чтобы удалить строки запроса из ваших статических ресурсов. Ресурсы с в URL символ «?» Не кэшируются некоторыми серверами кэширования прокси или CDNs, что может привести к большой упущенной возможности для увеличения скорости. Один из способов сделать это было бы добавить следующую строку в ваш файл functions.php.
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
На этом все. Спасибо за внимание. Удачных экспериментов.
Материал взят с https://www.keycdn.com/blog/google-pagespeed-insights-wordpress/
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
На этом сайте У Вас всего 4% оптимизации мобильной версии http://prntscr.com/mfmkmv, это печально
Здравствуйте! Да, есть такое дело. Проводим соц эксперимент. Влияет ли низкий процент на позиции СЕО.
Вот уж не думала что PageSpeed Insights меня может удивить, но ему это удалось! На днях, увидев новшество и потратив пол часа на его изучение, с ужасом обнаружила, что скачать оптимизированные изображения уже нельзя! Было не приятно, т.к. PageSpeed Insights обновился по тихому. Короче, что бы не быть мной)) прочтите статью как раз об этом: https://ifish2.ru/google-pagespeed-insights/
Спасибо! Нашел бесплатный и главное хорошо работающий плагин для сжатия картинок. Остальные так не сжимают!
Спасибо за статью — перевод.
Возможно и мой опыт в этом направлении Вам покажется интересным.
Я на вордпрессе добился показателя 100 из 100
https://web.master.plus/pagespeed/
Большое спасибо за статью, нашел для себя решение по 7 пункту (удалить строки запросов). Спасибо.
Да незачто! Спасибо нашим зарубежным друзьям