Html оптимизация: Как уменьшить размер HTML и оптимизировать код страниц

Содержание

Оптимизация JS и CSS | Корректная загрузка ресурсов сайта — SEO на vc.ru

{«id»:13825,»url»:»\/distributions\/13825\/click?bit=1&hash=8e03361b0c4228b6923002011a9b06f332b287403d899152860832a5a435e329″,»title»:»\u0421\u043b\u043e\u0432\u0430\u0440\u044c \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u0430\u043d\u0438\u0438″,»buttonText»:»\u0427\u0438\u0442\u0430\u0442\u044c»,»imageUuid»:»f92ce50e-3e4f-5f55-b504-3986c3bb7cb7″,»isPaidAndBannersEnabled»:false}

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

11 766
просмотров

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

На скриншоте перечень мер оптимизации по результатам теста LightHouse. 70% — касаются js и css.

Несмотря на то, что наиболее сильное влияние загрузка js и css оказывает на показатели Time to Interactive и Total Blocking Time. Для целей SEO, в первую очередь, важна отрисовка первого экрана. Чтобы не останавливаться на этом, ниже даю небольшой чек-лист для оптимизации FCP:

  • Используйте правильную очередность загрузки ресурсов.
  • Подключайте js и css по типам страниц, чтобы время загрузки не уходило на неиспользуемые файлы.
  • Откажитесь от запросов @import url(«style.css»).
  • Стили, влияющие на FCP расположите inline внутри html-странички.
  • Минимизируйте количество js кода для отрисовки первого экрана.

Рекомендации к JS и CSS по LightHouse

— Устраните ресурсы, блокирующие основной поток

Такие ресурсы — это <script> (без defer и async) и стили <link rel=»stylesheet»>, подключаемые в <head>. Как правило, наибольшую нагрузку вызывают скрипты, подключенные через внешний ресурс, а также js сервисов веб-аналитики.

Отсюда вытекают 2 рекомендации

1. Все ресурсы нужно хранить локально. Внешний запрос может осуществляться слишком долго.
<link href=»/templatev1.css» type=»text/css» rel=»stylesheet»>

Когда вы скопируете код и сохраните его локально. У вас появятся возможности по дополнительной оптимизации. Вы сможете:

Сокращать файлы — удалять части кода, невостребованные для вашего сайта.

Минифицировать — сжимать файлы.

Комбинировать файлы — объединять несколько небольших файлов.

2. Всем ресурсам, не связанным с отображением элементов первого экрана, нужно обеспечивать асинхронную загрузку. <script async=»» src=»/analytics.js»></script>

Подключение скрипта в <head> — это и есть блокировка загрузки страницы. Если вы посмотрите на свой сайт внимательно, то поймёте, что 90% всего js используется ниже первого экрана. А если это не так, то следует к этому прийти.

Располагайте скрипты в <body> и указывайте атрибуты async или defer для асинхронной загрузки:

<!DOCTYPE html>
<html>
<head>
<link href=»style.css» rel=»stylesheet»>
</head>
<body>
<div><img src=»awesome-photo.jpg»></div>
<script src=»app.js» async></script>
</body>
</html>

Например, jQuery часто не нужно загружать сразу. Однако, на большинстве сайтов вы увидите, что jQuery стоит в <head> первым js ресурсом. Убрать запрос к jQuery из <head> и вызов его в <body> по необходимости будет правильным решением.

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

Как оптимизировать сайты с помощью Lighthouse — Блог HTML Academy

Lighthouse — часть Chrome DevTools

  • Обзор DevTools
  • Вкладка Elements
  • Вкладки Console, Sources, Network

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

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

Давайте разберём, как с помощью Lighthouse проверить качество сайта и повысить его производительность. Мы не будем углубляться в алгоритмы работы инструмента и принципы подсчёта внутренних метрик: начинающим веб-разработчикам это и не нужно. Однако знать, как работает инструмент, и уметь использовать его в своих проектах — очень важный навык.

Как запустить Lighthouse

Запустить инструмент можно тремя способами:

С помощью Node CLI. Для этого установите в свой проект пакет Lighthouse с помощью команды npm install -g lighthouse.

Через расширение для браузера Chrome или Firefox. Установите расширение, затем откройте свой сайт и запустите проверку с помощью кнопки Generate report.

Пример запуска Lighthouse из браузера Firefox

С помощью инструментов разработчика — Chrome DevTools. Чтобы запустить проверку, откройте инструменты разработчика, переключитесь на вкладку Lighthouse и нажмите на кнопку Generate report.

Мы разберем основы работы с Lighthouse на примере Chrome DevTools. Этого вполне достаточно, чтобы понять возможности инструмента. Для продвинутого использования можно установить npm-пакет и работать с Lighthouse через консоль. Этот способ позволяет более гибко настраивать инструмент и запускать его в автоматическом режиме.

Обзор Chrome DevTools. Решаем основные задачи веб-разработчика

Какие параметры оценивает Lighthouse

Lighthouse анализирует четыре показателя: производительность, доступность, SEO и лучшие практики. Для прогрессивных веб-приложений добавляется пятый параметр — PWA.

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

Progressive Web App — Прогрессивные web-приложения. Проверяет, регистрирует ли сайт Service Workers, работает ли офлайн, возвращает ошибку 200.

Best Practices — лучшие практики. Проверяет безопасность сайта и использование современных стандартов веб-разработки. Оценка зависит от того, используется ли на сайте HTTPS, устаревшие API, правильная кодировка и другие параметры.

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

SEO — оценивает соответствие страницы советам Google по поисковой оптимизации. Здесь проверяется использование метатегов, доступ к индексации и переобходу роботами, наличие атрибутов alt у изображений, адаптированность к мобильным экранам и другие характеристики.

Каждый параметр оценивается по 100-балльной шкале: чем выше, тем лучше. У каждой группы оценок также есть свой цвет. Зелёный выставляется при 90-100 баллах, он показывает, что с сайтом всё хорошо. Оранжевый можно получить при 50-89 баллах. То есть с сайтом всё хорошо, но можно сделать ещё лучше. Если оценка ниже 49 баллов, она становится красной. Это означает, что над производительностью стоит поработать.

Большой плюс Lighthouse в том, что проверять качество сайта можно как на десктопной, так и на мобильной версии.

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

  • запуске A/B-тестов;
  • использовании на сайте анимаций, которые отображаются рандомным образом;
  • нестабильной сети;
  • использовании расширений для браузера;
  • запуске антивирусных программ;
  • использовании устройств с разной производительностью.

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

Результаты проверки десктопной версии сайта

Как улучшить производительность сайта с помощью Lighthouse

Lighthouse не только показывает оценку по каждому из четырёх критериев, но и даёт конкретные рекомендации: что можно улучшить.

Например, оценка производительности складывается из шести метрик:

  • First Contentful Paint — измеряет время, которое понадобится браузеру для отображения первой части содержимого DOM.
  • Speed Index — проверяет скорость визуального отображения контента во время загрузки страницы.
  • Largest Contentful Paint — измеряет время загрузки самого большого элемента в области просмотра.
  • Time to Interactive — проверяет, за какое время страница станет полностью интерактивной.
  • Total Blocking Time — смотрит, в течение какого времени происходит блокировка страницы в ответ на действия пользователя: клики мышью или нажатия клавиш.
  • Cumulative Layout Shift — проверяет визуальную стабильность: смещение макета из-за асинхронной загрузки ресурсов.

Показатели метрик — на этом сайте всё хорошо

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

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

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

Если такого описания недостаточно и вы всё равно не понимаете, что нужно делать — нажимайте на ссылку Learn more. В открывшемся окне появится более подробная информация и руководство для разработчиков. Вся информация на английском языке, но даже если вы его не знаете, Google Переводчик поможет вам разобраться.

В нашем случае Lighthouse предлагает использовать современные форматы изображений: WebP и AVIF, так как они весят меньше, чем PNG и JPEG. Мы также можем уменьшить размер изображения с 567 Кб до 500 Кб. На первый взгляд может показаться, что это мелочи. Но если мы оптимизируем изображения на сайте, то браузерам понадобится меньше времени на их загрузку.

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

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

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

Базовые рекомендации для повышения производительности:

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

Можно ли получить 100 баллов в Lighthouse?

Максимальная оценка вполне достижима. В сети есть проект Зака Лезермана — рейтинг сайтов с максимальными баллами Lighthouse. На момент подготовки этой статьи в нем было 133 ресурса, набравших сто баллов по каждому из четырёх критериев.

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

Какие еще есть инструменты для проверки производительности?

Lighthouse далеко не единственный инструмент для оптимизации скорости сайтов. Есть и другие, не менее популярные сервисы. Например, WebPageTest, GTmetrix и Pingdom Tools. Или даже PageSpeed Insights, который использует для проверки алгоритмы Lighthouse, но работает только с сайтами, размещенными в Интернете. Протестировать сайты на локальном сервере с его помощью не получится.

У каждого из таких инструментов есть свои особенности. Например, GTmetrix и Pingdom Tools дают более развёрнутые результаты проверки.

Так выглядят оценки и результаты проверки в WebPageTest

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

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

Скорость страницы: как оценить и улучшить скорость страницы

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

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

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

Включить сжатие

Используйте Gzip, программное приложение для сжатия файлов, чтобы уменьшить размер файлов CSS, HTML и JavaScript, размер которых превышает 150 байт.

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

Минимизировать CSS, JavaScript и HTML

