Как ускорить загрузку сайта: серверные и клиентские методы

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

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

Важность скорости загрузки сайта

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

Согласно статистике, не больше 10 % посетителей покидают сайт, если его страницы загружаются быстрее 2 секунд. На медленных ресурсах, где приходится ждать дольше 5 секунд, «беглецов» больше 38 %. Быстрая загрузка страницы даёт пользователям больше контроля и повышает удобство. Посетителям не нужно тратить лишнее время на просмотр белого окна браузера.

Источник: shutterstock.com

Если контент грузится около 10 секунд – существенно увеличивается вероятность того, что посетитель закроет страницу. По статистике, 40 % пользователей не ждут загрузки страниц больше 3 секунд.

Исследователи из Google SOASTA установили пропорциональную зависимость между ростом скорости открытия и повышением вероятности отказа посетителей. Результаты показывают, что более 50 % из них готовы сбежать, если страница будет грузиться дольше 3 секунд.

Впрочем, показатель отказов не всегда зависит от скорости загрузки страниц. На него могут влиять качество и тип контента, заинтересованность посетителя и ряд других факторов.

На каждые 100 мс ускорения загрузки домашней страницы клиентская база Mobify повышала показатели конверсии на основе сеансов на 1,11 %. В год это могло принести более 376 тыс. $ дополнительного дохода. По аналогии, за каждые 100 мс ускорения прогрузки страницы для оформления заказов клиенты Mobify могли наблюдать повышение конверсии на основе сеансов на 1,55 %.

В год средний доход рос более чем на 526 тыс. $. Исследования показывают, что коэффициент конверсии страницы меняется и по мере падения скорости загрузки. Эксперты mPulse установили, что снижение показателя за каждую секунду падения скорости – до 0,5.

Метрики для оценки скорости загрузки сайта

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

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

Время загрузки первого байта (TTFB)

TTFB отражает период получения первого байта информации браузером пользователя. Его отсчет начинается с момента, когда поступает запрос на сервер. Он включает в себя время:

• Затраченное на отправку запроса к серверу.

• Нужное на генерацию и обработку ответа.

• Необходимое для доставки его пользователю.

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

Первая отрисовка контента (FCP)

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

Совокупный сдвиг макета (CLS)

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

Компании Google использует инструмент Core Web Vitals для оценки комфорта сайта для клиента. В него входят LCP, INP и CLS. Чем выше удобство – тем лучше ранжирование в поиске.

Время загрузки достаточной части контента (FMP)

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

Время окончания работы ЦП (First CPU Idle)

Этот показатель отражает период от серверного запроса до:

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

• Реакции на ручной ввод.

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

Время загрузки для взаимодействия (TTI)

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

Загрузка самого большого элемента (LCP)

LCP отражает время, которое потребуется на открытие самой «тяжелой» детали на странице. Обычно это картинка, видео. Они имеют для пользователя ключевое значение, но их загрузки приходится ждать. Логотип компании в шапке страницы появляется гораздо быстрее.

Переход к следующей отрисовке (INP)

До марта прошлого года использовалась метрика FID, которая отражала время с момента взаимодействия посетителя со страницей до реакции браузера на его действия. В компании Google посчитали эту метрику устаревшей и заменили на INP. Отличительная её особенность – учет задержки на каждом действии пользователя, а не только при его первой активности.

Speed Index

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

Сервисы для оценки скорости загрузки сайта

PageSpeed Insights

Разработка инженеров Google. Подходит для обычных и мобильных сайтов. Оценка варьируется от 1 до 100. Максимум отражает идеальную ситуацию, при которой страница загружается за доли секунды. И таких показателей достигнуть можно. Пользователь получает развернутую аналитику по различным параметрам, а также рекомендации по их оптимизации:

• Origin Summary.

• Данные наблюдений.

• Диагностика.

• Оптимизация.

• Имитация загрузки страницы.

• Успешные аудиты.

Источник: shutterstock.com

Для эмуляции 3G-сети используется инструмент Lighthouse. С его помощью можно оценить:

• FCP.

• TTI.

• Speed index.

• First CPU Idle.

• FMP.

• Приблизительное время задержки при вводе (EIL).

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

WebPageTest

Перед началом анализа необходимо указать геолокацию, URL и браузер.

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

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

Фиолетовой вертикальной линией отражен момент, когда сайт полностью отрисовался. Синей чертой отделяется время, когда закончилась загрузка страницы. В идеале промежуток между ними не превышал 2-3 секунды. Впрочем, показатели довольно условны, и надо оптимизировать все, что доступно. С помощью детализации запросов можно понять, какие показывают реальную скорость загрузки сайта. Она даст оценить общую картину в динамике.

Pingdom Tools

Этот бесплатный инструмент предоставляет пользователям Pingdom. Русскоязычной версии нет, что не мешает эффективно использовать доступный набор функций. В строку браузера вводятся адрес сайта и регион, откуда будут поступать запросы. Затем начинается анализ.

