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

Что такое скорость загрузки (Page Speed)?

Скорость загрузки сайта - комплексное понятие, которое состоит из нескольких параметров.

1. Скорость отдачи данных сервером - это время, которое нужно всем процессам, происходящим на сервере при подготовке страницы. Например, для динамического сайта на PHP скорость отдачи данных сервером состоит из:

• чтения исходных файлов страницы с диска;
• обработки файлов движком PHP;
• запросов к базе данных и интерпретации;
• структурирования полученных данных и их компоновка в HTML-коде страницы.

2. Скорость передачи данных страницы через сеть Интернет - время, зависящее от:

• размеров данных страницы (HTML-код + CSS + JavaScript-скрипты + изображения);
• пропускной способности интернет-каналов у хостинга и конечного пользователя.

3. Скорость отображения страницы - время, необходимое браузеру, чтобы “отрисовать” страницу. Для сложных динамических сайтов может занимать время, если используется большое количество скриптов на языке JavaScript.

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

1. Удобство пользователя
Если загрузку страницы приходится ждать более 3 секунд, то часть посетителей  уйдет искать информацию на другие сайты.

2. Позиции в поисковых системах
Скорость загрузки - важный фактор для ранжирования. Медленному сайту сложно занять высокие позиции в поисковых системах. 

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

Сервис Google Page Speed Insights

Поисковая система Google разработала бесплатный сервис PageSpeed Insights  (сокращенно GPSI) для измерения скорости загрузки сайтов.

Google PageSpeed Insights имитирует работу браузера и отслеживает время отработки всех этапов: 

• получения информации при загрузке страницы; 
• отрисовки контента; 
• отработки стилей CSS и скриптов JavaScript. 

Чтобы воспользоваться сервисом, вставьте адрес проверяемой страницы и нажмите “Анализировать”.  Итогом анализа будет количество набранных баллов, которые Google использует для оценки скорости загрузки страницы.

Красная зона - стоит оптимизировать скорость страницы.

Оранжевая зона - результат приемлем, но все-таки есть над чем поработать. 

Зеленая зона - все в порядке, страница загружается в браузере быстро.

Также PageSpeed Insights показывает, что мешает быстрой загрузке страницы, сколько времени тратится на ту или иную стадию загрузки.

Показатели  GPSI

“Время загрузки первого контента”. Промежуток с момента открытия страницы и начала загрузки до появления первого текста или картинки.

“Индекс скорости загрузки”. Показатель скорости загрузки содержимого сайта до того момента, когда страница перестает изменяться визуально, то есть за какое время пользователь увидит контент таким, каким он должен быть.

“Время загрузки для взаимодействия”. Параметр показывает, сколько секунд нужно подождать пользователю прежде, чем он сможет переходить по ссылкам или скроллить страницу. 

“Отрисовка крупного контента”. Это время, когда большой видимый элемент кода отрисован на экране (чаще всего изображение или заголовок страницы).

“Общее время блокировки”.  В этот период на сайте невозможно ничего делать. Он загружается, а посетитель ожидает.

“Совокупный сдвиг макета”. Этот индикатор отмечает любой сдвиг на странице, который происходит во время загрузки. Отслеживается момент, когда посетитель зашел на страницу и начал читать контент, а тот вдруг “перескочил” вниз экрана, потому что наверху страницы подгрузилась реклама или картинка и сдвинула содержимое страницы вниз. Чем больше сдвиг, тем выше индикатор и хуже показатель. Это зависит от верстки и работы скриптов сайта, а не от оптимизации скорости загрузки.

Рекомендации GPSI

Сервис GSPI также содержит инструкции по оптимизации скорости страницы. 

Например, на скриншоте видны советы сервиса:

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

 Эти и другие рекомендации подробно рассмотрены ниже в инструкции.

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

Рейтинг сайта PageSpeed Insight стал индустриальным стандартом, и под понятием “скорость загрузки сайта” вебмастера и SEO-специалисты чаще всего имеют в виду именно его.

Другие сервисы проверки 

Для оценки скорости загрузки сайта используйте другие сервисы, например, от be1.ru. 

Установите плагин Firebug для браузера Firefox и также увидите время, потраченное на загрузку сайта.

Как ускорить загрузку сайта без вреда для его работы?

Подход к оптимизации и улучшению скорости загрузки сайта обязан быть комплексным. Исправление только одного параметра не приведет к успеху. 

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

