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

11691 4

Прочитать позже

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ

Инструкцию одобрил
Tech Head of SEO в TRINET.Group

Рамазан Миндубаев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#1

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 и установите подходящий плагин. Далее настройте плагин по внутренней инструкции и активируйте его.

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

#2

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

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

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

<ifmodule mod_expires.c>
ExpiresActive on
<filesmatch ".(jpg|jpeg|gif|png|ico|svg)$">
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

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

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

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

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

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

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

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

Соединяйте CSS и JavaScript. Если компоненты CSS будут находиться в одном файле, будет появляться меньше HTTP-запросов. То же самое касается JS: если данные файлы будут загружаться единоразово, это увеличит скорость загрузки всей страницы.

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

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

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

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

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

Оптимизируйте эффекты. Лучше использовать CSS3 эффекты. Они более оптимальны для размера веб-страницы и позволяет отказаться от коллажей из картинок или внедрения фрагментов в JavaScript.

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

Заключение

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

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

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

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

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

Начать работу со «Списком задач»

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

Получить бесплатный доступ на 7 дней

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

4. 9 из 5 на основе 8 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Denys Kondak

Как правильно оформить карточку товара в интернет-магазине

How-to

Denys Kondak

Как провести анализ логов сайта

How-to

Denys Kondak

Как проверить сайт на XSS-уязвимости

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

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

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

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

Отменить

Размер шрифта и масштаб страниц — увеличьте размер веб-страниц

Наладьте Firefox

Очистить Firefox

• Как это работает?

• Загрузить свежую копию

Управление масштабом позволяют увеличить или уменьшить либо размер целой веб-страницы либо просто размер всего текста в целях улучшения читабельности. Мы объясним, как это работает.

• 1 Увеличение и уменьшение масштаба веб-сайта
• 2 Изменение масштабирования пальцами
• 3 Как изменить только размер текста
• 4 Как установить масштаб по умолчанию для всех сайтов
• 5 Установка минимального размера шрифта

Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.

1. Щёлкните по кнопке меню с правой стороны. Откроется меню Firefox и внизу вы увидите управление масштабом.

2. Используйте кнопку + для увеличения масштаба и кнопку — для его уменьшения. Число в середине отображает текущий уровень масштабирования — щёлкните по нему, чтобы сбросить масштаб на на уровень масштабирования по умолчанию. Вы также можете видеть текущий уровень масштабирования в адресной строке:

Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая commandCtrl, нажмите &#43 для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.

Уровень масштабирования сохраняется для каждого домена, даже после закрытия Firefox. Например, все страницы на support.mozilla.org отображаются с одинаковыми настройками масштабирования, но он отличается от настроек масштабирования страниц на blog.mozilla.org.

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

Щипковое действие в настоящее время поддерживается в Windows через сенсорный экран и высокоточные тачпады, на Mac через тачпады и в Linux через сенсорные экраны. Тачпады Linux в настоящее время не поддерживаются, и ожидается, что поддержка будет добавлена в будущем.

Вместо того, чтобы изменять масштаб всей страницы, вы можете просто изменить размер текста.

1. Нажмите на клавишу Alt для временного переключения в традиционные меню Firefox. На панели меню в верхней части экрана щёлкните Вид, затем выберите подменю Масштаб.
2. Выберите Только текст, что заставит Firefox изменить размер текста, а не изображений.

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

1. На Панели меню в верхней части экрана щёлкните Firefox и выберите Настройки.
   Нажмите кнопку и выберите Настройки.Нажмите кнопку и выберите Настройки.

2. В панели Основные перейдите к разделу Язык и внешний вид.

3. Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.
   • Чтобы установить уровень масштабирования только для текста, установите флажок Только текст.
4. Закройте страницу «about:preferences». Любые внесённые изменения будут сохранены автоматически.

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

1. На Панели меню в верхней части экрана щёлкните Firefox и выберите Настройки.
   Нажмите кнопку и выберите Настройки.Нажмите кнопку и выберите Настройки.

