Page Speed
Average
First contentful paint: 2.6s
DOM content loaded: 1.1s
Page Load Distributions

FCP

30%
40%
30%

DCL

0% 25% 50% 75%
30%
40%
30%

Fast

Average

Slow

Начните отслеживать здоровье вашего сайта

page_speed Запустить мониторинг

Optimization Suggestions

Скорость загрузки сайта: её составляющие и способы оптимизации

Скорость загрузки сайта: её составляющие и способы оптимизации
1 Star2 Stars3 Stars4 Stars5 Stars (32 votes, average: 4.22 out of 5)

5

Loading...
Table of Contents Содержание

Почему скорость сайта имеет значение

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

Но даже, если ситуация с веб-ресурсом относительно нормальная (сайт загружается быстро на большинстве устройств), то небольшие задержки в отображении сайта становятся причиной потери аудитории и падения процента конверсии.

Специалисты Amazon выяснили, что при падении скорости загрузки на 100 мс, у них сразу же на 1% снижаются продажи.

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

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

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

img-border
скорость загрузки сайтаimg-close

Основные составляющие скорости сайта

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

Чтобы понять, как определяется время, за которое загружается страница сайта, давайте детальнее рассмотрим это явление. В конечном итоге мы выясним, как нам оптимизировать и клиентскую, и серверную части. Когда сайт загружается (при первом визите) – происходят такие операции:

  1. DNS-запрос названия сайта.
  2. Связь с сервером по проверке IP (по протоколу TCP).
  3. Установка безопасного соединения при использовании протокола HTTPS (TLS соединение).
  4. Запрос по URL-адресу HTML-страницы и ожидание сервера (на основе HTTP-протокола).
  5. Загрузка HTML-кода страницы.
  6. Анализ HTML-документа на стороне браузера и дальнейшее формирование серии запросов к ресурсам веб-документа.
  7. Дальнейшая загрузка и разбор таблиц каскадных стилей (CSS). Загрузка и выполнение JS-кодов.
  8. Дальше осуществляется рендеринг отображения страницы и активация JS-скриптов.
  9. Следующий этап – подгрузка имеющихся шрифтов.
  10. Отображение картинок и других элементов страниц.
  11. Окончание отображения полной страницы, выполнение отстроченных скриптов и кодов.

В вышеописанном процессе некоторые этапы могут проходить одновременно, а иногда меняться местами, но суть при этом не меняется.

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

Проверка скорости сайта

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

  1. Время для получения начального байта (TTFB). Это временный отрезок с начала загрузочного процесса и до получения первых данных. Этот параметр можно считать основной метрикой оптимизации сервера.
  2. Начало отображения страницы (начало рендеринга, первые цвета). Такой показатель демонстрирует время до конца периода «белого экрана» в браузере, когда страница начинает прорисовываться.
  3. Загрузка базовых элементов страницы (фактическое время загрузки). Оно включает обработку всех ресурсов для взаимодействия со страницей, после чего стрелки браузера, которые отображают загрузку ресурса, перестают вращаться.
  4. Полная загрузка веб-страницы.  Время перед завершением основных действий браузера, когда уже обработаны все основные и отложенные модули кода.

Все вышеперечисленные параметры скорости измеряются в секундах. Но очень полезно при анализе 3 и 4 показателя обращать внимание на количество трафика. Это важно для того, чтобы оценить, как скорость соединения сказывается на времени загрузки. Дальше надо разобраться, как проверять скорость.

Одним из самых эффективных инструментов является набор инструментов разработчика, доступный в браузере. Самыми продвинутыми функциями панели располагает Chrome. На вкладке «Сеть» вы можете получить показатели тайминга загрузки для комплекса показателей, включая также и сам HTML-файл. Когда вы наводите курсор на элемент, то можете увидеть, сколько времени уходит на каждый из шагов в обработке ресурса. Для того, чтобы комплексно оценить картину загрузки можно использовать вкладку «Производительность». Она предоставляет всеобщую информацию до этапа декодирования графических элементов.

Если вам необходимо оценить скорость сайта и не требуется дополнительных деталей, начните анализ сайта на вкладке «Аудит». Он проводится с использованием подключаемого модуля Lighthouse. В отчете вам представиться оценка скорости для мобильных устройств (как отдельных пунктов, так и в соответствии с вашими базовыми показателями) и нескольких других форм отчетности.

Для быстрой оценки оптимизации клиентской составляющей, можно использовать службу Google PageSpeed Insights, либо Sitechecker (наш сервис включает API-интерфейс сервиса Google).

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

1. Отчет Яндекс Метрики по скорости страниц

Чтобы найти отчет, следуйте этому пути.

Яндекс.Метрика > Отчеты > Стандартные отчеты > Мониторинг > Время загрузки страниц

