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


15-08-2018
Денис Л.
Оптимизация сайта
10

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

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

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

Предварительно есть смысл загрузить Ваш сайт в браузере, открыть отладчик (F12), перейти на вкладку Network, поставить галочку "Disable cache", обновить страницу, а затем записать количество запросов, а также общее время загрузки сайта. По итогам работ Вы сможете сравнить результат.

Перед началом работ сделайте полную резервную копию сайта и базы данных сайта. Часть работ требует знаний и опыта. Если Вы новичок и не уверены в своих силах - Вы делаете всё на свой страх и риск!

Итак, как ускорить загрузку сайта:

Для начала посмотрим главные рекомендации от Google PageSpeed Insights.

Для этого заходим в браузере по адресу: developers.google.com/speed/pagespeed/insights/

Вводим адрес тестируемого сайта, нажимаем "Анализировать".

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

Среди рекомендаций наверняка будет рекомендация про включение GZIP сжатия на сервере. Для этого в файл .htaccess вставляем следующие строки:


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

Если среди рекомендаций есть рекомендация про кэширование ("Используйте кэш браузера"), в файл .htaccess вставляем следующие строки:


<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=864000"
</FilesMatch>

В данном примере мы заставляем браузер кэшировать файлы расширений flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf на 10 дней (864000 секунд).

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

Есть варианты автоматические (через Nodejs + gulp + плагины конкатенации и минимизации). Эта тема заслуживает отдельной статьи (обязательно напишу её позже). Сейчас же рассмотрим простой вариант и сделаем всё вручную.

  • Ищем все файлы стилей, на которые идут ссылки из области <head>
  • Копируем все стили в один файл. Далее заходим на сайт проверки css: autoprefixer.github.io/ru/ Данный сайт найдёт ошибки в наших стилях (если они есть), а также адаптирует стили ко всем браузерам (добавит нужные вендорные префиксы и удалит ненужные).
  • Далее заходим на сайт минимизации css: rudrastyh.com/tools/css-minifier
  • Ставим галочку, чтобы один стиль был на одну строчку.
  • Копируем получившиеся стили и сохраняем в нашем файле, предварительно удалив старые стили (!).