1. Улучшите работу сервера

Скорость подготовки страниц сайта на сервере зависит от характеристик оборудования хостинг-провайдера. Рекомендуем:

1. Выбрать тарифный план с SSD-диском, так как он имеет преимущество перед традиционными жесткими дисками. 
2. Для виртуального сервера VDS важно выбрать тарифный план с достаточным количеством оперативной памяти RAM на сервере, если предполагается размещение нагруженного динамического сайта. Также для VDS нужно оптимизировать настройки web-сервера и базы данных.
3. Немаловажный фактор - выбор CMS (движка сайта). Рекомендуем использовать популярные CMS, наподобие Wordpress, Joomla и т.д. Они хотя и содержат большое количество кода на PHP, но при этом включают в себя возможность кэширования страниц и оптимизации скриптовых компонентов сайта.

Важно! Кэширование страниц движком CMS на стороне сервера отличается от кэширования на стороне браузера и сводится к тому, что пользователю передаются уже готовые скомпонованные без запроса к базе данных статические страницы, если они не подвергались изменению. Так, например, работает плагин WP Super Cache для Wordpress.

Если вебмастер сам занимается разработкой сайта, то нужно использовать оптимизированные и эффективные запросы к базе данных. Обмен данными с БД - это “узкое место”, тормозящее подготовку страниц сайта. Важно следить за объемом базы данных и актуальностью находящейся в ней информации. Разросшаяся за счет накопленной в ней устаревшей информации до нескольких сотен мегабайт таблица затормозит любой сайт.

2. Используйте кэширование и сжатие

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

Возможность кэширования связана с правильной настройкой со стороны сервера для этих ресурсов. При их передаче в браузер сервер указывает срок, в течение которого ресурс не стоит загружать повторно (заголовки expires и cache-control). 

Для проверки ответа web-сервера используйте онлайн-сервис Сheckmy.

1. На странице указываете название сайта для проверки.
2. Выбираете User-Agent (например, Google Chrome).
3. Указываете использование сжатия ("Accept-Encoding: Gzip").

4. Нажимаете кнопку "Отправить запрос". Сервис покажет список заголовков ответа web-сервера. 
5. В этих данных обратите внимание на значения заголовков Expires и Cache-Control. Заголовок Content-Encoding покажет,  использует ли сервер сжатие (на это указывают значения gzip или deflate).

В данном примере видно, что кэширование для сайта не настроено. Заголовок Cache-Control содержит параметры “no-store” и "no-cache”, а заголовок Expires показывает прошедшую дату.
Сжатие для страниц сайта настроено. Заголовок Content-Encoding показывает ”gzip".

Сжатие страниц сайта для текстовой информации поможет экономить до 90% от исходного размера.

Если вы размещаете сайт у хостинг-провайдера, то эти возможности, как правило, сразу включены и настроены. Для уточнения настроек кэширования и сжатия напишите  в техподдержку. 

Когда используете собственный сервер, настройте его соответствующим образом для каждого типа контента. Например, для web-сервера Apache кэширование ресурсов настраивается с помощью модуля mod_expires и соответствующих директив в конфигурационном файле. Для сжатия используются компоненты mod_deflate и mod_gzip.

Примеры настройки Apache через файл .htaccess.

Для включения кэширования.

# BEGIN EXPIRES 
<IfModule mod_expires.c>
ExpiresActive On 
ExpiresDefault "access plus 6 month"
ExpiresByType text/css "access plus 6 month" 
ExpiresByType text/plain "access plus 6 month"
ExpiresByType image/gif "access plus 6 month"
ExpiresByType image/png "access plus 6 month" 
ExpiresByType image/jpeg "access plus 6 month" 
ExpiresByType application/x-javascript "access plus 6 month"
ExpiresByType application/javascript "access plus 6 month"
ExpiresByType application/x-icon "access plus 6 month" 
</IfModule>  
# END EXPIRES

Для включения сжатия.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$ </ifmodule>
</IfModule>

3. Адаптируйте изображения на сайте

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