img-border
отчет по скорости загрузки сайта в yandeximg-close

2. Отчет Google Analytics по скорости страниц

Чтобы найти отчет, следуйте этому пути.

Google Analytics > Поведение > Скорость сайта > Предложения по скорости

img-border
отчет по скорости загрузки сайта в googleimg-close

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

Оптимизация сервера

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

1. Хостинг (серверные ресурсы)

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

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

2. DBMS (сервер базы данных)

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

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

Настройка DBMS (к примеру, MySQL) может привести к улучшению параметров скорости в несколько раз. Такое случается, если до этого никто не оптимизировал саму базу данных. Иногда результат превосходит все ожидания и составляет десятки процентов.

Настройкой запросов и схем данных управлять довольно сложно. В разрезе такой оптимизации прирост скорости достигается на несколько порядков предыдущей её величины. Чтобы зафиксировать медленные запросы понадобится агрегация статистики загрузки базы данных для длительного промежутка времени. Потом файл логов следует проанализировать и зафиксировать список главных кандидатов на переработку.

3. Влияние CMS и программного кода

Распространено мнение, что определяющим фактором для скорости сайта является его движок (система управления контентом / CMS). Это приводит к тому, что вебмастера делят все движки на быстрые и медленные. Но это очень далеко от истины.

Загрузка серверных ресурсов имеет привязку к коду и использованной CMS – это факт. Но самые востребованные системы уже давно научились оптимизировать свои ресурсы и достигать максимальной производительности, избегая проблем со скоростью.

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

Найдите страницы с лишним кодом

Запустите аудит сайта и найдите страницы с соотношением текста к коду меньше 10%

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

4. Кэширование

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

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

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

  • далеко не все ресурсы могут кэшироваться;
  • кэш следует правильно отключать / сбрасывать.

Если указанные проблемы не преграда – кэширование советуют, как один из максимально эффективных методов ускорения ресурсов сервера.

5. Оптимизация TCP, TLS, HTTP/2

В этом подпункте будут объединены искусные методы оптимизации сети, которые также дают рост серверной скорости. И хотя влияние здесь не столь впечатляющее как при других способах, оно достигается только за счет настроек. Другой плюс – такая оптимизация бесплатная.

В настройке TCP сегодня нуждаются многие большие проекты и те сервера, где передается большой трафик. Важно понимать, что сетевые подсистемы обновляются на регулярной основе, с каждым выпуском нового ядра Linux. Поэтому их стоит обновлять. Правильная настройка TLS (HTTPS) поможет вам добиться высокого уровня безопасности и минимизирует время установки безопасного соединения. Рекомендуем использовать обновления, выпущенные Mozilla.

Новая версия HTTP-протокола – HTTP/2, создана для того, чтобы ускорить загрузку сайтов. Хотя стандарт появился относительно недавно, уже сегодня его активно использует каждый пятый сайт. В целом, механизм акселерации скорости работы сайтов уже налажен в HTTP/2. Но теперь важно сократить эффект задержек сети при загрузке страницы (множественные запросы). Вместе с тем, ускорение на HTTP/2 не всегда проходит гладко, поэтому не стоит возлагать большие надежды на этот протокол.

Клиентская оптимизация

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

1. Критический путь оптимизации CSS и JS

Критический путь рендеринга (critical rendering path) – это набор ресурсов для начала рендеринга страницы в браузере. В основном такой набор включает HTML-документ сам по себе, веб-шрифты, стили и JS-коды.

Главная задача при оптимизации скорости сайта здесь будет состоять в двойном сокращении: времени (включая задержки сети) и трафика (подразумевая медленные соединения).

Наиболее простой способ определиться с критическим курсом – запустить инструменты аудита, которые доступны в браузере Chrome (в панели разработчика). Плагин Lighthouse определяет его структуру и время загрузки, при этом особое внимание уделяется медленному соединению.

Основная техника сокращения критического пути: удалить всё, что является лишним, или то, что можно отложить. К примеру, значительную часть Java Script кода допустимо откладывать до загрузки страницы. Для этого вызов JS-ресурса помещают в конец HTML-кода или пользуются атрибутом Async.

Для отложенной загрузки CSS-стилей достаточно применить динамическое соединение этих компонентов через JS (ожидание события domContentLoaded).

2. Оптимизация веб-шрифтов

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

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

Главной целью оптимизации становится сокращение объема трафика, потраченного на веб-шрифты и получение их в максимально краткий срок. Для сокращения трафика следует использовать современные прогрессивные форматы: WOFF для совместимости и WOFF2 для браузеров. Другой аспект – использование кодировки. Вы можете включать только те наборы знаков, которые есть на вашем веб-ресурсе (Латиница, Кириллица и т. д.).

