Как улучшить скорость загрузки страниц статических HTML-сайтов?

HTML — это основа Интернета, и веб-серверы отправляют HTML-страницы во внешний интерфейс браузера. Такие браузеры, как Chrome, интерпретируют разметку HTML и отображают содержимое страницы в удобочитаемой форме. Эта концепция одинакова для сайтов, использующих PHP с системами управления контентом, такими как WordPress. Однако в наши дни создания веб-сайта недостаточно. Вы должны оптимизировать свой сайт для быстрой загрузки, чтобы получить хороший рейтинг в поисковых системах и удобство для пользователей. В этой статье мы рассмотрим, как ускорить работу вашего статического HTML-сайта и улучшить возможности продвижения вашего сайта на вершину результатов поиска Google.



Перед тем, как мы начнем — статические HTML-сайты

Помните, что в этой статье мы говорим о статических HTML-сайтах, которые вы создаете сами. Вы можете создавать HTML-сайты с собственным дизайном или использовать готовые фреймворки, такие как Bootstrap. В общем, вы можете загрузить HTML-страницы и другие ресурсы (изображения / CSS / JS) на свой сервер и получить доступ к сайту из браузера. Для этого вам не нужны никакие другие сторонние инструменты, кроме доменного имени и учетной записи хостинга. Кроме того, вы можете использовать сторонние инструменты, такие как Mobirise, для создания статических HTML-страниц и загрузки через FTP.

Мы не обсуждаем следующие случаи:

  • Системы управления контентом, такие как WordPress — WordPress предлагает полный пакет оптимизации для повышения скорости загрузки вашего сайта. Ознакомьтесь с нашей статьей об оптимизации времени загрузки страниц сайтов WordPress.
  • Инструменты для создания веб-сайтов, такие как Weebly, Wix и т. Д. — эти платформы не являются решениями с открытым исходным кодом, что по сути означает, что у вас есть ограниченные возможности для оптимизации внутри платформы. Вы можете использовать некоторые из вариантов, предложенных в этой статье. Однако вы не можете оптимизировать такие вещи, как объединение CSS / JS, удаление ресурсов, блокирующих рендеринг, и т. Д., Поскольку вы не можете получить доступ к серверу.

Проверьте скорость страницы в инструменте Google PageSpeed ​​Insights

Теперь, когда контекст ясен, мы продолжим. Лучший способ начать оптимизацию — сначала понять основные проблемы, существующие на вашем сайте. Чтобы найти проблемы, связанные со скоростью, перейдите в инструменты Google PageSpeed ​​Insight и проверьте рейтинг своего веб-сайта. Сначала не беспокойтесь о счете, прокрутите вниз и проверьте раздел возможностей для улучшения результата.

Предложения Google PageSpeed ​​Insights
Предложения Google PageSpeed ​​Insights

Обратите внимание, что возможности, показанные в инструменте PageSpeed ​​Insights, НЕ повлияют напрямую на оценку. Как правило, оценка будет низкой, если у вас есть проблемы в верхней части (разделе заголовка) вашего веб-сайта. Он включает в себя ресурсы блокировки рендеринга, предварительную загрузку шрифтов и изображений, кумулятивный сдвиг макета со сторонним кодом и т. Д. Таким образом, вы можете комбинировать возможности и общие правила для повышения скорости загрузки страниц ваших статических HTML-сайтов.

Как улучшить скорость загрузки страниц статических HTML-сайтов?

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

1. Объединение и минимизация файлов CSS и JS

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

  • Первое, что вам нужно, это удалить ненужные пробелы и комментарии в ваших файлах CSS / JS / HTML. Это называется минификацией, которая уменьшает размер файла и улучшает скорость загрузки страницы. Используйте эти инструменты минификации CSS, JS и HTML, чтобы удалить ненужный беспорядок из файлов. Помните, что минифицированные файлы CSS и JS будут иметь расширения, такие как .min.css и .min.js.
  • Обратитесь к своей хостинговой компании и включите сжатие GZIP для сжатия содержимого HTML. Это уменьшит размер файла, передаваемого браузеру, и значительно повысит скорость загрузки страницы. Вы можете проверить, использует ли ваш сайт сжатие GZIP, с помощью этого инструмента и сэкономить на размере.
  • Объединение файлов CSS и JS поможет вам уменьшить количество HTTP-запросов к вашему серверу. Следовательно, вы можете комбинировать файлы CSS вместо использования стилей в разных таблицах стилей. Однако этого не требуется, если ваш хостинг-сервер поддерживает протокол HTTP / 2, который поддерживает параллельные HTTP-запросы. Кроме того, объединение файлов JS может нарушить макет, если вы не знаете, как правильно объединить код внутри файла.

