Как уменьшить размер страниц на сайте

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

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

Проверить скорость загрузки помогает Serpstat. В модуле «Аудит сайта» приводится детальный анализ ошибок. Необходимо перейти в «Скорость загрузки», как на скриншоте, и изучить отчет:

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

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

Размер веб-страницы также определяет SiteDozor. Указываете URL-адрес и сразу получаете результат:

Увеличение размера веб-страницы происходит под влиянием нескольких факторов:

• HTML;
  
• CSS;
  
• Java Script;
  
• картинки;
  
• шрифты;
  
• видео;
  
• реклама.

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

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

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

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

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

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

Технически после активации Gzip в файлы .htaccess и index.php вносится специальный фрагмент кода, который и позволяет сжимать данные.

Чтобы включить Gzip на CMS WordPress, достаточно скачать и установить специальный плагин. Найти его просто через внутренний магазин:

Наиболее используемые в таких целях плагины:

• Check and Enable GZIP compression;
  
• GZip Ninja Speed Compression;
  
• Instant Gzip Compression;
  
• WordPress Gzip Compression;
  
• Force gzip и прочие.

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

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

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

Чтобы настроить кэширование браузером пользователя, нужно разместить фрагмент кода на своем веб-ресурсе:

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

Некоторые сайты используют сеть доставки контента — Content Delivery Network (CDN). К контенту в данном случае относятся:

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

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

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

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

Скорость загрузки сайта можно протестировать в Serpstat, а определить размер страницы помогают специальные онлайн-сервисы — например, Sitechecker и SiteDozor.

Для оптимизации размера страниц используют GZIP и CDN, а также активируют кэширование браузером пользователя.

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