Если у Вас CMS, например Wordpress, то часть стилей вызывается плагинами. И после объединения стилей, они будут по-прежнему вызываться в коде сайта. Таким образом, предварительно Вам нужно будет принять решение: если Вы хотите ускорять сайт и объединять стили в один файл, то Вам придётся отключить автообновление системы Wordpress и плагинов, поскольку если Вы этого не сделаете, то после обновления любого плагина, стили снова попадут в область head. Если всё же решились - то заходим в папку с плагинами /wp-content/plugins/, копируем её себе на компьютер и через текстовый редактор с помощью поиска в файлах, ищем строку вызова стилей, а именно wp_enqueue_style. Закомментируйте эту строчку (поставьте два косых слеша // перед началом строки). Обновите страницу, посмотрите её код. Вы должны увидеть, что стилей стало меньше на 1. Сделайте так для всех плагинов, стили которых находятся в области head.

Вы можете пойти ещё дальше и сделать для главной страницы только те стили, которые используются только на ней. Для этой задачи есть прекрасный сервис: uncss-online.com. Он анализирует Вашу страницу и выдаёт Вам только те стили, которые используется именно на данной странице. Обратите внимание, что если у Вас есть всплывающие формы обратной связи, интерактивные элементы меню, то данные стили Вам потом нужно будет скопировать вручную. Чтобы использовать получившиеся стили, Вам нужно будет написать в области head условие: если мы на главной странице, то загружаем только файл стилей главной страницы, во всех остальных случаях - загружаем общий файл стилей. Пример функции для сайта на php:

<?if($_SERVER['REQUEST_URI']=='/'):?>
    <link rel="stylesheet" href="style_home.css">
<?else:?>
    <link rel="stylesheet" href="style.css">
<?endif?>

Проверяем, есть ли в области <head> скрипты. Если есть - переносим их в футер. Скрипты блокируют загрузку сайта и все они должны располагаться в подвале сайта. Последовательность загрузки скриптов оставляем прежней. Затем присваиваем каждому скрипту атрибут defer, без какого либо значения. Тогда скрипты с данным атрибутом будут загружаться асинхронно, но именно в той последовательности, в которой они указаны в разметке. Если у вас есть Яндекс.Метрика, то проверяем, указана ли асинхронная загрузка в настройках Метрики (s.async = true;). Если нет - меняем код Метрики, с указанием асинхронной загрузки.

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

Если у Вас CMS, например Wordpress, то часть скриптов вызывается плагинами. Причём, есть общая функция, которая задаёт атрибуты всем скриптам CMS и плагинов. Это функция print_extra_script, которая находится в файле /wp-includes/class.wp-scripts.php. Ищем в функции ту строку, где определяется переменная $tag. Удаляем там часть кода type='text/javascript' (атрибут 'type' уже давно не нужен ни для одного браузера) и вставляем атрибут defer. Без каких-либо значений. После этого, все скрипты станут асинхронными.

Если у нас на главной странице сайта много изображений (например карусели с логотипами партнёров и клиентов или много картинок с примерами выполненных работ и прочие), то есть отличный вариант оптимизации: меняем алгоритм загрузки всех картинок карусели. Ищем файл шаблона, который выводит эти картинки. У изображения меняем атрибут src на атрибут data-src. А в атрибут src вписываем путь на заранее подготовленную картинку такого же размера, что и у нас, но размером в несколько байт. Для этого сначала смотрим размер картинки, который у нас стоит на сайте: открываем отладчик браузера (F12), наводим мышь на изображение в коде и отладчик показывает нам используемый размер (нас интересует не исходный размер, а используемый, он будет меньше). Далее в программе Photosop или любом другом графическом редакторе создаём новое пустое изображение нужного размера, например 300х400. Сохраняем его для Web, в самом минимальном качестве. Если сохраняем в формате png, то выбираем формат 8-bit. Итого, изображение получится менее 1 Кб. И у всех картинок карусели ставим ссылку на это изображение. А в наших скриптах пишем код javascript, который после загрузки DOM будет брать содержимое атрибута data-src и заменять им src у каждой картинки нашей карусели. Таким образом, изначальный вес сайта снизится значительно. Например, на проекте, где много таких изображений, вес сайта может снизиться на 1 Мб и более. Т.е. изначально будут загружаться картинки с белым фоном, а в процессе построения сайта они будут заменяться на реальные картинки. При этом, сайт не будет визуально "прыгать", т.к. размер минимизированной картинки и реальной картинки одинаковы.

Вот код, который будет менять атрибут data-src на src после загрузки страницы:

Вариант 1 (если у Вас на сайте стоит библиотека jQuery)


<script>
function changeDataSrcToSrc(i,e) {
    e.src = $(e).data('src');
}

window.addEventListener("load", function() {
    $('[data-src]').each(changeDataSrcToSrc);
});
</script>

Вариант 2. Если библиотеку jQuery Вы не используете (и правильно делаете)


<script>
window.addEventListener("load", function() {
    document.querySelectorAll('[data-src]').forEach(function(i) {
        let src = i.getAttribute('data-src');
        i.setAttribute('src', src);
    })
});
</script>

Если в рекомендация от Google PageSpeed Insights есть информация про большое время ответа сервера (более 300-500 мс), тогда Вам необходимо обратиться к Вашему хостинг-провайдеру с просьбой разобраться с данной проблемой. Нормальным временем ответа сервера считается всемя в пределах 150 - 200 мс. Возможно, специалисты Вашего хостинга пойдут Вам навстречу и скорректируют настройки сервера для более быстрого ответа. Если нет - они могут предложить Вам другой тарифный план или выделенный сервер (который является самым быстрым решением для любого высоконагруженного сайта).

Уберите с сайта лишние картинки. К примеру, в шапке сайта у Вас есть слайдер. Наверняка это классический слайдер, на всю ширину экрана, с большими картинками в высоком качестве. Подумайте, насколько Вам важны все картинки данного слайдера? Если у Вас стоит на сайте Яндекс.Метрика, включите в настройках Вебвизор и понаблюдайте в течении недели за стандартным поведением Ваших пользователей. Вероятнее всего Вы увидите, что слайдером пользуется один пользователь из 20-ти, а может и ещё меньше. При этом, вес слайдера со всеми его супер-важными (на Ваш взгляд) картинками приближается к 1 Мб или даже более. Может стоит оставить там всего одну картинку? Или вообще выключить слайдер + удалить скрипт, который его загружает? И оставить одну единственную, максимально оптимизированную картинку, слоганы на которой будут меняться с помощью javascript (Как это сделать расскажу в ближайших постах). Вы удивитесь, насколько быстрее станет загружаться Ваш сайт!

Замените все иконки, сделанные в виде графических файлов на иконочный шрифт. Есть отличный сервис: fontastic.me. Он позволяет сделать индивидуальный набор шрифтов для Вашего сайта, в который Вы сможете включить только те иконки, которые Вам действительно нужны. Там есть иконки стрелок, социальных сетей, ... и всего, чего угодно. Ваш персональный набор иконок будет весить не более 15-20 Кб. При этом, на загрузку всех их потребуется только 1 запрос к серверу. Кроме этого, Вы сможете управлять данными иконками: задавать им любой размер, тень, цвет, при этом, в отличие от картинок, шрифт будет идеального качества в любом возможном размере.

По итогам работ стоит проанализировать результат: открываем отладчик (F12), переходим на вкладку Network, обновляем страницу и смотрим на сколько снизилось количество запросов и время загрузки.

В данном посте я привёл лишь некоторые, самые базовые принципы оптимизации. Применив их все, Ваш сайт будет загружаться за доли секунды. Ещё есть много других методов оптимизации контента, но об этом я расскажу как-нибудь в других постах...

Читайте также:

Google PageSpeed Insights: автоматическая оптимизация изображений сайта

Автоматическая адаптация iframe на сайте