Pagespeed insights wordpress


WordPress is liberating websites, making them available for non-developers. People are discovering that they can build a website by themselves, without any technical superpowers, which is awesome! However, this also creates some issues along the way. For instance, what do you do if your Google PageSpeed Insights score is a bit low? Today, we talk about how you can improve PageSpeed Insights score for your WordPress site.

There’s a lot of debate around the subject of how Google ranks websites, and whether you should put more effort into raising the bar in an attempt to improve PageSpeed Insights score for your site. Of course, Google’s is not the only player in this game, and there are other tools available for monitoring website performance. GT Metrix and Pingdom do a great job in analyzing website speeds, and I recommend checking them as well. However, the rules of the game set by Google shouldn’t be ignored, moreover because they are easy to be met.

Here’s how the 10 Google PageSpeed recommendations can be checked, with immediate results for your site’s load time.

The good news is that for most of Google’s PageSpeed rules, there is a WordPress plugin that can assist you. Without any technical background, you will be able to fix your website code and improve PageSpeed Insights score!

Improve PageSpeed Insights score step #1: Google PageSpeed test


To begin with, you have to check how your website stacks up against Google’s PageSpeed metrics. This can be done on the spot, with no account needed, no email sign up, nor any marketing witchery. Just grab your website’s URL (or any URL you want to check) and
go HERE.

Just paste your website’s URL and wait a bit, the process will take a few seconds depending on the complexity of the page. Keep in mind that the analysis is made in relation to that exact URL – not the entire website. The page is fetched both for desktop and mobile usage, so you will actually receive two reports.

Google’s scale goes from 0-100, and each score is marked with a separate color, depending on the performance levels: red, yellow and green. Scoring over 85 points gets marked green, signaling you’re on the safe side.

The 10 rules of Google PageSpeed Insights

After running the analysis, you will get a detailed report on what your website is doing ok, as well as the things to improve, with actionable suggestions for both mobile and desktop versions. There are 10 main rules that Google is monitoring, some of them will be successfully met, some not.


For the failed ones, you will receive advice on how to better handle the requirements, mostly addressing webmasters who can work their way directly into the code.

Here are the things you should do first:

1. Leverage browser caching (see the original rule)

Some elements of your website can be temporarily stored (cached) to make the loading easier. Loading non-cached content (HTML, CSS, logo, images) will significantly slow things down. No wonder it is the number one fix for your website if you want to improve PageSpeed Insights score.

Caching for WordPress websites is managed by several free and premium plugins. I suggest trying out either W3 Total Cache (free solution, link below) or going directly for WP Rocket, which has a price tag, but still very affordable (it’s what we use on the blog).

2. Eliminate render-blocking JavaScript (see the original rule)

In short, some JavaScript code may be interfering with your above-the-fold content, preventing the page from loading properly.

There are two sides to this problem:

  • The technical explanation: the thing you need to do is move the call to jQuery from the head of the page further down, adjusting when the call to the jQuery module is made.
  • The simplified solution: you can fix the problem with one cool plugin – WP Deffered JavaScripts. It will force the browser to download JavaScripts in parallel, helping the site to load faster.

3. Optimize CSS delivery (see the original rule)

Most CSS requires extra time to download, so reducing the weight of the CSS code will also help improve PageSpeed Insights score.

One plugin that’s really effective when it comes to aggregating and minimizing JavaScript, CSS and HTML is called Autoptimize. Just install it and enable the options you want in Settings / Autoptimize.

If you don’t like it, you can use WP Super Minify alternatively.

4. Minify resources (see the original rule)

Unnecessary or redundant code affects the browser’s behavior. Google will downgrade you when your HTML, CSS and JavaScript files are too large. It’s recommended that all JavaScript files larger than 4096 bytes should be minified.

This process is handled well by the plugins that also optimize CSS delivery, which we mentioned in the previous point: WP Super Minify or Autoptimize. Use them to improve PageSpeed Insights score.

5. Enable GZip compression (see the original rule)

Continuing with the code improvements, CSS and HTML can also be compressed. This is done with GZip compression, which reduces the size of your website before sending it to the browser. This can be set in various ways:

  • You can have your web host set this up.
  • You can set it in your .htaccess file.
  • You can enable it through your caching plugin, like the aforementioned W3 Total Cache.

