Почему не нужно беспокоиться о показателе Google PageSpeed Insights. PageSpeed Insights: скорость загрузки как фактор ранжирования
Подробно рассмотрим сервис гугла, про скорость загрузки сайта google page speed, как попасть в зеленую зону и набрать 99/100 возможных баллов. Быстрота открытия Вашего ресурса это очень важный показатель ранжирования сайта. В интернете очень много инструментов измеряющие скорость загрузки ресурса, но ориентироваться и пользоваться надо google page seed. Ваш проект должен быть в зеленой зоне! Данная зона начинается от 85 баллов. Чтобы обойти своих конкурентов набрать необходимо 98 — 99 баллов из 100. Все 100 получать не нужно, для ста необходимо отключить Яндекс Метрику и Гугл аналитику, что делать не желательно. Добившись высоких показателей, Вы сразу заметите рост позиций. Замерять необходимо каждую страницу отдельно. Переходим к практике.
От чего зависит скорость загрузки сайта google page speed
Время ответа сервера (это важно знать)
Предложение по оптимизацииТехнически самая сложно исправляемая ошибка. От отклика Вашего сервера зависит общая картина всех показателей. Если не удается добиться нормальных показателей, то лучше поменять хост или перенести проект на VPS выделенный сервер. — подробная статья
Проверяем время ответа сервера
Общее время отклика можно проверить на mts.webopulsar.ru/test вбив свой домен (см. скрин выше). Для быстрого ответа на хосте необходимо настроить ряд параметров, а именно кэширование и сжатие файлов. Все настройки производятся в файле.htaccess, если данного файла в корне сайта нет, то просто создайте его. Если используется VPS сервер, то необходимо настроить руками Nginx сервер. Ручная настройка VPS сервера выходит за рамки данной статьи. В WordPress самое простое решение это установка плагина WP SuperCahe или аналога. Описаний в сети по настройке этих плагинов очень много.
Ответ сервера — это так же количество обращений к нему за тем или иным файлом, а именно за CSS и JS скриптами. Самое первое с чего надо начать, это сократить количество этих файлов, тем самым сократится число запросов и время отклика соответственно. То есть все CSS стили темы необходимо загнать в один большой файл. Как правило, в теме WordPress штук 5 — 7 таких файлов. Тоже самое проделать со скриптами. Точно таким же образом все стили плагинов загнать в общий CSS, скрипты тоже самое. Далее подробно расскажем как отключать стили в плагинах и подключать к общему файлу. Отдельно рассмотрим очистку базы данных и многое другое. Но сначала закончим с настройкой отклика сервера.
Включение использования кэширования в браузере и проверка
Как уже было сказано выше, на обычном хосте отсутствует возможность настройки сервера руками и все управление происходит через файл.htaccess. В двух словах, отдача контента пользователю происходит либо через сервер Apach (Апач), либо Nginx (энжинс). Оба сервера достаточно быстры в отдаче материала пользователю, но Апач при посещаемости более 3000 уникальных посетителей начинает тормозить и захлебываться. При таком наплыве уже необходим Nginx выделенный VPS сервер. Для того чтобы на стороне пользователя выполнялось кэширование необходимо создать или в существующий файл.htaccess вставить соответствующий код, ниже будет приведен.
Для примера возьмем сайт, к нему есть доступ, это тестовый сайт. Кстати Вам тоже рекомендуем завести тестовый домен, закрыть его от индексации и на нем проводить тесты различных плагинов и серьезные переделки темы или всего сайта. И так, этот домен расположен на обычном хосте Мажордомо.
Очень плохие показатели сайта
Перед непосредственной настройкой кэширования на хосте необходимо проверить и в случаи необходимости переключиться на Апач. В Мажордоме это делается в панели управления, выбирается нужный домен в разделе сайты, щелчком по нему необходимо перейти в панель управления, далее на вкладку Nginx и там если стоят галки, то все поснимать и сохранить. Если у Вас другой провайдер, то ищите в панели настройки Nginx или спросите службу поддержки.
Переключение на Апач в Можордомо
Снимаем все галки и отдаем контент через Апач
Для настройки кэширования в файле.htaccess необходимо дать инструкции для сервера. Апач кэширует через модуль mod_headers или более современный mod_expires. Необходимо либо запросить информацию у провайдера, либо поочередно попробовать сначала один, затем другой код, но можно вставить и оба кода, конфликтовать не должно.
## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" ## EXPIRES CACHING ##
Или второй
# Включаем кэш в браузерах посетителей
После вставки необходимого кода снова выполните проверку скорости загрузки сайта.
Улучшение показателей после настройки кэширования
Настройка Gzip сжатия
Выполняется аналогично, добавлением следующего кода в файл.htaccess.
Mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Собственно всё, что можно было сделать для сокращения ответа сервера.
Выполните проверку вставленного кода, на предмет работы сжатия и кэширования. Для этого на странице сайта в браузере нажмите F5 (обновите страницу), далее F12, откроется окно web-разработчика (если попросит, то еще раз F5), перейдите на вкладку Network, далее в левом окне, в самом верху щелчок по названию страницы (см. скрин ниже), в правом окне на вкладке Headers откроются данные. Должны быть указаны параметры max-age=… и gzip deflate, как на рисунке. Если данные параметры отсутствуют, то что то Вы сделали не так, перечитайте мануал и повторите процедуру.
Проверка кэширования и сжатия после настроек
Добавьте еще две строчки кода:
Php_value memory_limit 512M php_value max_execution_time 30000
Это увеличит память PHP и увеличит скорость загрузки сайта. Идем далее и настраиваем саму тему, блог или магазин.
Улучшенные показатели, пункт кэширования и сжатия исчез
Как объединить CSS файлы и скрипты
Вы просто открываете общий файл CSS, как правило, он называется style.css и по очереди копируете в него все CSS файлы темы. Далее скопированные файлы темы необходимо отключить от вывода в функциях темы. Тоже самое проделать со скриптами. Обязательно сделайте резервную копию файлов, которые редактируете.
Следующим этапом необходимо стили плагинов так же загнать в общий файл style.css. Копируем содержимое стилевого файла плагина и вставляем в общий, затем переходим в функционал темы.
Отключение CSS плагинов обязательно нужно делать в функционе темы, чтобы при обновлении плагинов не переделывать заново. Отключение происходит по разному. Это может быть через add_filter или wp_degueue, wp_deregistr_style.
Во всех случаях необходимо найти в файле плагина название регистра отключаемого стиля. Для этого необходимо перейти в папку с плагинами, выбрать отключаемый и перебрать код, как правило, функционального файла (обычно название файла совпадает с названием программы). В качестве примера рассмотрим Newsletter. Открываем файл plugin.php и ищем что то с формулировкой style.
Ищем нужную функцию отключения CSS
Из скриншота видно, что стили подключаются через функцию wp_degueue, соответственно и отключать надо через неё. Далее смотрим на что ругается google page speed, видим что это один файл под названием style.css — копируем его в общий. Далее на любой странице своего сайта открываем html код, нажимаем Ctrl+U и ищем файл который дает отрицаловку. В нашем случаи это вот эта строка, см. скрин
Ищем на что ругается google page speed
Поиск нужной функции в плагине
Примерно таким же образом отключаем остальные стили плагинов. В принципе в интернете можно, наверное, найти необходимые готовые коды отключения стилей и скриптов всех популярных модулей. Ниже дадим несколько кодов для плагинов, которые используются в нашей теме. А пока необходимо учесть еще один момент:
Очень часто в стилях плагинов прописывают относительные пути к изображениям. То есть в папке с программой идут определенные картинки. Путь к ним указывается относительный. К примеру: название-плагина/img/img.pmg.
При копировании в общий файл CSS картинка пропадет и работать не будет, появится битая ссылка, что является грубой внутренней ошибкой сайта. Чтобы этого избежать, необходимо найти все эти относительные адреса изображений и заменить на полный путь к файлу с картинками (абсолютный путь), примерно так: https://им_сайта.ру/трали/вали/плага/img/img.png
Рассмотрим еще несколько примеров. Плагин Contact Form7 необходимо переподключить следующим добавлением кода
Add_filter("wpcf7_load_css", "__return_false");
Стили woocommerce отключаются аналогично
Add_filter("woocommerce_enqueue_styles", "__return_false");
Мой любимый плагин для ведения подписки Newsletter отключается так:
Function wp_dequeue_newsletter_enqueue_style() { wp_dequeue_style("newsletter-subscription"); } add_action("wp_enqueue_scripts", "wp_dequeue_newsletter_enqueue_style", 20);
Если Вы придерживаетесь ФЗ — 153 и используете плагин о предупреждении сбора cookie, то отключить его можно установив в конце functions.php Вашей темы следующий код:
Function wp_dequeue_cn_css_style() { wp_dequeue_style("cookie-notice-front"); } add_action("wp_enqueue_scripts", "wp_dequeue_cn_css_style", 20);
По такой же схеме сократите все Ява скрипт файлы. Таким подходом Вы сократите порядка 10-15 запросов к серверу.
Перенос стилей и скриптов в футер
Браузер при открытии страницы загружает первый экран Вашей статьи. Соответственно идет загрузка хейдера — шапки сайта. Как правило, все скрипты и стили прописываются там. Теоретически это конечно правильно, но сильно замедляет загрузку. Для отображения первого экрана не нужен весь файл CSS, тем более что туда запихано все, что нужно и возможно не нужно вообще. Необходима малая его часть, поэтому вставьте между
и часть необходимого кода из CSS файла для отрисовки первого экрана, а остальной общий файл переместите в подвал. Как это сделать технически будет описано ниже. Так же необходимо и скрипты все перенести в подвал. Для этого в функционале темы добавляем следующий код:Function footer_enqueue_scripts() { remove_action("wp_head", "wp_print_styles", 8); remove_action("wp_head","wp_print_scripts"); remove_action("wp_head","wp_print_head_scripts",9); remove_action("wp_head","wp_enqueue_scripts",1); remove_action("wp_head","wp_site_icon",99); add_action("wp_footer", "wp_print_styles", 5); 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("wp_footer","wp_site_icon",99); } add_action("after_setup_theme", "footer_enqueue_scripts");
После этого все стили и скрипты будут находиться в подвале. Следующим моментом необходимо подключить асинхронную загрузку скриптов, это отложенная загрузка. Отвечает за это параметр defer. Добавьте в функции темы следующий код:
Function wcs_defer_javascripts ($url) { if(is_admin()) return $url; if (FALSE === strpos($url, ".js")) return $url; return "$url" defer="defer"; } add_filter("clean_url", "wcs_defer_javascripts", 11, 1);
Как сократить CSS, JS скрипты и ускорить загрузку сайта
Сокращение таблиц стилей подразумевает удаление комментариев, переводов строк, пробелов. После этих манипуляций файл значительно сокращается в размерах, но и редактированию практически не подлежит. Перед сокращением обязательно сделайте копию. Если после надумаете редактировать, редактируйте копию и после сжимайте снова.
Сервис сжатия CSS и JS
В интернете много сервисов для сжатия CSS файлов, вот один из них https://csscompressor.com (см. скрин выше). Просто копируете свой огромный файл и вставляете его в окно слева, жмете кнопку и справа готовый сжатый CSS, вставляете сокращенный код в файл на сайте, вместо старого, не забудьте сохранить изменения. Тоже самое проделывается со скриптами. Проверяется работа способность ресурса и скорость загрузки сайта.
После проделанных модификаций уже получили 85 из 100, читайте дальше и увидите все 100 из 100
Внимание:
В нашей обучающей программе Вы получаете полностью оптимизированный сайт на WordPress! Подписывайтесь в конце статьи на бесплатные уроки и запустите свой мега-проект в интернете.
Оптимизация изображений для увеличения скорости загрузки сайта
Все картинки должны быть оптимизированы и сжаты. Если у Вас много страниц и на них куча картинок, то Вы попали. На нашем блоге на момент технической реструктуризации было порядка 2000 изображений. Их полная обработка заняла три дня и чистого времени порядка 40 часов нудной, монотонной работы. Но оно того стоило, теперь любая наша страница выдает 99 из 100 баллов. А позиции сайта потянулись вверх.
Выполнить компрессию несколькими простыми способами. Первый: В самом Page Speed Tools в самом низу предлагаются файлы для скачивания, это скрипты стили и картинки. Но не обольщайтесь, программные файлы скорей всего будут не все, да и картинки могут недодать.
Сжатие изображений без потерь
Самый надежный и быстрый способ сжать картинки именно без потерь можно через онлайн сервис — compressor.io (просто скопируйте и вставьте в строку браузера). Сервис на английском, но прост и понятен. Для компрессии без потерь необходимо нажать на правую кнопку (см. скрин выше), работает только с jpg и png, хотя мы сжали и gif. Затем загрузить изображение и сжать, полученную копию можно скачать на комп и потом загрузить обратно на сервер или хост. Будьте внимательны, к названию картинки приклеивает свое название, не забывайте удалять его. Вот и все.
Сжимаем картинки в сервисе
Можно конечно в WordPress воспользоваться плагином, но это опять нагрузка на сервер. И скажем честно, что протестили пару широко разрекламированных плагинов, но результат плачевный, Гугл завернул сжатие и попросил поджать еще. На закуску самое интересное:
Удаление кода блокирующего отображение верхней части страницы
Удалите код JavaScript и CSS блокирующий отображение верхней части страницы. Так требуют поисковики. Что же это значит? А значит это следующее: По логике все скрипты и стили должны находится в подвале ресурса и загружаться после загрузки первого экрана. Но часть к примеру нужного CSS кода в первом экране может не загрузится, так как нужный код подгружается после отрисовки первого экрана.
Решается эта проблема достаточно просто. Необходимо из таблицы стилей выбрать нужный код, его еще называют критическим CSS и вставить его в header темы и всё ок.
Во завернул про простату, пойди найди тот код в сжатом CSS файле, да? Сам ищи!!!
Но все действительно просто, берете резервную копию не сжатого общего файла (куда копировали все стили темы и плагинов) и идете в сервис вычисления критического CSS по адресу https://jonassebastianohlsson.com/criticalpathcssgenerator/ и в строку 1 вставляете адрес страницы, в окно 2 вставляете полный CSS и жмете на кнопку 3. Полученный код надо вставить в header темы.
Сервис по выносу в шапку критического CSS
Сделать это надо через функцион темы, то есть в PHP файл функционала в самый конец вставляется следующий код
Add_action("wp_head", "hook_css"); function hook_css(){ echo ""; }
Код может получится большой. Далее проверьте еще несколько разных страниц на скорость загрузки. На некоторых ошибка может всплыть опять. Связано это с тем, что шаблон записи отличается от шаблона страницы и какого-то куска кода может не хватить. Главная страница так же отличается, где то Вы разрешили комментарии, где то нет, и это тоже может повлечь за собой эту же ошибку. Особое внимание уделите лендингам, скорость загрузки лендингов напрямую влияет на стоимость клика в контекстной рекламе. Чем выше скорость, тем ниже стоимость. — подробная статья.
После того, как убедитесь что все страницы срабатывают нормально, то сократите, то есть сожмите полученный CSS и окончательно вставьте в функцион, сохранив резервную копию структурированного кода.
Вот чего надо добится от каждой страницы чтоб было 99/100
Вот таких результатов Вы должны добиваться!
Очистка базы данных
Возвращаясь к отклику сервера, нужно отметить тот факт, что на время загрузки сайта значительно влияет база данных, её чистота. Под чистотой подразумевается действительно чистота, отсутствие пустых строк от удаленных комментов, ненужные старые редакции постов, включенные на автосохранение по умолчанию и прочий ненужный мусор. Ко всем этим пустым строкам и прочему мусору каждый раз происходит обращение и все это каждый раз загружается.
Тема очистки базы данных достаточно большая и объемная, ориентирована в основном на опытных пользователей, так же в сети много рекомендаций и мануалов. Наш же блог большей частью направлен на новичков. Мы дадим пару советов и хаков к WordPress в рамках данной статьи, которые помогут Вам решить проблемы с мусором в базе данных. Справится даже новичок.
Удалите все ненужные компоненты.
Удалите неиспользуемые плагины. Старайтесь вообще их избегать. Есть плагины которые могут требоваться только в определенный момент, тогда и активируйте, поработали и деактивировали.
Удалите все ревизии и отключите автосохранение записей и страниц.
Удаление автосохранения и ревизий записей и страниц
Открываем файл wp-config
Как уже говорилось, WordPress по умолчанию сохраняет до 25 последних копий редакций постов. Для отключения ревизий автосохранения записей необходимо открыть файл в корневой папке WP с названием wp-config.php (см. скрин выше), найти строку (если отсутствует, то в конце файла вставить) …. И после неё вставить вот этот код
Define(‘WP_POST_REVISIONS’, false); define(‘WP_POST_REVISIONS’, 0);
Обе строки кода рабочие, вставлять надо только одну. Если не хотите удалять все 25 редакций, то можно ограничить до нескольких штук, к примеру, до двух. Вместо указанного кода необходимо вставить вот такую строку:
Define(‘WP_POST_REVISIONS’, 3);
Далее необходимо удалить лишние редакции, представьте, что на блоге написано порядка 100 статей и ко всем есть по 5 — 10 редакций. Это сильно загружает Ваш сервер. В момент обращения к записи начинается перебор всех ревизий и только в самый последний момент загружается нужная последняя редакция поста. Ввиду этого нужно очистить базу от ненужных редакций.
Для этого переходим в панель управления базами данных и заходим в MySQL. На хосте Мажордомо это делается так: Выбираем в левой колонке базы данных, справа в нужной базе нажимаем ссылку PMA — откроется панель PHP MyAdmin, в ней переходим на вкладку SQL (см. скрин выше) и вводим следующий код:
DELETE FROM wp_posts WHERE post_type = "revision";
Внизу слева кнопка «вперед». Все наша база очищена. Проделанные операции значительно уменьшат время загрузки Вашего сайта.
Удаление ревизий PHP MyAdmin
Периодически, в зависимости от регулярности публикаций, объема комментирования и т. д. регулярно заходите в PHP MyAdmin и вставляйте вот эти запросы в разделе SQL
DELETE FROM wp_posts WHERE post_type = "revision"; DELETE FROM wp_posts WHERE post_status = "trash"; OPTIMIZE TABLE wp_posts,wp_postmeta,wp_comments,wp_options; DELETE FROM wp_comments WHERE comment_approved = "spam"; DELETE FROM wp_comments WHERE comment_type = "pingback"; UPDATE wp_posts p SET p.ping_status = "closed"; DELETE FROM wp_postmeta WHERE meta_key IN("_edit_lock", "_edit_last","_wp_old_slug");
1-ый запрос - удаляет все ревизии;
2-ой запрос - очищает корзину;
3-ий запрос - оптимизирует таблицы;
7-ой запрос - удаляет информацию о последних редактированиях постов и еще некоторые моменты.
Как правило, на сайте устанавливаются кнопки социальных сетей. Данные виджеты устанавливаются через плагин или сторонний скрипт. Если Вы используете плагин, то следуйте инструкциям выше, переместите стили и скрипты в общий файл и т. д. Если сторонний скрипт, то значение «defer» к скрипту может не прописаться, тогда его нужно прописать вручную.. Мы используем код от Яндекс сервиса, в теме для вывода кнопок в конце статьи его необходимо было разместить в файле comment.php. Значение «defer» необходимо в этом случаи прописать вручную. То есть к скрипту необходимо добавить defer = ‘defer’ как показано на рисунке.
Очень часто картинки с сайта копируют, просто даже не изменяя адреса. В таком случаи загрузка изображений происходит с Вашего сайта, и увеличивают нагрузку на Ваш хост. Что бы запретить такое копирование добавьте следующий код в файл.htaccess
RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?yourdomain.ru/.*$ RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]
Обязательно замените yordomain.ru на свой домен. После установки этого кода, если на сторонний сайт скопируют Вашу картинку без изменения адреса, то у них будут отображаться пустые места.
Спамеры постоянно бомбят комментарии путем запуска специальных роботов. Тем самым создают ненужную нагрузку на Ваш хост. Вставив код
RewriteEngine On RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} .wp-comments-post.php* RewriteCond %{HTTP_REFERER} !.*yourdomain.ru.* RewriteCond %{HTTP_USER_AGENT} ^$ RewriteRule (.*) ^http://%{REMOTE_ADDR}/$
в тот же.htaccess Вы запретите оставлять коммент минуя форму комментирования, таким образом, многие боты просто отвалятся.
На домашней странице выводите только анонсы записей. Выводите только 3 — 5 записей.
Иногда запись бывает очень популярная и обсуждаемая. Старайтесь не выводить более 50 комментов на странице.
Используйте только жизненно необходимые плагины. Удалите разную лобуду. То что можно сделать руками без использования дополнительных модулей, делайте руками, в интернете полно подробных рекомендаций и решений. При не использовании плагина, деактивируйте его на время бездействия. Так например OptimizeDB, плагин по оптимизации базы данных, нужен только при очистке БД.
Активировали, поработали с базой и деактивировали. Таким образом, это расширение будет создавать нагрузку только в момент работы, а не постоянно.
Подумайте о переезде на VPS сервер с обычного хоста. Это сразу решит множество проблем. В плане финансовых затрат практически никаких. На примере провайдера Мажордомо смотрим расценки — хост = 2400 за год, VPS = 3500 за год.
Минус в том, что считается якобы, что сервером гораздо сложнее в управлении и администрировании. Необходимо изучить данную тему, платные настройки стоят от 2000 рублей.
Изучите материал по теме, оплатите месяц и потренируйтесь, проведите так называемый тест. Загрузите пробный сайт, настройте, поработайте с сервером.
Со временем мы выпустим пошаговое руководство по настройке VPS сервера. А пока можете скачать бесплатные уроки и потренироваться на локальном сервере Денвер. Сумеете за пару часов запустить свой полноценный сайт на компе и полностью настроить. Этот опыт понадобиться Вам при администрировании VPS сервера, так что оформляйте подписку и получайте бесплатно уроки.
Совет:
Если Вам руками сложно справится с такими настройками, то попробуйте установить два плагина:
WP Super Ceshe
OptimizeDB
Выводы
Вначале статьи мы Вам показали скрин одного из наших тестовых сайтов до оптимизации.
А это уже после полной оптимизации.
Начали с 29 из 100 и довели до 100/100
Соответственно, чтобы не говорили, добиться высоких показателей скорости загрузки сайта в Google Page Speed Tools Insights можно и нужно. Вот наш сайт сайт до оптимизации:
До оптимизации
И после оптимизации скорости загрузки сайта.
После всех настроек
Все страницы ресурса настроены и имеют показатель 99 из 100. Если отключить Я.Метрику и Гугл аналитику, то будут все 100.
Обязательно настройте свой ресурс на высокие показатели. Параметр скорость загрузки сайта, очень сильно влияет на ранжирование в органической выдачи.
Обязательно ознакомьтесь с похожими записями
Понравился материал? Подписывайтесь на наш блог.
Скорость загрузки сайта является важнейшей составляющей позитивного user experience, а также одним из факторов ранжирования сайта в поисковой выдаче. Правда такова, что сегодня пользователи не хотят ждать загрузки страницы более 5 секунд. Если ваш сайт загружается недостаточно быстро, вы теряете потенциальных клиентов.
Учитывая то, что 50% онлайн-трафика приходит с мобильных устройств, пользователи ожидают почти мгновенной загрузки сайта и в мобильной версии. В этой статье вы узнаете, как набрать 100 из 100 с инструментом Google PageSpeed Insights для мобильной и десктопной версии вашего сайта.
Мотивация
При проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет – 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.
Значит ли это, что результат 100/100 недостижим?
Как заставить страницы загружаться быстрее
В первую очередь необходимо отметить, что инструмент PageSpeed – это всего лишь руководство для повышения качества веб-сайтов. Инструмент предоставляет рекомендации для оптимизации веб-сайта, которая способствует повышению скорости загрузки страниц, но достижение желаемого результата зависит от настроек сервера.
Некоторые из этих шагов требуют технической экспертизы, другие – нет. Этой инструкции можно следовать в любой Системе управления сайтом.
Шаг первый: Оптимизируйте изображения
Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:
· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.
· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.
Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.
Шаг второй: Сократите объем ресурсов CSS и JavaScript
Размер ресурса можно уменьшить, удалив ненужные байты, например, лишние пробелы, переносы строки и отступы. При создании кодов программисты часто оставляют свободные места и комментарии. Иногда, удалив их, можно уменьшить размеры файлов в два раза.
Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.
Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.
Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.
Шаг третий: Оптимизируйте время ответа сервера
Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.
CDN – это сеть серверов, разбросанных по всему миру, которые позволяют оптимизировать доставку и дистрибуцию контента (изображений, файлов CSS и JavaScript) конечным пользователям в сети Интернет. CDN хранит копии контента вашего веб-сайта на своих серверах. Когда пользователь заходит на ваш сайт, статичный контент загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.
Ниже представлена схема функционирования CDN c GTmetrix.
На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.
Шаг четвёртый: Используйте кеш браузера
Использование кеша браузера предполагает, что файлы с вашего веб-сайта – изображения, файлы CSS и JavaScript – загружаются с сервера всего один раз, и браузер сохраняет их на компьютере. В следующий раз при загрузке страниц все необходимые файлы «подтянутся» с компьютера пользователя.
Чтобы использовать кеш браузера, нужно создать файл.htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.
Шаг пятый: Удалите из верхней части страницы ресурсы, блокирующие отображение
Главной проблемой, с которой приходится столкнуться разработчикам в этом случае, является перемещение кода JavaScript из верхней и основной части страницы в нижнюю часть по всему веб-сайту.
Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.
Шаг шестой: Включите сжатие
Включить сжатие можно в настройках вашего сервера. Если вы сомневаетесь в своей компетенции в данном вопросе, попросить вашу техническую поддержку включить сжатие GZIP для вашего сервера.
Шаг седьмой: Оптимизируйте мобильную версию
Адаптивная версия мобильного сайта предполагает использование правильного разрешения изображений, параметров шрифта и хорошей навигационной системы.
Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».
Вывод:
Итак, четыре наиболее важных шага, которые необходимо предпринять, чтобы улучшить качество сайта:
1. Используйте CDN.
2. Используйте кеш браузера.
3. Удалите блокирующие отображение ресурсы из верхней части страницы.
4. Оптимизируйте размер изображений и сожмите их.
Скорость загрузки сайта является одним из важнейших показателей юзабильности ресурса, и что немаловажно, это один из сотни факторов ранжирования . Действительно, современный пользователь, который кликнул по ссылке, не ждет загрузку страницы более 5 секунд. Поэтому, чем дольше грузится ваш сайт, тем больше вы теряете потенциальных клиентов.
Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта "Monitor Backlinks".
Мотивация
Сайт-образец и так загружается довольно быстро, поэтому в данном случае будут улучшаться результаты до возможного максимума.
Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств - 59/100. Ситуация с версией для стационарных устройств была лучше - 92/100.
Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?
Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.
Стартовые показатели подопытного сайта - 87/100.
В итоге, после применения определенных манипуляций, было получено следующие результаты:
О том, как удалось достичь таких показателей, читайте далее.
Как ускорить загрузку страниц?
Прежде чем приступить к пошаговым действиям согласно инструкции, позвольте отметить, что инструмент PageSpeed является всего лишь ориентиром для веб-мастеров на пути оптимизации ресурса. К тому же инструмент содержит рекомендации по ускорению загрузки страниц вашего сайта, а достижение положительных результатов во многом зависит от настроек сервера.
Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).
Итак, приступим:
Шаг № 1: Оптимизация изображений
Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:
- Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
- Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.
Согласно вышеупомянутым правилам каждое изображение на сайте было загружено, а также вручную сжато и подогнано по размерам. А чтобы не заморачиваться с оптимизацией изображений после их загрузки на сайт, лучше выработайте привычку изначально оптимизировать все новые изображения, загружаемые на сервер. Каждое новое изображение должно быть сжато и подогнано до необходимых параметров.
PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.
Шаг № 2: Минимизация JavaScript, CSS и HTML
В примере, Google предлагает сократить объемы JavaScript и CSS файлов.
Процесс минимизации позволяет сократить объемы файлов, устраняя ненужные пробелы, переносы, строки, символы и комментарии в JavaScript и CSS файлах. Программисты часто оставляют много места и комментарии во время кодирования, что может удвоить объем JavaScript и CSS файлов.
Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.
Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.
Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.
Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.
Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите "Сократить HTML". Чтобы оптимизировать код кликните на "Просмотреть оптимизированное содержание".
Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:
Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.
Вот результаты, полученные после минимизации JavaScript и CSS:
Шаг № 3: Использование кэш браузера
Для многих веб-мастеров этап использования кэширования браузера является самым сложным.
Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).
CDN представляет собой сеть серверов, расположенных в различных местах по всему миру. Они кэшируют статические версии веб-сайтов, такие как изображения, файлы JavaScript и CSS. На серверах CDN хранятся копии содержимого сайта, а при заходе на этот сайт, статическое содержимое загружается с ближайшего сервера.
Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.
Вот визуализация того, как работает CDN:
На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.
После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:
Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.
Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.
Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.
Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.
В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.
А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.
Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.
Шаг № 4: Удаление блокирующих кодов
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать - это ревизия всего кода JavaScript начиная сверху от "header" и "body" до расположенного внизу "footer" на всех страницах сайта.
Если ваш сайт на платформе Wordpress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в
снимите отметку с "Force JavaScript" и установите ее на "Inline all CSS".Шаг № 5: Включение сжатия
Шаг № 6: Оптимизация мобильного формата
Анализ мобильного формата показывает адаптивность мобильной версии сайта под различные типы разрешения, использование подходящих шрифтов, и наличие хорошей навигационной системы.
С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите "Дополнительные инструменты → Инструменты разработчика". На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:
В случае примера, не потребовалось каких-либо радикальных изменений.
Вывод
В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта "Monitor Backlinks". В итоге была оптимизирована не только главная страница, но и все внутренние страницы.
Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:
- Использование CDN.
- Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
- Оптимизация размеров и сжатие изображений.
Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.
Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.
Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях.
Также не забывайте о том, что специалисты UAWEB всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!
Скорость страницы определяет общее время, необходимое для полной загрузки веб-сайта. При анализе сайта скорость загрузки может иметь решающее значение для SEO. Пользователи быстро покидают страницу, когда загрузка занимает слишком много времени, а поисковые системы игнорируют страницы с низкой производительностью.
Кроме полезности для SEO есть и другие причины для улучшения скорости страницы. Быстрые веб-сайты имеют бо́льшую конверсию, они намного удобнее для пользователя. Это может привлечь большее количество людей на ваш сайт и заставить их вернуться снова.
Исследования Google
Давайте рассмотрим некоторые недавние исследования: среднее время, затрачиваемое на загрузку мобильной целевой страницы, составляет 15 секунд. Учитывая, что в течение трех секунд посетители должны решить, хотят ли они оставаться на вашем сайте – это огромное расхождение.
Исходя из данных, представленных выше, мы видим, что вероятность ухода со страницы во многой степени зависит от времени ее загрузки:
- При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
- От 1 до 5 секунд до 90%
- От 1 до 10 секунд вероятность отказа уже 123%
- Не трудно догадаться, какое количество посетителей мы теряем.
Скорость страниц будет важным фактором для ранжирования
Еще в 2010 году Google заявил , что скорость страниц будет ранжирующим фактором, но это было ориентировано только для десктопной версии сайтов.
А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.
По заверению компании санкции грозят только страницам, загружающимся медленно и предоставляющим негативный пользовательский опыт.
Так же не стоит забывать, что скорость сайта – это один из многих факторов ранжирования. К примеру, если у вас хорошо оптимизирована страница по Google PageSpeed, но имеет малополезный неуникальный контент – то навряд ли она сможет занять достойные позиции в поисковиках.
- 1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
- 2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
- 3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
- 4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
- 5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.
Если вам понадобится помощь квалифицированного специалиста, вы всегда можете на бесплатный анализ и оценку стоимости работ.
В одной из следующих статей мы поговорим о том, что такое блокирующие скрипты и почему не всегда от них можно избавиться.
Скорость загрузки страниц сейчас очень весомый сигнал для поисковых систем. Да и для пользователей это значимый фактор, на который сложно не обратить внимание, если с ним проблемы. Улучшая скорость сайта можно не только получать плюсы в ранжировании, но и получать больше доверия и коэффициент конверсий. Ниже приведен список наиболее полезных инструментов, которые помогут провести анализ и выявить самые слабые места сайта в плане скорости.
1. Google PageSpeed Insights
Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.
2. Pingdom Tools
Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.
3. WhichLoadFaster
Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
4. Web Page Performance Test
Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США ).
5. GTmetrix
Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).
6. Load Impact
Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS ). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.
7. Monitis Tools
Анализирует загрузку сайта с разных участков Земли - серверы в США , Европе и Азии. Отображает сводную статистику по каждому тесту.
8. SiteSpeed.me
Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.
9. PR-CY
Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.
10. WebPage Analyzer
Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.
Если вы используете какие-то другие бесплатные онлайн-инструменты для проверки скорости загрузки страниц сайта, делитесь ими в комментариях.
