На сегодняшний день, скорость обработки запросов пользователя — важный параметр в работе любого сайта. Помимо прочего, все современные поисковики определяют позицию сайта в выдаче на основе его параметров, что может негативно или положительно сказаться на конверсии и просто посещении Вашего сайта. К нам обратился клиент, с просьбой об аудите, а также принятии мер о проведении комплексных работ по оптимизации сайта. Клиент занимается изготовлением дубликатов гос. номеров для транспортных средств и имеет несколько десятков тысяч посещений сайта в месяц.
Для проведения анализа сайта и устранения проблем, мы используем ресурс GTMetrix.com.
Показатели оптимизации сайта на момент принятия его в работу нашей командой, были следующие:
После анализа сайта, мы получили условные рекомендации, соблюдение которых позволило улучшить показатели загрузки сайта.
Давайте рассмотрим, какие действия повлияли на оптимизацию и скорость загрузки сайта госномер.рус в целом.
- Вес страницы — этот параметр напрямую влияет на скорость загрузки сайта, т.к. зависит в первую очередь от скорости интернет-соединения пользователя. Чем меньше вес страницы, тем быстрее загрузится страница. Чем дольше грузится страница, тем меньше шансов на то, что пользователь останется на вашем сайте;
- Кэширование — важный параметр, от которого зависит скорость повторного открытия сайта. Правильная настройка кэширования говорит браузеру проверить у себя в кэше файлы формата js, css, gif, png, и т.п., прежде чем они будут заново скачаны с сервера. Настройка кэширования, в некоторых случаях позволяет ускорить сайт несколько раз;
- Оптимизация изображений — этот подход позволяет уменьшить вес сайта, путём сжатия и оптимизации изображений, чем и увеличивает быстродействие и отзывчивость страниц. Стоит заметить, что оптимизация (сжатие) изображений изменяет качество изображения в худшую сторону, однако при правильном подходе данное ухудшение незаметно для большинства пользователей сайта;
- Минификация (minify) js,css,html – данный подход позволяет сэкономить около 10-20% от оригинального размера файла. Во время минификации удаляются лишние табы, переносы строк, пробельные символы, комментарии и т.д;
- Gzip — утилита сжатия и восстановления файлов, использующая алгоритм Deflate. Применяется в основном в UNIX-системах, в ряде которых является стандартом де-факто для сжатия данных. Gzip находит одинаковые строки в текстовом файле и временно их заменяет, тем самым уменьшая общий размер файла. Gzip сжатие особенно выгодно в сфере веб-технологий, так как HTML и CSS файлы используют множество повторяющихся строк и пробелов. В конечном итоге, gzip может сжать размер страницы и CSS стилей до 60-70%; ВАЖНО! Gzip ускорит работу сайта, но помимо этого и увеличит нагрузку на CPU. Перед активацией gzip нужно убедиться в рациональности его использования.
- Отложенная загрузка JS (async) — данный параметр позволяет отложить загрузку некоторых внешних JS скриптов на последок. Другими словами, сначала загружается DOM и скрипты, не помеченные async;
- Хостинг — немаловажным параметром является место, где размещен сайт. Главными параметрами можно считать uptime, который, в идеале должен быть 99%, а также и сами технические характеристики выбранного тарифа, будь то Shared-Hosting или VDS. Необходимые параметры хостинга выбираются на основе технических параметров вашего сайта;
- Оптимизация кода — один из значимых параметров. Если код сайта не оптимизирован и потребляет много ресурсов, то это первый признак того, что необходимо провести оптимизацию кода.
Оптимизация
В данном разделе мы пройдемся по наиболее интересной части выполненных работ.
Ну и конечно же перед выполнением всех работ, не забываем сделать backup всех изменяемых файлов.
Для пункта минификации может понадобиться Java >= 1.4
Настройка кэширования
Для использования кэширования нужно указать правило инвалидации. Другими словами, нужно сказать браузеру, через какое время нужно заново запросить файл с сервера.
Контексты location должны быть размещены в контексте server изменяемого виртуального хоста
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf|ico|woff)$ {
expires max;
try_files $uri $uri/ @fallback @php;
}
В данном случае, к файлам с форматом из регулярного выражения будет применено кэширование на максимально возможное время.
Также, время инвалидации можно указывать в днях:
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf|ico|woff)$ {
expires 3d;
}
В этом случае, будет применено кэширование на 3 дня.
Кроме этого, можно время инвалидации можно отсчитывать от последней модификации файла:
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf|ico|woff)$ {
expires modified 5d;
}
В этом случае браузер будет запрашивать файлы из диапазона через 5 дней после последней модификации.
Для отключения кэширования в браузере необходимо передать директиве expires параметр off.
location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf|ico|woff)$ {
expires off;
}
В этом случае кэширование файлов из диапазона будет отключено.
Настройка кэширования
Включение Gzip позволит ощутимо сократить объем данных, который получит посетитель сайта. Сжатие поддерживают все современные браузеры. Gzip ускорит работу сайта, но помимо этого и увеличит нагрузку на CPU. Перед активацией gzip нужно убедиться в рациональности его использования. nginx
Для включения gzip, в контексте server необходимо разместить следующие директивы:
gzip on;
gzip_comp_level 5;
gzip_disable "msie6";
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml
application/xml+rss text/javascript application/javascript;
В этом случае, мы включили gzip для MIME типов из gzip_types с уровнем компрессии 5 и отключили сжатие для IE 5 и 6 (не поддерживается gzip)
Для установки уровня сжатия используется директива gzip_comp_level. Уровень сжатия можно установить от 1 до 9. Чем выше уровень сжатия, тем эффективнее, но и в то же время медленнее, ко всему прочему может возрасти нагрузка на процессор.
Для отключения кэширования необходимо передать директиве gzip параметр off.
Список всех доступных директив (подробнее на официальном сайте nginx).
- gzip - Разрешает или запрещает сжатие ответа методом gzip
- gzip_buffers - Задает число и размер буферов, в которые будет сжиматься ответ. По умолчанию размер одного буфера равен размеру страницы. В зависимости от платформы это или 4K или 8K.
- gzip_comp_level - Устанавливает степень сжатия ответа методом gzip. Допустимые значения находятся в диапазоне от 1 до 9
- gzip_disable - Запрещает сжатие ответа методом gzip для запросов с полями заголовка “User-Agent”, совпадающими с заданными регулярными выражениями
- gzip_http_version - Устанавливает минимальную HTTP-версию запроса, необходимую для сжатия ответа
- gzip_min_length - Устанавливает минимальную длину ответа, который будет сжиматься методом gzip. Длина определяется только из поля “Content-Length” заголовка ответа
-
gzip_proxied - Разрешает или запрещает сжатие ответа методом gzip для проксированных запросов в зависимости от запроса и ответа. То, что запрос проксированный, определяется на основании наличия поля “Via” в заголовке запроса. В директиве можно указать одновременно несколько параметров:
- off - запрещает сжатие для всех проксированных запросов, игнорируя остальные параметры;
- expired - разрешает сжатие, если в заголовке ответа есть поле “Expires” со значением, запрещающим кэширование;
- no-cache - разрешает сжатие, если в заголовке ответа есть поле “Cache-Control” с параметром “no-cache”;
- no-store - разрешает сжатие, если в заголовке ответа есть поле “Cache-Control” с параметром “no-store”;
- private - разрешает сжатие, если в заголовке ответа есть поле “Cache-Control” с параметром “private”;
- no_last_modified - разрешает сжатие, если в заголовке ответа нет поля “Last-Modified”;
- no_etag - разрешает сжатие, если в заголовке ответа нет поля “ETag”;
- auth - разрешает сжатие, если в заголовке запроса есть поле “Authorization”;
- any - разрешает сжатие для всех проксированных запросов.
- gzip_types - Разрешает сжатие ответа методом gzip для указанных MIME-типов в дополнение к “text/html”. Специальное значение “*” соответствует любому MIME-типу (0.8.29). Ответы с типом “text/html” сжимаются всегда.
- gzip_vary - Разрешает или запрещает выдавать в ответе поле заголовка “Vary: Accept-Encoding”, если активны директивы gzip, gzip_static или gunzip.
Минификация
Минификация - это процесс, направленный на уменьшение размера исходного кода путём удаления ненужных символов без изменения его функциональности.Это позволяет сэкономить около 10-20% от оригинального размера файла. Во время минификации удаляются лишние табы, переносы строк, пробельные символы, комментарии и т.д;
Для минификации css, js, html и т.д можно использовать как онлайн-сервисы, так и скрипты.
Например, для минификации и css и js файлов в php, можно использовать javacompressor.
В этом случае необходимо заранее подготовить все js и css, которые необходимо сжать и выполнить следующий скрипт.
Для работы yuicompressor требуется Java >= 1.4.
';
$library = 'yui.jar';
$list = array();
function minify($dir)
{
$files = glob($dir, GLOB_NOSORT);
foreach ($files as $file) if (in_array(pathinfo($file, PATHINFO_EXTENSION),['css', 'js']))
{
echo $file . "\n";
exec('java -jar ' . $library . ' --charset utf-8 ' . $file . ' -o ' . (dirname($file) . '/min.' . basename($file)));
}
else if (is_dir($file))
{
minify( $file . '/*' );
}
}
minify($path . '/*');
В результате работы скрипта, в директорию, указанную в переменной $path будут добавлены сжатые копии файлов, с префиксом min.
Отложенное подключение JavaScript
Асинхронное подключение JavaScript снижает время загрузки страниц за счет отсутствия задержки.
Для управления отложенной загрузкой используются атрибуты defer и async.
async - разрешает браузеру загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы.
< script src="/app.js" async>< /script>
Атрибут async следует применять для скриптов, которые не оказывают значительного влияния на отображение документа. К ним можно отнести счетчики Google Analytics, Яндекс Метрика, кнопки социальных сетей и прочее.
defer - позволяет браузеру начать загрузку js-файлов параллельно, не останавливая дальнейшую обработку страницы, при этом браузер гарантирует последовательность на основе порядка подключения файлов.
< script src="/app.js" defer>< /script>
Атрибут defer следует применять при подключении нескольких JS файлов, при условии что один скрипт зависит от другого и важна последовательность их выполнения.
Заключение
В комплексе эти меры дают прирост к скорости загрузки сайта путем уменьшения веса страницы и правильного Cache-Control. Необходимо заметить, что настройки применяются индивидуально и могут наоборот, привнести негативный эффект.
На момент условного завершения работ по оптимизации сайта госномер.рус, мы имели следующую картину:
Исходя из полученных срезов, можно утверждать, что комплекс принятых мер по оптимизации сайта позволил повысить рейтинг PageSpeed Score на 29% и YSlow Score на 18%, а показатели Page Details говорят о том, что вес страницы сократился, количество запросов упало до 120 и общая скорость загрузки сайта стала наполовину быстрее.
Вы наверное можете заметить что результаты PageSpeed Score и YSlow Score не дотягивают до оценки А, и этому есть объяснение. В сайте используется довольно старый фреймворк Laravel 5.1, и дальнейшая оптимизация требует значительной переработки части кода, что существенно увеличивает затраты. Учитывая, что клиенту мы уже делаем новый сайт, то данный уровень оптимизации полностью устроил клиента.