6. Optimize images (see the original rule)

Images contribute, on average, for about 60% of a web page’s total size – this is the largest factor influencing loading times. The optimization process can considerably reduce the size of your images by removing unnecessary information, and by smartly re-compressing them using the most appropriate algorithms.

The optimization may be handled in different ways. Lossless optimization is moderate and it is recommended for technical drawings where no details should be removed from the image. Lossy optimization can radically improve the website speed by shrinking images more aggressively. However, this will not interfere with the visual aspect of your image. Images will still be properly displayed on the web, and the optimization will not disturb the way users see the images online.

Another thing, cameras and smartphones create photos with lots of megapixels, which are not needed for the web. In order to keep an optimal image size, and reduce server space usage, you should also resize images to a maximum width and height that your WordPress theme can handle.

For a detailed how-to on image optimization please check out our other post here. It will help you improve PageSpeed Insights score.

7. Improve server response time (see the original rule)

Slow response time may be caused by several issues: poor web hosting, web server setup, traffic overload or too many resources used. Google’s optimal server response time recommendation is set below 200ms.


Among other things, having too many poorly coded plugins may affect the server’s response times. To check which plugins are slowing your site down, use the P3 (Plugin Performance Profiler) plugin. It will give you a list of all the trouble-makers.

8. Prioritize visible content (see the original rule)

A very good practice in website coding – when building the HTML structure of your site – is to put content first, and then all the side elements and JavaScript further down the page.

Google also warns about reducing the amount of data used by your resources – an option which should have been resolved by the plugins recommended when discussing rule #4.

9. Use asynchronous scripts (see the original rule)

When the code is executed synchronously by the browser, it cannot do more than one task at a time and will prevent the page from loading faster.

For this, Google has published a list of the asynchronous versions of popular JavaScript tools/script. Make sure that you use them instead of their standard versions to improve PageSpeed Insights score.

Pagespeed insights wordpress


https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 300w, https://mllj2j8xvfl0.i.optimole.com/8a1c53eef6f6447a8eab844a5e5e4388/768/613/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 768w, https://mllj2j8xvfl0.i.optimole.com/e802454dab65d5db77a13fb079e8d20e/50/40/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 50w, https://mllj2j8xvfl0.i.optimole.com/6e6bb5baacfbc6ebc0ac840652b8ee1c/301/240/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 301w, https://mllj2j8xvfl0.i.optimole.com/57909169f343cecba7011360bb6bc078/497/397/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 497w, https://mllj2j8xvfl0.i.optimole.com/042f9f840882a517c5cbae6f3d0a8979/751/600/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 751w, https://mllj2j8xvfl0.i.optimole.com/cc3f04f58497e88b0bcf98063ccc53ce/185/148/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 185w, https://mllj2j8xvfl0.i.optimole.com/92a8a1d9c4905eff87fb6dfac3bbd23e/244/195/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 244w, https://mllj2j8xvfl0.i.optimole.com/c65dae6e5aff8f8859cb03ebda98cb8a/169/135/auto/https/themeisle.com/blog/wp-content/uploads/2016/08/UseAsync.png 169w" sizes="(max-width: 779px) 100vw, 779px" />


10. Avoid multiple landing page redirects (see the original rule)

Redirects are a nice tool for getting people exactly where you want them on your website. However, unnecessary redirects will also cause delays and make it more difficult to improve PageSpeed Insights score for your WordPress site.

Google isn’t particularly fond of redirects in any shape or form. However, when you do need to use them, make sure that you have only one redirect for a single URL.

For example, avoid redirecting from site.com/page » www.site.com/page » m.site.com/page when dealing with the mobile version.

If you want just simple one-time 301 redirects, try out a plugin called Linker. In short, it lets Google know that whatever you’re redirecting isn’t a temporary redirect but will stay there for good.

themeisle.com

Началось все с того что Adsense в очередной раз понизил оценку эффективности страниц:
image
А все мы знаем, что скорость сайта – один из факторов ранжирования в выдаче Гугла.


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

Изначально имеется сайтик со статьями, коих в интернете миллионы: CMS WordPress 4.2, два десятка плагинов, тема, сверстанная фрилансером и shared хостинг.