1. Используйте оптимизированные для web-ресурсов форматы изображений (WebP) - JPEG и PNG.
2. Сохраняйте графические изображения в оптимальном размере и с высокой степенью сжатия. Можно оптимизировать изображения вручную в Photoshop или аналогичной программе, но мы рекомендуем воспользоваться сервисом Сompressor.
3. Убедитесь, что у видимых в браузере изображений размеры в пикселях соответствуют тем, что хранятся на сервере.
4. Не допускайте ситуацию, когда дизайнер готовит огромное и “тяжелое” изображение шириной, например, 1000 пикселей для отображения небольшой иконки на сайте.
5. Относитесь с осторожностью к анимированным GIF-файлам, которые часто разрастаются до очень больших размеров.
6. Используйте векторный формат SVG для таких элементов:

• иконки;
• указатели меню;
• оформление кнопок;
• и т.д. 

Это поможет серьезно сэкономить на размере изображений.

4. Оптимизируйте загрузки CSS

CSS (Cascade Sheet Styles) - это файлы, содержащие правила визуального оформления страниц, например, размер шрифтов, ширину и высоту отдельных блоков сайта и т.д. Браузер не отобразит страницу, пока не загрузит с сервера этот файл. Если CSS выполнен с ошибками, то это приведет к дополнительным задержкам. 

Оптимизация CSS. Для этого разработано много сервисов, например, CSS Minify, позволяющий получить минимизированный CSS-файл прямо из формы в браузере.

Асинхронная загрузка. Для того, чтобы добиться отложенной (асинхронной) загрузки CSS, когда браузер отображает страницу, не ожидая загрузки отдельного CSS-файла, воспользуйтесь приемом подключения кода CSS в заголовке страницы.

<link rel="stylesheet" href="my.css" >

Измените этот код, добавив атрибуты media и onload.

<link rel="stylesheet" href="my.css" media="print" onload="this.media='all'">

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

При таком варианте браузер посчитает, что этот CSS-файл не нужен для непосредственного отображения страницы, загрузит его асинхронно и применит стили к странице уже после завершения ее загрузки и отображения (событие onload()).

5. Ускорьте загрузки скриптов JavaScript

К скриптам JavaScript, по аналогии с CSS, тоже применяйте технологии минимизации и отложенной загрузки. 

Оптимизация JavaScript. Пример онлайн-сервиса для сжатия кода JavaScript -  Javascript Compressor. Принцип работы прост.

1. Загрузите код скрипта в форму.
2. Нажмите на кнопку Compress.
3. Получите готовый минимизированный код.

Внешние скрипты JavaScript подключаются в заголовке сайта (секция <Head>). Но для оптимизации скорости загрузки перенесите их в самый конец HTML-кода страницы.

Отложенная загрузка. Браузеры поддерживают отложенную загрузку скриптов JavaScript. Для использования этого функционала при подключении внешнего скрипта примените специальный атрибут defer в тэге <script>, как в этом примере:

<script src="/jquery.js" defer></script>

Важно!  Оптимизацию JavaScript и отложенную загрузку используйте параллельно.

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

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

6. Упростите код страницы (DOM)

В числе рекомендаций сервиса PageSpeed Insights часто встречается указание на то, что текущая структура страницы (DOM) слишком сложная и состоит из большого количества вложенных элементов. 

HTML-страницы складываются из вложенных друг в друга тэгов, а если их количество и степень вложенности выше определенного предела, то браузер начинает подтормаживать при отображении страницы. Следите, чтобы размер DOM не превышал 1500 элементов.  Это контролируется в процессе  “верстки” страницы или общего HTML-шаблона сайта.

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

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

Частные случаи оптимизации 

Выше мы описали универсальные способы оптимизации, которые подойдут для любого проекта, но некоторые методики зависят от выбранной CMS сайта. 

Улучшите скорость загрузки популярных CMS

На примере популярной системы Wordpress рассмотрим возможности по оптимизации сайта. В Wordpress неплохо оптимизирована работа с базой данных и файловой системой. Но есть и минус. WP - это CMS c открытым кодом доступа, к которой сторонние программисты пишут различные плагины, а пользователи устанавливают их, часто не задумываясь о целесообразности. 

Слишком большое число установленных плагинов тормозит работу сайта, т.к. каждый модуль подключает свои файлы CSS и Javascript, а это дает на выходе целый “зоопарк” в коде страницы. 

Мы рекомендуем устанавливать только те плагины, которые обязательно нужны, и вы уверены в их качестве. 

Отдельно отметим плагины, которые созданы для повышения скорости загрузки. Рекомендуем их установить.

