Авторизация:
Имя:

Пароль:

Поиск по сайту:

Помощник Blogger -а: Создание и настройка блога на платформе Blogger (Blogspot) и его продвижение. Подробные инструкции и описание работы с Блоггером

Последнее на сайте:

Подписка на новости

Введите Ваш email:


Разделы:

рейтинг статьи: 5/5; голосов: 4; комментариев: 0

Главная > Создание сайта > Что измеряет Google PageSpeed Insights и стоит ли гнаться за баллами

03.12.2017

Как я увеличивал скорость загрузки своего сайта

Здравствуйте дорогие читатели. Сегодня расскажу, как ускорить загрузку сайта на своем личном примере, выделю основные этапы и способы их оптимизации. Представлю практическую реализацию, то есть исходный код и как его я применял, чтобы достичь хороших результатов по Google SpeedPage Insights. Для замера скорости пользовался ранее упомянутой утилитой от Гугл и GTMatrix, о которых писал в обзоре, что такое скорость загрузки сайта, как ее измерить. Потому что, первая более русифицирована, более адаптированная для неискушенных пользователей. Вторая – дает расширенный отчет, и рекомендации с показом истинного времени загрузки сайта. По ней можно определить, какой именно процесс тормозит загрузку, размеры загружаемого контента и многое другое.

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

Проведя оптимизацию кода по этим пунктам, я смог ускорить загрузку сайта с 10 до 2 секунд и получить 95 баллов из 100 по PageSpeed от Гугла. А теперь о них подробнее.

Как ускорить загрузку сайта

Минимизация графических изображений

Уменьшение их в размерах без потери качества. К ним относятся все без исключения картинки (иконки, фоны, заливки, значки и т.д.). Пренебрегать ничем нельзя. На такие файлы обратит внимание PageSpeed. Для этих целей использовал программу IrfanView. Она удаляет весь системный мусор и облегчает их вес на 50% и более. Имеет широкие возможности по настройки сжатия без потери качества. Работает со всеми графическими файлами. Единственным недостатком – англоязычный интерфейс. Сразу хочу отметить, что этой программой пользовался только для минимизации графики, но у нее есть и другие функции, которые не касаются темы обзора, поэтому о них говорить не буду.

результат минификации картинок

Рекомендую ее, кому не нужны навороченные редакторы. В ней все очень просто, работа выполняется в несколько кликов: выбрал файлы, указал конечную папку для сжатых фалов и нажал кнопку запуска. Настройка производится всего лишь один раз.

Рекомендация! Для увеличения скорости загрузки сайта нужно добавлять на страницу картинку заданного размера, желательно небольшого. Для своих графических изображений выбрал стандарт в 600 пикселей по ширине. Если есть необходимость показать пользователям изображение большого размера, то рекомендуется делать две версии этого файла. Одна уменьшенного размера, для непосредственного размещения на странице. Делаем ее кликабельной, со ссылкой на картинки большего размера. Это позволит загружать большой файл отдельно от всей страницы. То есть, первоначально сайт будет грузиться с маленькими картинками, а чем меньше размер, тем скорость загрузки сайта будет больше. Если одна из картинок заинтересует посетителя, он нажмет на нее и посмотрит в полноразмерном варианте.

К оглавлению

Минификация CSS и JavaScript

Сразу хочу сказать, я не силен в скриптах, знаю, что есть специальные программы, которые ужимают их до минимального размера. Так и нужно делать. Меньше размер – меньше байт тратиться на передачу файла. Скажу сразу, я этого не делал. Логический вопрос: «Почему»? Потому что, я использую уже минифицированные java-скрипты от разработчиков. Но озвучу одну из популярных и простых программ.

Для сжатия java пользуются программой YUI компрессор. Это консольная программа. Нужно написать такую команду:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

где:

  1. myfile.js – это файл, который нужно урезать
  2. myfile-min.js – это конечный файл

Таким же образом можно ужать и CSS. Вместо файлов с расширением .js указываем файлы .css. Внешний вид команды, не измениться. Я не доверяю автоматическим средствам сжатия файлов стилей, поэтому все делал руками. Процесс сжимания, сокращения css, заключается в том, чтобы удалить из кода:

  1. Пробелы
  2. Переносы строк
  3. Комментарии

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