Оптимизировав код (в том числе удалив пробелы, запятые и другие ненужные символы), вы можете значительно увеличить скорость страницы. Также удалите комментарии к коду, форматирование и неиспользуемый код. Google рекомендует использовать CSSNano и UglifyJS.

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

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

 example.com -> www.example.com -> m.example.com -> m.example.com/home

…каждое из этих двух дополнительных перенаправлений замедляет загрузку страницы.

Удалить код JavaScript, блокирующий рендеринг

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

Google рекомендует избегать и минимизировать использование блокирующего JavaScript.

Использование кэширования браузера

Браузеры кэшируют большое количество информации (таблицы стилей, изображения, файлы JavaScript и т. д.), поэтому, когда посетитель возвращается на ваш сайт, браузеру не нужно перезагружать всю страницу. Используйте такой инструмент, как YSlow, чтобы узнать, установлена ​​ли у вас дата истечения срока действия вашего кеша. Затем установите заголовок «expires» на то, как долго вы хотите, чтобы эта информация кэшировалась. Во многих случаях, если дизайн вашего сайта не меняется часто, год является разумным периодом времени. У Google есть дополнительная информация об использовании кэширования здесь.

Улучшить время отклика сервера

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

Использование сети распространения контента

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

Оптимизация изображений

Убедитесь, что ваши изображения не больше, чем должны быть, что они имеют правильный формат файла (PNG обычно лучше для графики с менее чем 16 цветами, а JPEG, как правило, лучше для фотографий) и что они сжаты для Интернета.

Используйте спрайты CSS для создания шаблона изображений, которые вы часто используете на своем сайте, таких как кнопки и значки. CSS-спрайты объединяют ваши изображения в одно большое изображение, которое загружается сразу (что означает меньше HTTP-запросов), а затем отображает только те разделы, которые вы хотите показать. Это означает, что вы экономите время загрузки, не заставляя пользователей ждать загрузки нескольких изображений.

web.dev

Перейти к содержимому

Введение #

  • Почему скорость имеет значение?
  • Что такое скорость?
  • Как измерить скорость?
  • Как оставаться быстрым?

CORE WEB VITALS #

  • Веб-виды
  • Пользовательские показатели производительности
  • Определение основных порогов видов веб-видов. FID)
  • Оптимизировать рисование с наибольшим содержанием
  • Оптимизировать совокупное смещение макета
  • Оптимизировать задержку первого ввода

Установите бюджеты производительности #

  • Бюджеты на эффективность 101
  • Ваш первый бюджет на производительность
  • Включите бюджет на производительность
  • . Использование Lighthouse Bot для установки бюджета производительности
  • Мониторинг производительности с помощью Lighthouse CI

Оптимизация изображений #

  • Выберите правильный формат изображения
  • Выберите правильный уровень сжатия
  • Используйте Imagemin для сжатия изображений
  • Замените анимированные GIF-файлы на видео для более быстрой загрузки страниц images
  • Используйте CDN изображений для оптимизации изображений

Отложенная загрузка изображений и видео #

  • Используйте отложенную загрузку для повышения скорости загрузки
  • Отложенная загрузка изображений
  • Отложенная загрузка видео
  • Отложенная загрузка изображений на уровне браузера для Интернета

Оптимизируйте свой JavaScript #

  • Оптимизируйте длительные задачи
  • Оптимизируйте взаимодействие с шаблоном мгновенной загрузки 6 PL 9005
  • Сокращение полезной нагрузки JavaScript с помощью разделения кода
  • Удаление неиспользуемого кода
  • Минимизация и сжатие полезной нагрузки сети
  • Предоставление современного кода современным браузерам для более быстрой загрузки страниц
  • Публикуйте, поставляйте и устанавливайте современный JavaScript для более быстрых приложений
  • Как CommonJS увеличивает ваши пакеты

Оптимизируйте доставку ресурсов #

  • Сети доставки контента (CDN)
  • Приоритизируйте ресурсы
  • Предварительно загрузите критические ресурсы для улучшения скорость загрузки
  • Заблаговременно установите сетевые подключения, чтобы улучшить воспринимаемую скорость страницы
  • Предварительная выборка ресурсов для ускорения навигации в будущем
  • Быстрое воспроизведение с предварительной загрузкой аудио и видео
  • Оптимизация времени до первого байта

Оптимизация CSS #

  • Отсрочка некритических запросов

    Оптимизация сторонних ресурсов #

    • Производительность стороннего JavaScript
    • Выявление медленного стороннего JavaScript
    • Эффективная загрузка стороннего JavaScript
    • Лучшие практики для метков и менеджеров по тегам

    Оптимизировать WebFonts #

    • Лучшие методы для шрифтов
    • Избегайте невидимого текста во время загрузки шрифтов
    • Оптимизировать WebFont Загрузка и рендеринг
    • REATE WebFont Size

      • .