Увеличение скорости загрузки сайта - задача любого уважающего себя веб-разработчика. Какой бы красивый и современный не был Ваш сайт, если он долго грузится - это сводит на нет все труды по его красоте оформления и функциональности. А если Ваш сайт не загружается более 5-ти секунд - то большинство пользователей просто закроют его и перейдут к другому.
Способов оптимизации скорости загрузки много. Есть автоматические, ручные и комбинированные. Мы рассмотрим базовые принципы, подходящие для любого сайта и любой системы управления.
Предварительно есть смысл загрузить Ваш сайт в браузере, открыть отладчик (F12), перейти на вкладку Network, поставить галочку "Disable cache", обновить страницу, а затем записать количество запросов, а также общее время загрузки сайта. По итогам работ Вы сможете сравнить результат.
Перед началом работ сделайте полную резервную копию сайта и базы данных сайта. Часть работ требует знаний и опыта. Если Вы новичок и не уверены в своих силах - Вы делаете всё на свой страх и риск!
Итак, как ускорить загрузку сайта:
❶Для начала посмотрим главные рекомендации от Google PageSpeed Insights.
Для этого заходим в браузере по адресу: developers.google.com/speed/pagespeed/insights/
Вводим адрес тестируемого сайта, нажимаем "Анализировать".
Среди списка рекомендаций, часто в первых пунктах, есть пункт про оптимизацию изображений. Как заменить все изображения автоматически, особенно если их много, написано в моей записи про оптимизацию изображений с помощью Node.js.
❷Среди рекомендаций наверняка будет рекомендация про включение 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 + плагины конкатенации и минимизации), полуавтоматические и ручные. Про то, как сделать всё с помощью Gulp и Node.js читайте здесь. Сейчас же рассмотрим простой вариант и сделаем всё вручную.
- Ищем все файлы стилей, на которые идут ссылки из области <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, обновляем страницу и смотрим на сколько снизилось количество запросов и время загрузки.
В данном посте я привёл лишь некоторые, самые базовые принципы оптимизации. Применив их все, Ваш сайт будет загружаться за доли секунды. Ещё есть много других методов оптимизации контента, но об этом я расскажу как-нибудь в других постах...
Подписывайтесь на группу в ВКонтакте, вступайте в сообщество на Facebook, чтобы всегда быть в курсе актуальных выпусков
Web development blog!