Чтобы повлиять на быстрое отображение веб-шрифтов, можно использовать спецификацию rel=”preload” и свойство отображения шрифтов в CSS. Предварительная загрузка поможет максимально быстро сообщить браузеру о необходимости загрузки файла шрифтов. Она обеспечит гибкий способ отображение шрифтов, а также управление поведением браузера в случае задержки файла (не придется ждать более трех секунд).

3. Оптимизация изображений

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

  • PNG для изображений с прозрачностью и текстом;
  • JPEG для фото и более комплексных графических изображений;
  • SVG в случае с векторной графикой.

Кроме указанных форматов, недавно появился еще и новый стандарт: WebP от Google. Он сможет заменить сразу два вышеупомянутых стандарта (PNG и JPEG), поскольку поддерживает сжатие с и без потери качества. Он применяется для файлов со слоями и анимационных картинок.

Для использования WebP достаточно создать в нем копию картинки и предоставить её браузерам, которые поддерживают этот формат.

Чтобы оптимизировать PNG можно использовать множество удобных сервисов для сжатия размера. К наиболее известным относятся OptiPNG, PNGout, EWWW Image Optimizer и другие.

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

Для JPEG также существует два типа оптимизации: без потери и с потерей качества. В большинстве случаев рекомендуется использовать инструмент Mozilla JPEG package. Он разработан с целью улучшить компрессию в этом формате. Для конвертации без потери качества смотрите в сторону jpegtran, а если качество вторично – cjpeg.

4. Кэширование хедера (header)

Это простейший способ для оптимизации клиента. Он применим к кэшированию в браузере редких ресурсов: шрифтов, картинок, стилей, скриптов и даже кода страниц в целом. Благодаря этому методу, каждый из указанных типов обращается к серверу только один раз.

При использовании сервера Nginx, просто добавьте инструкцию:

add_header Cache-Control "max-age=31536000, immutable";

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

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

5. Сжатие данных

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

Во-первых, коэффициент сжатия настраивается и должен приближаться к максимальному.

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

В-третьих, можно применять более совершенные способы компрессии: zopfli (совместим с gzip) и brotli (новый алгоритм сжатия). Стоит отметить, что Brotli будет работать только с веб-ресурсом на протоколе HTTPS. Поскольку эти методы (особенно zopfli) обходятся для сжатия очень дорого, эксперты советуют использовать их в статической версии.

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

Использование CDN

Использование CDN (сеть доставки контента / content delivery network) для ускорения работы веб-сайта – очень разрекламированный способ, который кроме технологической составляющей включает много маркетинговых добавок.

1. Как CDN появился

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

Чтобы решить эту проблему были созданы CDN, то есть распределенные сети, к которым могли подключаться клиенты (например, аудитория каналов). Узлы сетей при этом уже находятся на сервере. Было сокращено количество обращений к серверу, хотя к CDN в это время обращались миллионы раз, но её стабильность обеспечена кэшированием контента.

В наши дни CDN позиционируются, как инструменты для увеличения скорости сайтов. Считается, что они сокращают расстояние передачи данных между контентом и клиентом (посетителем веб-ресурса).

2. Возможное влияние

Можно ли ускорить веб-ресурс при использовании CDN? На самом деле ответ утвердительный. Соединение пользователя с ближайшим сервером (по времени) устанавливается быстрее и эффективнее подключаются TCP и TLS протоколы. А если контент размещен на сервере CDN, то юзер может быстрее получить нужные данные.

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

3. Недостатки использования CDN

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

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

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

Фиксируем результаты

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

Любой успешный интернет-проект постоянно растет и меняется, обновления касаются как общих шаблонов (оформления сайта, его интерфейсов), так и содержания. Вместе с тем меняется и код ресурса (особенности работы сервера и клиента).

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

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

Ускорение работы сайта – это очень динамическая сфера: здесь всё время применяются новые протоколы и стандарты и меняется их взаимодействие с браузерами. По этой причине актуальным становится анализ технологии проекта и используемых на нем программных процессов.

email__icon

Узнайте первым о новых статьях

Сбросить пароль

Введите ваш email, чтобы сбросить пароль

Ваш email

Проверьте ваш email

Мы отправили вам новую ссылку для изменения пароля. Проверьте свою электронную почту и следуйте инструкциям. envelope

Ваш пароль сброшен успешно!

close
conversation

Напишите нам

Получите консультацию наших SEO специалистов и узнайте, как платформа Sitechecker может помочь в решении ваших бизнес-задач

ERROR: The Name field is empty.

ERROR: The Last Name field is empty.

ERROR: The Work Email field is empty.

ERROR: The Message field is empty.

Thank you for registration!

We are redirecting you to PayPal