2. В панели Основные перейдите к разделу Язык и внешний вид.
3. Под Шрифты и цветаШрифты щёлкните по кнопке Дополнительно….

4. В выпадающем меню Наименьший размер шрифта, выберите минимальный размер в пикселях, в котором должен отображаться весь текст.
5. Щёлкните OK, чтобы сохранить изменения.

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

Поделитесь этой статьёй: http://mzl.la/14xMZ1d

Эти прекрасные люди помогли написать эту статью:

Unghost, mrDez, Mr.Erbutw, Harry, Anticisco Freeman, Valery Ledovskoy, SwanMr.pound, Victor Bychek

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

Подробнее

Как уменьшить вес страницы на вашем веб-сайте [Краткое руководство]

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

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

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

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

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

Что такое размер страницы?

«Размер страницы» — также называемый весом страницы — относится к общему размеру конкретной веб-страницы.

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

Какой размер подходит для веб-страницы?

Чтобы помочь вам оценить вес вашей страницы, мы изучили средний размер веб-страницы (как для настольных компьютеров, так и для мобильных устройств) в период с 1 февраля 2020 г. по 1 марта 2020 г.:

Размер изображения

В 2020 году средняя веб-страница для настольных компьютеров весила 2080 КБ , а средняя мобильная веб-страница весила 1885 КБ . средняя мобильная веб-страница весила 1354 КБ.

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

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

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

Но в целом нужно стремиться к при или ниже среднего.

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

Возьмем, к примеру, Amazon — с помощью Google PageSpeed ​​Insights я провел поиск на Amazon.com и увидел, что они набрали ничтожные 51% из 100% производительности страницы:

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

Однако, если вы не уверены, может ли вес вашей страницы непропорционально снизить общее качество страницы, попробуйте ввести свой собственный веб-сайт в Google PageSpeed ​​Insights, чтобы оценить общую производительность.

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

5 советов по уменьшению размера страницы

1. Изменение размера и сжатие изображений

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

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

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

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

Если вы ищете инструмент для сжатия, вот некоторые из наших фаворитов:

• Compressor.io
• Compressjpeg.com
• Jpegmini.com

Если вы являетесь пользователем HubSpot, вам повезло: COS HubSpot поддерживает автоматическое изменение размера и сжатие изображений.

«Если пользователь загружает изображение размером 5000 x 5000, но отображает его на веб-сайте только как 500 x 500, то использование автоматического изменения размера изображения поможет сократить время загрузки браузера. С другой стороны, сжатие изображения , уменьшает размер файла, сохраняя при этом качество загруженного изображения», — объясняет Мэгги Химба из HubSpot.

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

2. Используйте спрайты CSS

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

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

Введите спрайты CSS.

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

Для пояснения ниже приведено более наглядное объяснение. Пример A включает отдельные файлы изображений для каждой из иконок браузера общим размером 70,7 КБ. Пример B использует спрайты CSS — одно изображение, которое использует CSS для отображения частей этого изображения — для отображения одной и той же точной информации. Общий размер этих изображений меньше половины размера примера A.

Источник: Tutorial Republic

3. Удалите ненужные пользовательские шрифты

Пользовательские шрифты — это весело.

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

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

Как пишет Джошуа Стоппер, ведущий разработчик Wholegrain Digital: «Возможно, самое простое изменение, которое можно сделать и которое не имеет недостатков, — это преобразование [настраиваемого] шрифта в самый современный и эффективный формат, доступный в браузерах, WOFF2.. … в нашем случае мы добились сокращения на 60 %, просто загрузив файл WOFF2 поверх TTF».

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

4. Минимизация ресурсов

Можно ли уменьшить один из ваших ресурсов путем минимизации?

«Минификация — это процесс удаления ненужных или избыточных данных, не влияющий на то, как ресурс обрабатывается браузером — например, комментарии и форматирование кода, удаление неиспользуемого кода, использование более коротких имен переменных и функций и т. д.», — объясняют разработчики Google. .

Согласно Google, вот как вы должны подходить к минимизации ваших ресурсов:

HTML