В результате размер файла сокращался на 15-20%. Эти несколько сэкономленных байт давали возможность ускорить загрузку сайта на несколько миллисекунд.

К оглавлению

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

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

Для кэширования применяются два модулю mod_expires и mod_headers. Теоретически эти два модуля выполняют одну и туже задачу: указывают клиенту, на какой период времени сохранять указанные файлы в кэше браузера или отключить его вообще. В последнем случае, браузер постоянно будет посылать запросы к серверу.

Первым делом проверяем, установлены эти модули у вас на сервере, где хранится сайт. Для этого создадим файл phpinfo.php и вставим в него вот такой код:

<?php phpinfo(); ?>

Сохраним его в корневом каталоге проекта. Запустим этот файл, написав в строке браузера адрес «http://мой сайт/phpinfo.php». В моем случае писал вот так: http://1st-finstep.ru/phpinfo.php. В ответ хостинг выдаст список подключенных модулей:

Подключенные модули на веб-сервере хостинга

Как видно со скриншота, эти два модуля загружены на моем сервере. Разница между mod_expires и mod_headers не значительная, в том и другом случае устанавливается максимальный срок жизни файла в кэше браузера. В зависимости от того, какой модуль установлен на сервере, тот и будем настраивать.

Пример кода установки кэширования для статических файлов в htaccess для модуля mod_expires:

<IfModule mod_expires.c>
ExpiresActive On #активация модуля
ExpiresDefault "access plus 7 days"#установка времени устаревания файла в размере 7 дней
#установка кэширования для картинок в формате .gif на один месяц
ExpiresByType image/gif "access plus 1 months"
#установка кэша для файлов x-icon, png, jpeg, флеш сроком на 1 месяц (указано в секундах)
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
#кэширование файла стилей .css, javascript на 1 неделю
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>

Описание:

  1. <IfModule mod_expires.c> - проверяем, установлен ли модуль на серваке. Если этого не сделать, а модуля нет, могут возникнуть ошибки исполнения файла htaccess, не будет грузиться сайт
  2. Если модуль mod_expires присутствует, то активируем его
  3. ExpiresDefault – установка срока кэширования по умолчанию для всех файлов, находящихся на сервере
  4. Далее указываем срок кэширования для конкретных типов файлов. Если этого не сделать, то будет действовать время по умолчанию

Важно! Дату expire можно указывать, как в секундах, так и явно (months – месяц, days – день, weeks - неделя).

Код для модуля mod_headers

<ifModule mod_headers.c>
#кэшировать html и htm файлы на один день
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
#кэшировать css, javascript и текстовые файлы на одну неделю
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
#кэшировать флэш и изображения на месяц
<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
#отключить кэширование
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

Важно! Настройка кэширования происходит только для тех файлов, которые хранятся у хостера, где и сам сайт.

Вы настроили htaccess, проверили страницу в Google PageSpeed, а он все равно выдает предупреждение вот такого плана и что делать?

Проблема с кэшированием сторонних файлов

Снова проверяете настройку кэширования статики в .htaccess – все верно сделано, а указанный ЯваСкрипт кэшируется только на 2 часа, а этого мало. Что делать и как увеличить это время? Для этого нужно скачать его и сохранить у себя на сервере, чтобы установленные правила распространялись на них. Для автоматизации этого действия нужно создать файл, например downloadjs.php и в него поместить вот такой код:

  1. <?php
  2. function downloadJs($file_url, $save_to)
  3. {
  4. $content = file_get_contents($file_url);
  5. file_put_contents($save_to, $content);
  6. }
  7. // Указываем URL, затем папку от корня сайта и имя файла с расширением.
  8. // Проверьте, чтобы на папке были права на запись 777/755
  9. downloadJs('https://cdn.sendpulse.com/img/push/icon-ring.svg', realpath("./js") . '/icon-ring.svg');
  10. downloadJs('http://api.pinterest.com/v1/urls/count.json', realpath("./js") . '/count.json');
  11. downloadJs('http://w.uptolike.com/widgets/v1/widgetsModule.js?v=7ee6aca0f1d9b4e3679000fb3c4403a3', realpath("./js") . '/widgetsModule.js');
  12. downloadJs('http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', realpath("./js") . '/adsbygoogle.js');
  13. downloadJs('http://www.google.com/jsapi', realpath("./js") . '/jsapi');
  14. downloadJs('https://mc.yandex.ru/metrika/watch.js', realpath("./js") . '/watch.js');
  15. downloadJs('https://www.google-analytics.com/analytics.js', realpath("./js") . '/analytics.js');
  16. ?>