Разберем по пунктам, что было исправлено в этом конкретном случае. Уверен, статья будет полезна всем, кто использует WP.

За основу взят скринкаст Алексея Климанова «Как увеличить скорость загрузки сайта», за что ему отдельное спасибо. Однако, WP имеет свои особенности, их мы рассмотрим более подробно.

Окей, Гугл, что не так с моим сайтом?

image

1. Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

Самый увлекательный пункт. Если говорить кратко, CSS нужно подгружать скриптами, сами скрипты перенести в футер и избавиться от стандартного подключения Google Fonts.

1.1. На обычном WP-сайте как правило присутствует основной style.css текущей темы и несколько файлов со стилями плагинов, а так же различные фреймворки.

Первым делом, переносим все стили в файл style.css текущей темы, исправляем урлы картинок, добиваемся чтобы все работало.

Для того чтобы отключить загрузку стилей отдельных плагинов, нужно сделать следующее: находим, где в плагине подключаются стили, обычно для этого используют функцию wp_enqueue_style(). Первый аргумент этой функции – идентификатор файла CSS, текстовая строка.

//пример для fancybox, подключение css в одном из файлов плагина: wp_enqueue_style('fancybox', …blah-blah-blah…. );    

Копируем идентификатор и отменяем регистрацию этого файла при помощи wp_deregister_style() в своем functions.php. Нужно повесить хук на событие ‘wp_print_styles’, вот так это выглядит полностью:

function remove_styles () { 	wp_deregister_style ('fancybox'); 	wp_deregister_style ('contact-form-7'); 	wp_deregister_style ('etc'); } add_action ('wp_print_styles','remove_styles',100); 

Бывает что автор плагина особо не заморачивается и просто подключает стили так:

echo '<link rel="stylesheet" href="…… 

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

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

Остальные стили остаются в style.css и подгружаются скриптом. Например, при помощи такой строки в футере:

<script> jQuery("head").append("<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?> " type="text/css" media="screen">"); </script>   

Для того чтобы пользователи, с отключенным JS, видели корректную страницу, обрамляем стандартный вывод стилей в noscript, PageSpeed не учитывает эту строку:

<noscript><link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /></noscript> 

1.2 Все скрипты JS подключаются в конце страницы. Это делается добавлением нескольких строк кода в functions.php:

function footer_enqueue_scripts(){ 	remove_action('wp_head','wp_print_scripts'); 	remove_action('wp_head','wp_print_head_scripts',9); 	remove_action('wp_head','wp_enqueue_scripts',1); 	add_action('wp_footer','wp_print_scripts',5); 	add_action('wp_footer','wp_enqueue_scripts',5); 	add_action('wp_footer','wp_print_head_scripts',5); } add_action('after_setup_theme','footer_enqueue_scripts'); 

При этом подключение библиотеки JQuery тоже происходит из футера. Но на обычном сайте частенько вставки с JQuery-кодом выводятся в разных местах страницы. Чтобы этот код корректно работал, используются костыли от Colin Gourlay.

В head добавляем:

<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script> 

А в футер, сразу после <?php wp_footer(); ?>:

<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script> 

1.3 Да, Pagespeed Insights считает, что шрифты, которые загружаются с fonts.googleapis.com, замедляют отображение страницы. Чтобы это исправить воспользуемся рецептом с сайта css-live.ru

Суть метода такова: шрифты преобразуем в woff, кодируем в base64 и подключаем одним CSS-файлом, загружая его в localStorage. До того как браузер загрузит шрифт, пользователь видит Arial например.

Копипастить не буду, способ очень подробно описан по ссылке.

2. Используйте кеш браузера

Для решения выполнены 2 действия: установлен плагин Hyper Cache с дефолтными настройками и добавлен код в .htaccess, который отдает заголовки ‘Expires’ по типам файлов:

<ifModule mod_expires.c>  ExpiresActive On  # Cache Images ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds"  # Cache other content types (Flash, CSS, JS, HTML, XML) ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 2592000 seconds" ExpiresByType application/javascript "access plus 2592000 seconds" ExpiresByType application/x-javascript "access plus 2592000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds"  </ifModule>  

3. Сократите JavaScript,
4. Сократите CSS:

Существуют плагины, но поскольку код не редактируется каждый день, сжимать его «на лету» не имеет смысла – лишняя нагрузка на сервер. Поэтому код js и css минифицируется каждый раз после редактирования, через онлайн-сервисы.

5. Сократите HTML

Самый легкий пункт. Для сжатия html был установлен и активирован плагин ‘WP-HTML-Compression’.

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

Оказалось, что 2800 картинок можно скачать с сервера, прогнать через веб-интерфейс Tinygrab, и закачать обратно всего за 4 часа. После этого был установлен плагин tinygrab, который жмет все загружаемые изображения PNG и JPEG, до 500 картинок в месяц бесплатно.

Итог:
Если протестировать случайную страницу сайта, то получим результат 95-99, иногда гугл говорит, что сторонние скрипты и картинки замедляют работу.
image
Для более объективной оценки была создана страничка без сторонних скриптов, т.е. без рекламы, счетчиков и форм поиска. Ее результат варьируется от 99 до 100 от случая к случаю:
image

И, честно говоря, %username%, я сам немного в шоке.

habr.com

Как ускорить WordPress по мнению Google PageSpeed Insights

1. Файл .htaccess

Первое, что нужно сделать, это добавить вот этот код в конец файла .htaccess:

# сжатие text, html, javascript, css, xml:  <ifModule mod_deflate.c>  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript  </ifModule>

и этот:

# кеш браузера  <ifModule mod_expires.c>  ExpiresActive On  #по умолчанию кеш в 5 секунд  ExpiresDefault "access plus 5 seconds"  # Включаем кэширование изображений и флэш на месяц  ExpiresByType image/x-icon "access plus 1 month"  ExpiresByType image/jpeg "access plus 4 weeks"  ExpiresByType image/png "access plus 30 days"  ExpiresByType image/gif "access plus 43829 minutes"  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"  # Включаем кэширование css, javascript и текстовых файлоф на одну неделю  ExpiresByType text/css "access plus 604800 seconds"  ExpiresByType text/javascript "access plus 604800 seconds"  ExpiresByType application/javascript "access plus 604800 seconds"  ExpiresByType application/x-javascript "access plus 604800 seconds"  # Включаем кэширование html и htm файлов на один день  ExpiresByType text/html "access plus 43200 seconds"  # Включаем кэширование xml файлов на десять минут  ExpiresByType application/xhtml+xml "access plus 600 seconds"  </ifModule>

Нужно вставлять ПЕРЕД «# END WordPress», напомню также, что файл .htaccess лежит в корне сайта, там где папки wp-admin, wp-content и другие:

Ускорить сайт на WordPress

Это позволит включить кэш браузера. После установки этого кода, поисковые системы вздохнули свободно: «Наконец-то Петя это сделал»: ?

Google Pagespeed

Скриншот выше — это с Google Webmasters -> Сканирование -> Статистика сканирования.

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

Изначально, если не лень (а я это не делаю, так как мне лень ? ), картинки можно пересохранять в Photoshop, используя кнопку «Сохранить для Web».

Сжатие картинок для ускорения сайта

 

Уже там сохраняете картинку в приемлемом для вас качестве. Вес картинки серьезно уменьшится. Повторюсь, я это не использую (исключение — миниатюры к постам).

Я использую дополнительно плагин WP-Smush.it. Он сжимает картинки без потери качества. Это не замена предыдущему инструменту, а дополнение к нему. Данный плагин может сжать даже те картинки, которые уже есть на блоге. Достаточно нажать на одну кнопку. Для подробностей просто перейдите по ссылке выше.

3. Оптимизация html и скриптов.

Следующее, что вам нужно  сделать, это оптимизация html и скриптов, для этого просто установите и настройте плагин Autoptimize.

Правда я пока столкнулся со следующими проблемами:

  • перестало работать меню в мобильной версии сайта;
  • перестал работать поиск от Яндекса;
  • улетает счетчик Рамблера куда-то вниз.

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

4. Мобильная версия сайта

Дальше вам нужно создать мобильную версию сайта. Да, это необходимо. Почему? Потому что:

  1. В Google с апреля месяца наличие мобильной версии сайта будет влиять на ранжирование. А это значит, что конкуренты, у которых будут мобильные версии сайта, будут иметь преимущество над вами. Я уверен, Яндекс тоже скоро последует подобному примеру.
  2. Ваши пользователи будут вам благодарны. У вас улучшаться поведенческие факторы, что в результате снова влияет на позиции в поисковых системах. А это очень хорошо учитывает Яндекс.

5. Удаление ненужных плагинов

Дальше обязательно деактивируйте и удалите те плагины, которые вам не нужны. Вот здесь вы можете найти самые необходимые плагины для WordPress, и то некоторые из них можно заменить на php код без использования плагинов.

10-20 плагинов — это максимум. При возможности я бы довел эту цифру до 5-7.

wpnew.ru

Данная статья пойдет о том, как увеличить показатели Google PageSpeed Insights на WordPress. Расскажу с чего появилась решимость написать такую статью. Не так давно может дня 3-4 назад, один из заказчиков спросил смогу ли я сделать это и сколько будет стоять. Вообщем всё хорошо все рады, но я загнался этими показателями для себя, испробовал много достаточно способов (различные плагины, костыли, правки движка и тему), то что я расскажу в этой статье поможет большинству сайтов на WordPress (мне лично это помогло и я использовал эту фишку). Ну-с… Начнем!

 

Использовал я всё это на этом сайте (culabra.ru). Сайт стоит на Apache/2.2.15 (CentOS), версия php 7.0. Версия движка WordPress 4.7.2. 

Небольшое предисловие. На сайте стоял WP Super Cache (настроенный на php), выдавало 34 на мобильном и 45 на компьютере по Google PageSpeed Insights. Сменил настройки апачи и поменял настройки плагина на mod_rewrite, значения поднялись на 36 и 46.

Использовав правки что я даю ниже, вы повысите показатели Google PageSpeed Insight. Лично я повысил показатели до 64 на мобильном и 80 на компьютере.

 

 

1. Включим кеширование на стороне браузера через файл .htaccess:

Для начала включим кеширование на стороне браузера (если оно не включено), я включил его с следующих строк в файл .htaccess:

Напомню немного для тех кто забыл или не знает. Вставляем код что выше мы в файл .htaccess, он лежит в корне вашего сайта WordPress. Код мы вставляем после строки # END WordPress (при необходимости настройте время кеширования под себя).

 

Что мы этим сделаем? Мы включим кеширование наших страниц и файлов в браузере, что увеличит скорость работы сайта WordPress и уменьшит вес страницы и её вложений. Также это повысит наши показатели в Google PageSpeed Insights.

 

2. Оптимизируем картинки и изображения:

Теперь когда показатели поднялись, нам нужно продолжить оптимизировать наш сайт под себя. Вам наверняка нужно будет оптимизировать изображения и картинки сайта. Для этого можете воспользоваться программой Adobe PhotoShop. При сохранении картинки выберите там «Сохранить для web…» — и настройте под себя размер, качество и т.п.. Сохраняя так изображения для сайта, вы сэкономите очень весомое количество места, ведь так картинки будут весить меньше.

Кроме того, вы можете использовать более продвинутое средство для WordPress в виде плагина WP-Smush.it. Его кстати я тоже использую, вместо photoshop`а. Вы можете использовать их в связке. Расскажу немного о программе и что она делает. Программа может оптимизировать, а точнее сжимать ваши изображения без потери качества/с минимальными потерями качества. Также если вас не устроит то, что сделал плагин,то вы можете отменить это на странице «Медиафайлы».

 

Скажу еще кое-какое дополнение. Смотрите настройки которые вам нужно оптимизировать, перенесите болтающийся код в файлы (js, css). Уберите не нужные файлы стилей и скрипты, если используете какие-то модули, которые подключают эти файлы, то ограничьте их использование только в модуле, дабы не грузить остальные страницы. На этом пожалуй я закончу, если появятся вопросы или дополнения пишите в комментариях, всё рассмотрим вместе!

culabra.ru

Как улучшить показатели скорости загрузки сайта в Google PageSpeed

 

Ошибка — «Используйте кеш браузера»

На некоторых хостингах возникает ошибка «Используйте кеш браузера». Для исправления этой ошибки нужно вставить следующий код в файл .htaccess (находится в корневой директории WordPress, еще к нему можно получить доступ с помощью плагина Yoast SEO):

# BEGIN EXPIRES  <IfModule mod_expires.c> ExpiresActive On  ExpiresDefault "access plus 10 days" ExpiresByType text/css "access plus 1 week"  ExpiresByType text/plain "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month"  ExpiresByType image/jpeg "access plus 1 month"  ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-icon "access plus 1 year"  </IfModule>  # END EXPIRES

 

Если у вас стоит Яндекс.Метрика, или Google Analytics — то исправить данную ошибку не получится. Но ничего страшного, так как данные сервисы не тормозят работу вашего сайта.

Ошибки — «Сократите HTML, Сократите CSS, Сократите JavaScript»

Эти ошибки поможет исправить плагин Autoptimize. В настройках включаем:

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

Ошибка — «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

Решается с помощью плагина Autoptimize. Для этого нужно поставить галочку в пункте Inline all CSS

Также эта проблема может возникнуть, если на сайте используются шрифты Google fonts. Подключать их нужно в footer.php в таком виде:

 

<link href="https://fonts.googleapis.com/css?family=Jim+Nightshade" rel="stylesheet">

 

Ошибка — «Оптимизируйте изображения»

Чтобы оптимизировать изображения, установите плагин WP Smush. Если неоптимизированные изображения находятся в папках темы, либо внутри плагинов — Google предлагает скачать оптимизированные изображения на странице проверки сайта PageSpeed. Ими нужно заменить «тяжелые» картинки.

Ошибка «Включите сжатие» и ошибка «Сократите время ответа сервера»

Чаще всего с ними помогает бороться плагин WP Super Cashe. После установки необходимо в настройках плагина включить кеширование и включить опцию — «Сжимать файлы кэша чтобы ускорить работу»

 

inprocess.by

Why Care About Page Speed?

There are a multitude of reasons why you should care about page speed. Everything from ranking higher in Google search results to providing your visitors with a better user experience, thus increasing conversions, all comes into play.

We’ve said it before but it’s worth reiterating that as web page load times increase, so does the likelihood of your visitors bouncing. Take these statistics from Google’s industry benchmarks for mobile page speed guide:

That same guide also goes into details regarding the page speed, page weight, and more of sites within particular industries such as automotive, technology, retail, etc. According to Google, the best practice for a website’s speed is to keep it under 3 seconds load time. As we can see from the graph below, this best practice is far from being met for sites based in the United States.

Furthermore, as the growth of web page size continues, Google’s recommended best practice of keeping a website under 500Kb in size is also nowhere near being met, on average.

The constant growth in web page size is likely a contributing factor to why static sites have been increasing in popularity as of late. Static sites don’t require a backend or database and are much more simple to manage. They’re also, on average, much smaller in size. Therefore if your site doesn’t require dynamic content, moving to a completely static site may drastically help improve your overall page speed and page weight. Read more about static site generators as well as how to host a static site with a CDN.

How Page Speed Affects the Bottom Line

As we’ve already discussed, page speed affects many areas of a website that can change (for better or worse) how much revenue your business produces online (given you are selling something). However, knowing just how much money you’re business is potentially losing out on provides a much greater incentive to then make a change.

That’s why Google created a performance revenue calculator that estimates how much additional revenue you could be making if your site was faster. Take the example below for instance. A site which loads in 2.6 seconds, has 200,000 monthly visitors, collects an average order value of $20 and has a conversion rate of 2%. If the site owner were to improve the speed the speed of that site by just 1 second, they could potentially increase their annual revenue by almost $44,000 USD.

That’s a fair amount of money for doing something that doesn’t take too much effort. That being said, there are a lot of different optimization suggestions out there and knowing how to implement each one can take some time. However, as mentioned in the section below, don’t base your efforts solely off of the PageSpeed Insights metrics. Your goal here isn’t too score 100/100 just for the sake of having 100/100, the goal is to improve your site’s overall performance.

Don’t Obsess Over the 100/100 Metric

A lot of people try and strive for that 100/100 score on Google PageSpeed Insights. Some do it because they are trying to speed up their site and others because a client is demanding they meet this metric (yes, this happens more than you think). It is important to take some time though and think about why we are trying to achieve that 100/100 score. Don’t think of it solely from a metrics point of view. The whole reason Google developed PageSpeed Insights was as a guideline on best web performance practices to provide recommendations to optimize your site. And by following the guidelines hopefully, you will achieve a faster website.

It is also important to remember that achieving that 100/100 might not always be possible depending upon how your environment is setup.

WordPress and Google PageSpeed Insights

When it comes to trying to speed up WordPress, it can sometimes be quite tricky. We all know WordPress is not the fastest platform out there, especially from a developers point of view. And the way scripts are enqueued and 3rd party plugins operate can make this somewhat of a nightmare, especially when compared to standalone frameworks. We decided to experiment with our test site and after some tweaking, we were easily able to achieve a 100/100 score on PageSpeed Insights. This includes a 100/100 Speed and 100/100 User Experience score on mobile as well as a 100/100 Desktop suggestions summary.

Here is what we did to our WordPress installation. Feel free to copy it!

1. Optimize Images

Google PageSpeed Insights is telling us we need to optimize our images. To fix this warning, we simply install and run the Optimus Image Optimizer plugin which is developed and maintained by KeyCDN. This plugin focuses on smart compression, which means it uses a combination of both lossless and lossy compression techniques. It has a bulk-optimization feature so after you first install it you can compress your entire media library with one click. And from there on out it will auto-compress your images upon upload. We are also using the plugin because it converts our images to .webp. This allows for even faster download times!

Be aware that PageSpeed insights can show two different recommendations for image optimization, these include:

  1. Optimize Images: “Compressing … could save 4.7 KiB (30% reduction).”
  2. Optimize Images: “Compressing and resizing … could save 5.8 KiB (51% reduction).”

The first recommendation is focussed solely towards compressing your image whereas the second recommendation is focussed on compression and resizing. If your image is too large and should be scaled down for the browser, this recommendation will be triggered. Here is more information about both PageSpeed Insights image optimization suggestions.

2. Minify Javascript and CSS

Google PageSpeed Insights is now telling us we need to minify our JavaScript, CSS, and HTML. To fix this problem we install the free Autoptimize plugin. In the plugin’s settings you will want to check the following:

  1. Optimize HTML Code
  2. Optimize JavaScript Code
  3. Optimize CSS Code

We also are using KeyCDN’s free WordPress Cache Enabler plugin to deliver the .webp images we converted earlier to visitors in Chrome browsers for faster download times. In the settings make sure to check “Create an additional cached version for WebP image support.”

3. Render-Blocking Resources Above the Fold

Now Google PageSpeed Insights is telling us that we have JavaScript and CSS above the fold. There are three commons scenarios most people run into here, and that is your JavaScript/CSS files, Font Awesome, and Google Fonts. Fonts are render-blocking as we discussed in our case study on web font performance.

Files

The first issue we have to deal with is all of our Javascript and CSS files that are above the fold, making them render-blocking. To fix this we actually go back into the Autoptimize plugin we installed earlier and save the following settings.

  1. Under JavaScript Options uncheck “Force JavaScript in <head>?”
  2. Under CSS Options check “Inline all CSS?”

Font Awesome

Many people who use Font Awesome take the CSS file and place it in their header. The problem is that if you put this into your header, it becomes render-blocking as CSS is render-blocking. So we take the following code and we move it down to our footer, right before the </body> tag.

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

Note: Doing this will result in FOUT, which is a flash of unstyled text.

Google Fonts

The third issue is with our Google Fonts. By default, WordPress uses a hook called wp_enqueue_scripts which loads the font in your header. This automatically results in it becoming render-blocking. To fix this we install a free plugin called Disable Google Fonts. If you are using a custom theme this might vary slightly, or you can ask your theme developer how to disable Google fonts.

We then include our Google font with the following code in our footer, right before the </body> tag.

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

Note: Doing this will result in FOIT, which is a flash of invisible text.

You could also load your Google fonts asynchronously by using Google’s Web Font Loader. Simply place the following code below in your footer.

<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. Leverage Browser Caching

Files

Now we are receiving a warning about leveraging browser caching. We are using KeyCDN, deployed with our free WordPress CDN Enabler plugin, and this means that any assets delivered from the CDN already have cache-control headers. However, there was one file which wasn’t getting delivered with the CDN. To fix this we simply add cache-control headers to our origin server by adding the following code to our .htaccess file.

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">   Header set Cache-Control "max-age=84600, public"   </filesMatch>

And here is the code if you are on a Nginx server.

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

Google Analytics

Another issue we run into is with Google Analytics. Funny thing is that this is a warning from their own script. http://www.google-analytics.com/analytics.js. The problem occurs because their script has a cache lifetime of only 2 hours. Google has already said that they won’t fix this. Which leaves almost everyone running analytics with a warning that they cannot fix. The most frustrating part of this is probably for people that deal with clients asking for Google PageSpeed Insights improvements. Telling a client you can’t fix something because Google won’t let you in their own tool sounds a little crazy.

A solution would be to host a local version of analytics.js. Google doesn’t recommend this but if you setup a script to grab the latest version it probably wouldn’t be an issue. There is free WordPress plugin called Complete Analytics Optimization Suite which sets up a cron job to sync across periodically the latest version of analytics.js. This then also allows you to serve it from your own CDN, such as KeyCDN. This will get rid of the “leverage browser caching” warning with Google Analytics.

Read our in-depth post on how to host Google Analytics locally.

5. Enable Compression

We already had Gzip enabled on our origin server and by default Gzip is enabled on all KeyCDN edge servers from where assets are being delivered. Below are instructions if you need to enable it on your origin server.

Apache

You can enable compression by adding the following to your .htaccess file.

<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

You can enable compression by adding the following to your nginx.conf file.

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. Reduce server response time

And finally, the reduce server response time warning. The best recommendations for this is to use a fast web host and also implement a CDN, such as KeyCDN.

And that’s it! If you were able to follow everything above you should now have a 100/100 in Google PageSpeed Insights with your WordPress site.

7. Remove Query Strings – Optional Step

Another thing we recommend is to remove query strings from your static resources. Resources with a “?” in the URL are not cached by some proxy caching servers or CDNS, which could result in a large missed opportunity for increased speeds. One way to do this would be to add the following to your functions.php file.

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 );

Another option would be to install a free plugin like Remove Query Strings From Static Resources.

This plugin removes query strings from your static resources like CSS and JavaScript files. It will improve your cache performance and overall score in Google PageSpeed Insights, YSlow, Pingdom and GTmetrix. Just install and forget everything, as there is no configuration needed. But make sure to clear your cache after installing this plugin.

Before and After

So does the 100/100 actually help us achieve a faster page speed? In fact, all of the optimizations we applied per Google PageSpeed Insights recommendations did decrease our load time. We thought we had a pretty fast site already, but manually going through each one of these and treating them like a checklist did shave off some additional time. See the difference below.

Before Google PageSpeed Insights Recommendations

We used both Pingdom and WebPageTest to show you the before and after. Remember, Pingdom doesn’t yet support HTTP/2. But some people still prefer seeing these tests as they have easier to understand metrics. We ran the tests five times and got a median as usual.

Pingdom

WebPageTest

After Google PageSpeed Insights Recommendations

Pingdom

WebPageTest

Here is a comparison of the results.

Testing Tool Before (s) After (s) DIFFERENCE %
Pingdom 0.328 0.277 – 15.55%
WebPageTest 1.839 1.537 – 16.42%

As you can see the total download time decreased on average around 15-16% by following all of the Google PageSpeed recommendations. We are also able to get rid of 9 HTTP requests, although this becomes less important with HTTP/2. Note: We were serving .webp images before and after.

Google PageSpeed Insights  – In Summary

As you can see the recommendations from Google PageSpeed Insights are valuable and if followed can help optimize your site. Again, we don’t recommend obsessing over these numbers. If you can’t score a 100/100 it isn’t the end of the world. Our best advice is to simply implement as many optimizations as you can in your individual environment. And don’t forget to test for user experience. Just because a tool says your site loads fast, it could be the exact opposite experience for an actual person browsing your site.

We also highly recommend reading our complete guide on how to speed up WordPress which contains additional optimization tips. The PageSpeed Insights team also launched a website speed test tool on “think with Google” which you might want to check out. One nice feature is the beautiful reports that it generates. Can be great for sending to clients.

Related Articles

  • 15+ Experts Share Their Web Performance Advice for 2018
  • Perceived Web Performance – What is Blocking the DOM?
  • 10 Website Speed Test Tools for Analyzing Web Performance

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.