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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
1192 1
How-to Читать 8 минут 30 ноября 2018

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

Как сократить размер страниц на сайте
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ
Инструкцию одобрил
Tech Head of SEO в TRINET.Group
Размер страницы сайта важен в первую очередь для скорости ее загрузки при переходе на веб-сайт. Если не оптимизировать скорость, вы рискуете потерять трафик по данной причине. SEO-оптимизация включает этот пункт в список первоочередных задач.
Одна из наиболее распространенных «болезней» сайтов — размеры страниц HTML. На сегодняшний день вес страниц стремительно увеличивается, поскольку растет конкуренция и необходимо ответить на запрос пользователя как можно лучше и эффектнее.

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

Как проверить размер страницы онлайн

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

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

Причины медленной загрузки страниц

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

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

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

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

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

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

Способы оптимизации размера страницы

#1

Gzip

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

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

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

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


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

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

Активация кэширования браузером

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

Чтобы настроить кэширование браузером пользователя, нужно разместить фрагмент кода на своем веб-ресурсе:
<ifmodule mod_expires.c>
ExpiresActive on
<filesmatch ".(jpg|jpeg|gif|png|ico|svg)$">
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>
Пропишите данные инструкции в файле .htaccess, и браузер посетителя будет сам кэшировать страницу, не теряя время и скорость на загруку.
#3

CDN

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

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

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

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

Дополнительные советы

1
Удаляйте лишние компоненты. Некоторые плагины усложняют загрузку страницы, поэтому следует избавиться от тех, которые вы не используете. Код плагина также увеличивает общий объем страницы, при запросе пользователя он подгружается со всеми остальными файлами. Удалите все, что не используется: виджеты, плагины и прочее.
2
Соединяйте CSS и JavaScript. Если компоненты CSS будут находиться в одном файле, будет появляться меньше HTTP-запросов. То же самое касается JS: если данные файлы будут загружаться единоразово, это увеличит скорость загрузки всей страницы.
3
Обращайте внимание на формат изображений. Он тоже имеет значение для веса страницы. Для фотографий предпочтительнее использовать JPEG, другие файлы картинок следует использовать в формате PNG.
4
Контролируйте размеры картинок. Слишком крупные картинки прибавляют странице вес. Старайтесь ограничиться размером исходя из блока, в котором картинка размещена, — не следует выходить за рамки. Если блок рассчитан на картинку в 500 пикселей, то норму лучше не превышать.
5
Сжимайте картинки. В начале статьи обсуждалось сжатие текстового контента посредством Gzip. Ho так как вес странице прибавляют в основном изображения, стоит этому уделить отдельное внимание. Также используйте кэширование картинок. Для популярных CMS, есть специальные плагины:
Плагины для сжатия изображений WordPress
6
Не используйте шрифты, в которых нет необходимости. Постарайтесь свести к минимуму красивые и тяжелые шрифтовые гарнитуры. Они увеличивают размер страниц, влияют на скорость загрузки. Использование нескольких стилизованных шрифтов одновременно также раздувает вес страницы.
7
Проанализируйте кнопки шейров и лайков. Если данные кнопки не сильно нужны на веб-сайте, не стоит их ставить «просто чтобы были». Это такой же фрагмент кода на странице, который загружается с остальными файлами и тормозит процесс.
8
Оптимизируйте эффекты. Лучше использовать CSS3 эффекты. Они более оптимальны для размера веб-страницы и позволяет отказаться от коллажей из картинок или внедрения фрагментов в JavaScript.
9
Пользуйтесь векторной графикой. Отдавайте предпочтение графике, которую вы сможете разметить через язык разметки SVG. Векторные картинки намного легче растровых, кроме того, они не теряют в качестве при масштабировании.

Заключение

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

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

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

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

Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

5 из 5 на основе 2 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

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

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

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

Я хочу больше лимитов