Создаем в корневом каталоге сайта папку «/js». Устанавливаем права на запись в эту папку. Рассмотрим код downloadjs.php. В этом коде используется функция, которая скачивает нужный файл и сохраняет его в конечной папке «/js» и с определенным именем.

Как правильно скачивать внешние скрипты для кэширования на своем сервере

Например. В девятой строке скачиваем файл icon-ring.svg и сохраняем его в папке /js с таким же названием и расширением, то есть icon-ring.svg (как показано на скрине сверху). После этого, ищем в коде своего сайта ссылку https://cdn.sendpulse.com/img/push/icon-ring.svg и заменяем ее на http://ваш сайт/js/ icon-ring.svg. Таким образом, поступаем с другими ссылками, указанными в отчете PageSpeed. Помещаем исполнительный файл downloadjs.php в корень каталога и запускаем его. Для это в адресной строке браузера пишем адрес: http://ваш сайт/ downloadjs.php.

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

Данный способ был найден на странице , за что автору большое спасибо.

Со временем эти файлы могут устареть, или создатели этих скриптов внесут определенные изменения для улучшения их работы, а так как они хранятся на вашем сервере, значит, обновления они не получат. Чтобы этого избежать, нужно настроить проверку обновлений и закачивать их по расписанию, то есть, запуск по расписанию файла downloadjs.php. Для этих целей воспользуемся сервисом CronTab. Мой хостер beget предлагает им воспользоваться абсолютно бесплатно. Переходим на вкладку Крона и создаем задание.

Каждый провайдер предлагает свой интерфейс крона, приведу пример созданного задания в CronTab от Бигет для запуска файла downloadjs.php. Вы можете сделать это по аналогии.

Настройка расписания выполнения задания в CronTab от Beget

где:

  1. Указываем тип задания. В нашем случае выполнение PHP-скрипта
  2. Задаем путь к нашему файлу downloadjs.php
  3. В этой строке пишем краткое описание задания

Ниже Указываем дату, и время когда будет выполняться задание. В моем случае каждую 59 минуту, в 23 часа, то есть, запуска производиться в конце каждого дня.

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

К оглавлению

Настраиваем сжатие файлов на стороне сервака

Выше мы научились минифицировать CSS, javascript и картинки для уменьшения их размеров. Это физическое уменьшение размера, а сейчас научимся сжимать эти файлы средствами сервера, для передачи их клиенту в ужатом состоянии. Это тоже дает прибавку в скорости загрузки сайта.

Существует два модуля, которые отвечают за сжатие – это gzip и zlib. Первый модуль – более старый алгоритм, второй  - его современный аналог. Поэтому, некоторые хостеры отказываются от использования первого в пользу второго, так как он использует более прогрессивные алгоритмы. Первым делом нужно проверить, какой способ реализован у хостера. Для этого нужно узнать конфигурацию сервера, запускаем файл phpinfo.php (о котором говорилось выше).

Настройка сжатия zlib на сервере Beget

Как видно, zlib сжатие установлено. По умолчанию оно было деактивировано, поэтому пришлось включить его и установить степень сжатия 9 (максимальная). Для этого в настройках веб-сервера ввел команды:

  1. zlib.output_compression = 1 – включение zlib-компрессии
  2. zlib.output_compression_level = 9 – установка максимальной степени сжатия

Следующий этап – настройка сжатия в .htaccess, для этого копируем код и вставляем его к себе:

#код для gzip-модуля
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|png)$
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.*
</IfModule>

# код для deflate - модуля
<ifModule mod_deflate.c>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE
</IfModule>

Применяйте код для того модуля, который у вас установлен. Результат показан на скрине внизу. Файл ajax.js ужат до 339 байт с 862 и скорость – 13 миллисекунд.

Результат сжатия модулем zlib deflate скрипта

К оглавлению

Удаляем элементы, которые блокируют отображения верхней части страницы