Качество загрузки сайта отражается латинскими буквами от A до F. Наивысшая оценка – А. Также пользователю покажут скорость открытия страницы, ее размер и количество использованных для теста запросов. Рекомендации по настройке кода ресурса, позволяющие поднять время загрузки, можно найти в Improve page performance. После демонстрации кода ответа страницы – Response code 200 – система перечисляет элементы сайта и показывает их вес.

Используются категории:

• CSS.

• Скрипты.

• HTML.

• Изображения.

• Шрифты.

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

Другие инструменты

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

• PR-CY.

• GTmetrix.

• Monitis Tools.

• Load Impact.

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

На показатель влияют производительность сервера и эффективность контакта с базами данных.

Поменяйте провайдера

Если скорость загрузки сайта слишком низкая – подумайте об этом. Используемые провайдером серверы должны отвечать современным требованиям. Обязательно наличие SSD-дисков, мощных процессоров, достаточного объёма необходимой для загрузки сайта ОЗУ. Еще важным фактором является масштабируемость. Провайдер должен иметь запас по мощности, чтобы в момент роста нагрузки сервера не отключались. Не стоит забывать: близость дата-центра к локации основных посетителей сайтов обеспечивает быстрый обмен данными.

Подумайте про облачные сервисы

Они используют мощное оборудование и обладают высокой производительностью.

Оптимизируйте сеть

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

Для защиты данных, которые передаются между сервером и пользователем, используется протокол TLS. С каждым обновлением ОС он становится все лучше: растет скорость соединения, данные пользователей шифруются оптимальными методами, обеспечивая их надёжную защиту.

Сегодня для передачи данных чаще всего используется протокол HTTP/2. У предыдущей версии 1.1 был существенный недостаток – задержки при одновременной передаче сразу нескольких запросов через один сигнал. Обновление до версии 2 позволило устранить эту проблему. Кроме того, с помощью протокола HTTP/2 можно заранее отправлять ресурсы или сжимать заголовки.

Самая новая версия – HTTP/3. В её основе лежит QUIC, использующий механизм UDP. Он помогает нивелировать негативное влияние от потери пакетов. Сейчас последняя версия протокола HTTP не очень популярна. Многие браузеры его просто не поддерживают, а сервера не используют. Свою нишу он нашёл на стриминговых платформах, где есть нужда в минимальных задержках.

CMS

CMS представляет собой систему управления контентом. Многие пользователи считают, что от её эффективности зависит, как быстро будут запускаться страницы. Когда у веб-мастеров возникает вопрос, как ускорить загрузку сайта на Тильде, они начинают задумываться. О том, чтобы сменить платформу. Но большинство популярных CMS имеют схожие параметры производительности и скорость загрузки сайтов зависит от них в меньшей степени.

Источник: shutterstock.com

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

Серверное кеширование

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

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

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

Ускорение загрузки сайта на клиентской стороне

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

Критический путь

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

Основной задачей при оптимизации скорости загрузки является сокращение этого пути. Важно уменьшить его не только по времени, но и по трафику. Идеальный инструмент для оценки критического пути – плагин Lighthouse. Запуск его осуществляется на панели разработчика в браузере Google Chrome. Он покажет не только состав пути, но и время, необходимое для загрузки, при условии медленного подключения.

Сокращение critical rendering path предполагает удаление всего, что можно отложить или не нужно. Так, большую часть кода JS можно не загружать, пока страница не откроется полностью. Для оптимизации можно задействовать атрибут async или разместить JS-ресурс в конце страницы с кодом. Чтобы отложить загрузку CSS, хорошо использовать и JS. Событие domContentLoaded) позволит активировать динамическое подключение стилей.

Веб-гарнитуры

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

Разработчик, желающий оптимизировать сайт, должен сделать так, чтобы веб-шрифты приходили максимально быстро, а размер их трафика был минимальным. Для сокращения последнего применяют современные инструменты WOFF. Большинство актуальных браузеров поддерживают WOFF2. Эксперты не советуют включать в набор шрифты, которых на сайте нет. Самые популярные кириллица и латиница должны быть обязательно.

Скорость отображения веб-шрифтов можно изменить, используя спецификации link rel=«preload» и CSS-свойства font-display. Первая позволяет указать браузеру на необходимость загрузки файла с ними как можно раньше. С помощью второй идет настройка поведения браузера, если ресурсы не придут быстро. Он может отказаться от демонстрации шрифта, если время ожидания превысило 3 секунды или подождать, пока файл не появится.

Изображения

Основной вес современного сайта формируется картинками. Безусловно, изображения не так влияют на страницу, как код JS или CSS. Но основной контент сайтов редко обходится без них. На маркетплейсах к каждому товару есть картинка/фотография.

Оптимизировать изображение легко посредством его «сжатия». Важно выбрать подходящий инструмент и правильный формат:

• JPEG для фото и сложных изображений.

• PNG для картинок с прозрачностью и текстом.

• SVG для векторной графики.