1. Плагин Lazy Load Optimizer  оптимизирует загрузку изображений. 
2. Плагин Autoptimize  оптимизирует CSS и JavaScript. В его настройках включите пункты:

• оптимизировать код HTML;
• оптимизировать код JavaScript;
• оптимизировать код CSS;
• встраивать все CSS.

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

На вкладке "Дополнительно" данного плагина установите настройку для Гугл-шрифтов - Combine and preload in head.

3. Плагин WP Smush оптимизирует все изображения, загруженные в медиа-библиотеку Wordpress. Это поможет избавиться от ошибки “Настройте эффективную кодировку изображений”, если ее показывает сервис PageSpeed Insights. 
4. Плагин WP Super Cashe поможет в достижении максимально быстрого отклика сервера. После установки плагина включите в его настройках кэширование и опцию "Сжимать файлы кэша", чтобы ускорить работу.

Важно! У плагинов разные функции, поэтому используйте их параллельно друг с другом и общими методами оптимизации.

Аналогичные плагины, механизмы для кэширования, оптимизации изображений, работы CSS и JavaScript существуют для большинства популярных CMS, включая CS-Cart, Joomla, Drupal и т.д.

Оптимизируйте сайт на конструкторе Tilda

Конструкторы сайтов приобрели популярность, так как позволяют создать сайт без знания HTML-языков программирования и без аренды хостинга. Но для них также важна оптимизация скорости загрузки. На примере популярного конструктора Tilda рассмотрим несколько возможных шагов по оптимизации.

1. Изображения на страницу готовятся и загружаются пользователем, а значит, оптимизируйте их  заранее, например, с помощью сервиса Compressor.
2. Для отложенной загрузки включите режим Lazy Load в меню “Настройки сайта” -> ”Ещё”:

Подключите CDN

Переложите часть забот об оптимизации,  ускорении и нагрузке на сервис CDN.

Важно! CDN (Content Delivery Network или Content Distribution Network) - это инфраструктура, способствующая повышению доступности и ускорению доступа к контенту.

Суть системы - размещение географически распределенных точек входа. Это целые дата-центры с широкими локальными каналами и кэшированием на них контента обслуживаемых сайтов.

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

На приведенной схеме сервер с контентом (Origin) расположен в Европе, а посетитель - в Северной Америке.

В обычных условиях посетителю пришлось бы обращаться к серверу, используя трансатлантические кабели связи и получая 200 мс задержки на каждом запросе.

Если использовать CDN, то он получит контент с минимальной задержкой из ближайшей точки обслуживания.

Кроме того, многие CDN (одна из крупнейших - cloudflare.com) способны оптимизировать выдаваемый посетителю контент, что также позитивно сказывается на скорости загрузки сайта.

Базовые функции доступны бесплатно.

Продвинутые - на платных тарифах.

Кроме того, важная функция CDN - защита от DDoS-атак.

Каждый из приведенных примеров поможет улучшить usability, так как сделает страницы сайта “легче”. Пользователю остается проанализировать, какая проблема препятствует скорости работы веб-сайта, и устранить ее, воспользовавшись нашими рекомендациями. 

Комментарий эксперта Григорий Бабич, менеджер по развитию продукта в Timeweb К нам обращаются клиенты с вопросами по скорости загрузки сайта. Сайт при этом оптимизирован, а сервер работает на 5+. На самом деле, проблема может быть в большом количестве редиректов – перенаправлений пользователя с одного URL на другой.  Часто перенаправление оправдано, так как это обеспечивает открытие сайта по безопасному протоколу https. В остальных случаях нужно выяснить, какие ещё редиректы есть (можно отследить через сервис проверки редиректов), проанализировать их и убрать лишнее. Для этого нужно определить, какую роль выполняет каждый редирект. Если роль определить не удаётся или она не имеет значения, то редирект можно смело убирать.  Так вы сэкономите драгоценное время загрузки и улучшите индексацию в поисковиках. Если же проблема не в перенаправлениях, то для оптимизации скорости сайта можно воспользоваться услугой "Ускоритель сайтов" от Timeweb. Принцип работы прост: ускоритель сначала анализирует сайт с помощью Google Pagespeed insight, а затем оптимизирует слабые места в автоматическом режиме.

Следующая статья для новичков - Что такое SEO продвижение