Браузер начинает рендеринг страницы сверху. Он читает код установленный в <head></head>, затем перемещается вниз к основному разделу (текст, картинки). Если в head будет находиться команда для загрузки внешних файлов (скриптов, файлов стилей), то прорисовка страницы остановится, пока не будут они загружены. Вот именно от таких команд нужно избавиться, чтобы ускорить загрузку сайта.

Для java-скриптов рекомендуется установить асинхронную загрузку, браузер будет параллельно прорисовывать страничку и грузить файлы скриптов. Для этого в код подгрузки вставим оператор «async», полностью команда будет выгладить вот так:

<script async src="js/adsbygoogle.js"></script>

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

  1. Размещение кода подгрузки стилевых файлов в конце, после </body>. Тем самым браузер сначала загрузит весь контент, а потом CSS-файлы, не приостанавливая своей работы. В этом случае, можно получить эффект пустой страницы или «поломанного» дизайна

  2. Заставить грузить эти файлы асинхронно при помощи загрузчика loadCSS.

Нам ненужно, чтобы пользователь видел поломанный шаблон страницы. Это может его сразу отпугнуть от просмотра всего контента. Поэтому сделаем асинхронную загрузку файлов CSS. Для этого копируем этот код и вставляем в свой шаблон в поле <head></head>:

<script>
function loadCSS( href, before, media ){
"use strict";
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var sheets = window.document.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
function toggleMedia(){
var defined;
for( var i = 0; i < sheets.length; i++ ){
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
defined = true;}}
if( defined ){
ss.media = media || "all";}
else {
setTimeout( toggleMedia );}}
toggleMedia();
return ss;}
</script>
<script>
loadCSS( "css/main.css" );
</script>

Здесь определяем функцию loadCSS и запускаем ее с указанием пути к вашему файлу стилей «css/main.css».

Заметьте, что если ява-код размещать между <script></script>, то блокировки отображения первого экрана не происходит, поэтому и загрузка через loadCSS происходит без остановки прорисовки.

Избавившись от блокирующих элементов, мы получаем новое предупреждение от Google PageSpeed о необходимости настройки видимого контента.

К оглавлению

Что такое видимый контент страницы. Критический CSS

Критический CSS – это тот минимальный набор стилей, которого будет достаточно для полноценного рендеринга видимой части страницы. Той части, которую первой увидит пользователь после полной выгрузки.

Существует много способов создания критического набора стилей. Можно его выбирать из своего файла css руками, а если он большого размера и вы не знаете, что нужно для отображения видимой части, то на помощь придет онлайн-сервис.

Переходим по адресу: . Этот сервис предлагает создание критического CSS в три клика.

Сервис создания критического CSS critical path css generator

  1. Вводим адрес своего сайта
  2. Копируем весь код из своего CSS-файла и вставляем его в поле «Full CSS»
  3. Нажимаем кнопку «Create Critical Path CSS»

В результате сервис выдаст в новом окне (с правой стороны) готовый критический код, который достаточно будет вставить в секцию <head>...</head>, обернув его в тег <style>...</style>.

Рекомендация. Как видите, в готовом коде много лишних пробелов и переводов строк. Это все может увеличить размер вашего html-файла. Чтобы избежать этого, можно удалить пробелы и переносы, в таком виде стили будут все равно работать, а их размер сократиться в два раза. Мы создали критический CSS для видимой части страницы, теперь можно загонять ее в Гугл PageSpeed. Результатом будут хорошие баллы в оценки скорости загрузки сайта и исчезнут критические замечания.

К оглавлению

Заключение

После оптимизации смог добиться 95 из 100 баллов по Гуглу и менее 2 секунд на загрузку станицы сайта.

Результаты ускорения загрузки сайта после его оптимизации по GTMatrix

Кроме этого, количество запросов к веб-серверу уменьшилось до 79. Конечно остались еще некоторые замечания, которые периодически появляются, но исправить их уже я не могу, например, «Сократить время отклика сервера». На этот параметр повлиять не могу, спасибо виртуальному хостингу от Beget.

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

Всем удачи!!!

 

Статьи по теме:

187

Оцените статью:

1 2 3 4 5
рейтинг: 5/5; голосов: 4

Зарегистрируйтесь или войдите под своим именем чтобы оставить комментарий