Google разрабатывает новый формат – WebP. Он может объединить в себе все достоинства JPEG и PNG. Предполагаются поддержка сжатия с потерей качества и без неё, использование анимации и прозрачности картинок. С помощью особого инструмента можно создавать копии в формате WebP для дальнейшего использования с браузером.

Оптимизация картинок в формате JPEG предполагает два варианта: с потерей качестве и без неё. Идеальный инструмент – Mozilla JPEG. Он создан специально для работы с этим форматом. Если потери качества вам не страшны – используйте cjpeg. Для его сохранения выбирайте jpegtran.

Немало утилит позволяют оптимизировать картинки в формате PNG. Среди самых актуальных – ect, PNGout, OptiPNG. С помощью zopfliPNG можно провести внутреннюю оптимизацию сжатия. Суть работы софта – в удалении из файла лишних данных, поэтому применять их стоит осторожно. Некоторые утилиты не сохраняют качество картинки. Если это важно – будьте внимательны.

Кеширующие заголовки

Метод клиентской оптимизации – один из самых простых. В его основе лежит кеширование данных, которые редко меняются. Чаще всего это JS-файлы, картинки, шрифты. Это позволит запрашивать каждый ресурс на сервере не больше одного раза.

При использовании инструмента Nginx директива кеширования будет выглядеть так:

Эта команда позволит браузеру проводить кеширование ресурсов сроком на 1 год. Параметр immutable означает, что данный ресурс не будет меняться.

При решении вопроса о том, как ускорить загрузку сайта на Wordpress, других CMS-платформах можно столкнуться с необходимостью изменить кешированный ресурс. Тогда нужно просто сменить URL. При работе с HTML-документами срок кеширования редко превышает 1 час.

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

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

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

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

CDN

Технология Content delivery network сегодня активно рекламируется как инструмент ускорения сайта. Однако маркетологи редко углубляются в суть этой технологии.

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

Источник: shutterstock.com

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

Рекламируя сервисы CDN, маркетологи обещают ускорить загрузку сайтов, сократив расстояние от посетителя до сервера с контентом.

Можно ли использовать инструменты CDN для ускорения сайтов? Да, можно сократить время соединения с сервером, в итоге пользователь максимально быстро получает контент. Ведь подключение идет к сторонним ресурсам, а собственная система практически не нагружается. Кроме того, с помощью CDN можно оптимизировать сам контент, делая его более компактным. Компрессия текста и сжатие изображений позволяют сократить скорость загрузки.

Безусловно, система не лишена недостатков. Если объект не находится в кеше CDN-узла, его сложно будет заполучить. К примеру, если ранее он не запрашивался, придётся подождать, пока он пройдет промежуточное звено, а затем уже его передадут пользователю.

CDN создавались для сокращения времени доступа к сайту, но и без них можно организовать оптимальный маршрут. Глобальные CDN-узлы в России не востребованы на рынке. Не стоит забывать и о том, что в более разветвлённой сети увеличиваются риски сбоя, потери пакетов, нестабильного соединения. Использование CDN повышает сложность доставки данных от сервера до пользователя.

Дополнительные рекомендации по ускорению загрузки сайта

• Минимизируйте количество JavaScript-кода.

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

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

• Откажитесь от бесплатного хостинга.

  Владельцы платных услуг размещают сайты на производительных серверах, что положительно сказывается на скорости загрузки ресурсов. Мощную инфраструктуру вряд ли кто-то предоставит бесплатно. Как правило, сайты на иных серверах загружаются слишком долго, ещё могут пропасть из поисковой выдачи. Страница способна просто «лечь» в момент, когда робот её ищет. И после нескольких неудачных попыток алгоритм понизит сайт в выдаче.

• Оптимизируйте количество товара на одной странице.

  Ассортимент, одновременно отображающийся на ней, напрямую влияет на скорость её загрузки. Оптимально – не более 20 позиций. Но каждый случай надо рассматривать отдельно: на странице могут быть дополнительные плагины или виджеты, которым потребуется много ресурсов в базе данных. Их число негативно сказывается на быстродействии и скорости отображения контента.

• Не используйте большое количество подкатегорий.

  Для тех, кто использует бесплатные хостинги, это – инструкция к действию. А при качественной серверной инфраструктуре его вполне можно проигнорировать. Механизм работает так, что все дерево категорий автоматически переносится в оперативную память сервера, снижая его быстродействие. Если их окажется слишком много, система может не справиться. Не стоит использовать большое количество вложенных категорий для разных товаров. При грамотной организации каталога его можно «облегчить», избежав лишнего ранжирования.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Часто задаваемые вопросы об ускорении загрузки сайта

Как сделать передачу контента легче?

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

Какое влияние оказывают редиректы на период загрузки?

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

Какая ошибка встречается чаще всего?

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

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

Источник изображения на шапке: shutterstock.com

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

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

Забрать ценные бизнес-подарки бесплатно

Полезные
материалы
для руководителей

Скачать 3,2 MB