Как повысить скорость загрузки сайта: практические советы

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

Промежуток времени от отправления пользователем запроса до получения первой информации от сервера еще называют TTFB — то есть, Time to First Byte.

Есть одно золотое правило: чем выше TTFB, тем выше вероятность совершения целевого действия пользователями. 

В TTFB входит время на поиск DNS-сервера и последующее установление с ним устойчивого соединения с применением:

• TCP — Transmission Control Protocol, или протокол управления передачей данных.
• SSL – Secure Sockets Layer, стандарт шифрования, который применяется при установлении соединения клиента с сервером.

Оптимальная скорость загрузки сайта

Оптимальным показателем TTFB считается 2-3 секунды. В этом диапазоне находятся все топовые проекты, которые высоко оцениваются поисковиками. 

Любопытно, что в теории идеальный показатель — 0,5 секунды. Именно с такой скоростью мы реагируем на контент. Возможно, когда-нибудь топовые ресурсы придут и к этому результату. 

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

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

Факторы, влияющие на скорость загрузки

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

• производительность сервера;
• загруженность сервера;
• стандартное время отклика сервера;
• содержание страницы.

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

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

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

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

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

• Google PageSpeed Insights

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

• SpeedTest.net 

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

• Web Site Optimization

Любопытной особенностью этого инструмента является возможность проведения тестов с минимальной скоростью подключения к интернету. А если быть точнее, со скоростью модемов или 14,4 Кбайта в секунду. 

• Pingdom Tools 

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

• WebPageTest 

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

• PR-CY 

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

• Seolik.ru 

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

• Be1.ru 

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

Рекомендации по повышению скорости загрузки сайта

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

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

Несколько советов по повышению скорости загрузки сайта:

• Сокращайте объем и количество файлов CSS и JS

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

• Уменьшайте количество запросов к серверу 

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

• Настраивайте параллельное скачивание через поддомены 

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

• Размещайте CSS вверху страницы

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

• Все тяжёлые элементы опустите в конец страницы

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

• Не забывайте, что у браузера есть кэш

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

• Воспользуйтесь возможностями CDN

Content Delivery Network — это целая система, включающая в себя сеть серверов, разбросанных по всему миру. Благодаря такой организации обращение посетителей будет обрабатываться ближайшим сервером, что значительно ускоряет процесс взаимодействия. Такие инструменты подходят для крупных коммерческих проектов, которым важно следить за качеством обслуживания всех своих клиентов.

• Используйте возможности архивирования

Существует отдельный инструмент — GZip — который архивирует файлы с расширениями .html, .css и .js. Благодаря нему сервер обрабатывает информацию в уменьшенном объеме. Браузер получает архивы и распаковывает их уже на стороне пользователя.

• Облегчайте изображения

Оптимизация картинок через снижение объема может приводить к существенному ускорению загрузки без потерь реального качества материалов.

• Уменьшайте размер файлов 

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