2. Удаление ресурсов, блокирующих рендеринг

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

  • Перейдите в инструмент Google PageSpeed ​​Insights и проверьте свой веб-сайт на предмет измерения скорости загрузки страницы.
  • Если у вас есть предупреждения о ресурсах, блокирующих рендеринг, запишите имя файла.
  • Переместите файл из раздела верхнего колонтитула в область нижнего колонтитула.

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

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

Два вышеуказанных варианта носят более технический характер, что может быть затруднительно для вас. Чтобы не тратить время и не нарушать макет вашего сайта, лучшим решением является использование сети доставки контента (CDN), такой как Cloudflare StackPath.

  • Вы можете комбинировать и минимизировать файлы, используя сеть CDN, вместо того, чтобы делать это на своем сервере.
  • Увеличьте скорость, особенно если вы обслуживаете контент для международных пользователей.
  • Повысьте безопасность, блокируя автоматических ботов и используя защиту от атак грубой силы и DDoS-атак.

Базовая CDN Cloudflare бесплатна, чего достаточно для большинства статических HTML-сайтов. Вы можете объединять и уменьшать файлы одним щелчком мыши и тестировать, как это влияет на скорость загрузки вашей страницы, в инструменте Google PageSpeed ​​Insights. Если вы используете такие фреймворки, как Bootstrap, обязательно включите ресурс CDN вместо обслуживания исходного файла с вашего сервера.

4. Избегайте сторонних кодов.

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

  • Разместите рекламные объявления, такие как Google AdSense, под видимой областью при загрузке страницы. К сожалению, это напрямую отразится на вашем доходе за счет снижения CTR и количества просмотров страниц.
  • Вставьте Google Analytics или любой другой код отслеживания после основного раздела.
  • Избегайте вставки кодов в заголовок для публикации в социальных сетях.
  • Если вы используете шрифты Google, убедитесь, что вы используете их в упрощенном виде с меньшим весом и семействами шрифтов. Это поможет вам уменьшить количество файлов и быстрее получать их с сервера Google.

5. Предварительная загрузка шрифтов и изображений

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

<link rel="preload" href="https://www.webnots.com/how-to-improve-page-loading-speed-of-static-html-websites/font-file" as="font" crossorigin="anonymous">
<link rel="preload" as="image" href="https://www.webnots.com/how-to-improve-page-loading-speed-of-static-html-websites/image-file">

Это очень полезно, особенно при использовании значков с отличным шрифтом на вашем сайте.

6. Изображения — сжатие и использование формата следующего поколения

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

  • Некоторые веб-серверы имеют возможность сжимать изображения при загрузке. Уточните у своей хостинговой компании, предлагают ли они какие-либо инструменты для этой цели.
  • В противном случае используйте инструменты сжатия изображений, чтобы уменьшить размер изображений без потери качества.
  • Кроме того, вы можете преобразовать формат изображения в JPEG-2000 или JPEG XR. Как правило, серверы VPS имеют возможность размещать изображения в формате WebP, который вы можете подтвердить у своей хостинговой компании. В этом случае преобразование не требуется, так как оно автоматически выполняется на стороне сервера для каждого изображения. Использование изображений в WebP, JPEG-2000 или JPEG XR поможет вам исправить проблему с изображениями в формате следующего поколения в инструменте Google PageSpeed ​​Insights.

7. Используйте критический CSS.

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

  • Перейти к критический генератор CSS инструмент и укажите URL-адрес вашего веб-сайта.
  • Создайте критический CSS и скопируйте контент.
  • Разместите скопированные стили между тегами

    внутри раздела заголовка вашего HTML-сайта.

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *