TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

6

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 и проверьте рейтинг своего веб-сайта. Сначала не беспокойтесь о счете, прокрутите вниз и проверьте раздел возможностей для улучшения результата.

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

Предложения 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="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="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.

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

Критический генератор CSS

Заключительные слова

Как уже упоминалось, скорость загрузки страницы вашего статического HTML-сайта зависит от рендеринга верхней области сгиба в браузере. Вы можете уменьшить количество CSS и скриптов в разделе заголовка, чтобы исправить большинство проблем и возможностей, отображаемых в инструменте Google PageSpeed ​​Insights. Лучший вариант – использовать CDN и избегать стороннего контента в разделе заголовка.

Источник записи: webnots.com
Leave A Reply

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