Создайте оптимизированную версию HTML-кода с помощью инструмента PageSpeed ​​Insightstool. Используйте этот анализ, чтобы запустить HTML-страницу и просмотреть правило «Минифицировать HTML». Наконец, нажмите «Просмотреть оптимизированный контент», чтобы получить доступ к уменьшенному HTML-коду.

CSS

Ознакомьтесь со следующими инструментами:

• Компрессор YUI
• cssmin. js

JavaScript

Ознакомьтесь со следующими инструментами:

• Компилятор закрытия
• JSMin
• Компрессор YUI

5. Используйте сеть доставки контента (CDN)

Под сетью доставки контента понимается «взаимосвязанная система кэш-серверов, которые используют географическую близость в качестве критерия для доставки веб-контента», согласно TechTarget.

Что это значит? И почему вас это должно волновать?

Допустим, все элементы вашего веб-сайта хранятся в Бостоне, штат Массачусетс. Это отличная новость для жителей Бостона или любого другого жителя Соединенных Штатов, которые пытаются получить доступ к страницам вашего сайта. Но как насчет того верного посетителя, который проделал весь путь в Лондоне? Вполне вероятно, что им потребуется значительно больше времени для загрузки ваших страниц только из-за того, где находится ваш сервер.

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

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

Готовы к взвешиванию?

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

А если вам нужен более подробный отчет об общей производительности вашего веб-сайта, ознакомьтесь с обновленным Web Grader от HubSpot. Вы получите бесплатный персонализированный отчет, который оценивает ваш сайт по ключевым показателям, включая производительность, мобильную готовность, SEO и безопасность.

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

10790

. 0003

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

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

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

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

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

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

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

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

На увеличение размера веб-страницы влияют несколько факторов:

• HTML;
• УСС;
• Java-скрипт;
• изображения;
• шрифты;
• видео;
• объявления.

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

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

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

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

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

#1

Gzip

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

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

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

Чтобы включить Gzip в WordPress CMS, просто скачайте и установите этот плагин. Вы можете найти его в разделе «Добавить плагины»:

Наиболее часто используемые плагины для этих целей:

• Проверить и включить сжатие GZIP;
• Скорость сжатия GZip Ninja;
• Мгновенное сжатие Gzip;
• Сжатие WordPress Gzip;
• Force gzip и другие.

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

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

#2

Включить кэширование браузера

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

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

 
ExpiresActive on

ExpiresDefault "доступ плюс 1 месяц"

 

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

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

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

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

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

Дополнительные рекомендации

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

Объедините CSS и JavaScript. Если компоненты CSS находятся в одном файле, HTTP-запросов будет меньше. То же самое и с JS: если эти файлы будут загружены одновременно, это увеличит скорость загрузки всей страницы.

Обратите внимание на формат изображения. Это также имеет значение для веса страницы. Формат JPEG хорош для фотографий, в то время как другие файлы изображений должны быть в формате PNG.

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

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

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

Проанализируйте кнопки «Поделиться» и «Нравится». Если эти кнопки на сайте действительно не нужны, не оставляйте их. Это тот же фрагмент кода на странице, который загружается вместе с остальными файлами и замедляет скорость загрузки.

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

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

Заключение

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

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

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

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

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

Ускорьте рост вашего поискового маркетинга с Serpstat!

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

Набор инструментов для сокращения времени на SEO-задачи.

Получить бесплатную 7-дневную пробную версию

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

Статью уже оценили в среднем 1 человек 5 из 5

Нашли ошибку? Выберите его и нажмите Ctrl + Enter, чтобы сообщить нам

Рекомендованные посты

Как сделать

Денис Кондак

Какие страницы нужно закрыть от индексации в Google

Как сделать

Денис Кондак

30-9003 Как сделать резервную копию и восстановить сайт

Денис Кондак

Какая информация должна быть на сайте интернет-магазина

Кейсы, лайфхаки, исследования, полезные статьи

Нет времени следить за новостями? Не беспокойся! Наш редактор подберет статьи, которые обязательно помогут вам в работе.

This entry was posted in Популярное