Создание быстро загружающихся HTML-страниц

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

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

Советы

Уменьшите размер страницы

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

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

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

Сократите количество файлов

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

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

Если в CSS часто используются фоновые изображения, можно сократить количество необходимых HTTP-запросов, объединив изображения в одно, известное как спрайт. Затем для фона каждый раз применяется одно и то же изображение, а координаты x/y соответствующим образом корректируются. Этот приём лучше всего подходит для элементов с ограниченными размерами и не работает во всех случаях использования фоновых изображений. Однако сокращение числа HTTP-запросов и кеширование одного изображения могут ускорить загрузку страницы.

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

В контексте этой статьи CDN — это способ уменьшить физическое расстояние между сервером и посетителем. Чем дальше посетитель находится от исходного сервера, тем дольше загружается страница. Предположим, сервер вашего сайта находится в США, а посетитель — в Индии. Для индийского посетителя страница будет загружаться намного дольше, чем для посетителя из США.

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

Дополнительная информация:

• Как работают CDN

Сократите количество DNS-запросов

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

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

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

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

В частности, обратите внимание на заголовок Last-Modified. Он позволяет эффективно кешировать страницы: с помощью этого заголовка пользовательскому агенту передаётся информация о файле, который требуется загрузить, например о времени его последнего изменения. Большинство веб-серверов автоматически добавляют заголовок Last-Modified к статическим страницам (например, .html, .css), используя дату последнего изменения, сохранённую в файловой системе. Для динамических страниц (например, .php, .aspx) это, конечно, сделать нельзя, поэтому заголовок не отправляется.

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

Дополнительная информация:

1. Условный запрос GET в HTTP для разработчиков RSS
2. HTTP 304: не изменено
3. HTTP ETag в Википедии
4. Кеширование в HTTP

Расположите компоненты страницы в оптимальном порядке

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

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

Сократите количество встроенных скриптов

Встроенные скрипты могут замедлить загрузку страницы, поскольку парсер должен исходить из того, что встроенный скрипт может изменить структуру страницы во время её обработки. Сокращение использования встроенных скриптов в целом и, в частности, сокращение использования document.write() для вывода содержимого может ускорить загрузку страницы. Используйте API DOM для изменения содержимого страницы вместо document.write().

Используйте современный CSS и корректную разметку

Современный CSS позволяет сократить объём разметки, уменьшить потребность в (разделительных) изображениях для создания макета и во многих случаях заменить изображения со стилизованным текстом — их «стоимость» намного выше, чем у аналогичного текста с CSS.

Корректная разметка имеет и другие преимущества. Во-первых, браузерам не придётся исправлять ошибки при обработке HTML (это отдельный от философского вопроса выбор: разрешать ли вариативность формата во вводе пользователя, а затем программно его «исправлять» или нормализовать либо, напротив, требовать строгого формата ввода без каких-либо послаблений).

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

Разбейте содержимое на части

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

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

Минифицируйте и сжимайте SVG-файлы

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

Минифицируйте и сжимайте изображения

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

Указывайте размеры изображений и таблиц

Если браузер может сразу определить высоту и/или ширину изображений и таблиц, он сможет отобразить веб-страницу без повторной компоновки содержимого. Это не только ускоряет отображение страницы, но и предотвращает неприятные изменения её макета после завершения загрузки. Поэтому для изображений по возможности следует задавать height и width.

Для таблиц следует использовать сочетание селектора и свойства CSS:

table-layout: fixed;

а ширину столбцов следует задавать с помощью элементов <col> и <colgroup>.

Используйте отложенную загрузку изображений

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

Чтобы включить отложенную загрузку изображения, укажите для его атрибута loading значение lazy. В этом случае изображение будет загружено только тогда, когда оно понадобится.

<img src="./images/footerlogo.jpg" loading="lazy" alt="MDN logo" />

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

Тщательно выбирайте требования к пользовательским агентам

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

В идеале минимальные требования должны учитывать современные браузеры, поддерживающие соответствующие стандарты. К ним могут относиться последние версии Firefox, Google Chrome, Opera и Safari.

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

По возможности используйте async и defer

Подготовьте скрипты JavaScript так, чтобы они могли работать с атрибутами async и defer, и по возможности используйте async, особенно если на странице есть несколько элементов script.

В этом случае страница может перестать отображаться, пока JavaScript ещё загружается. В противном случае браузер не будет отображать содержимое, расположенное после элементов script без этих атрибутов.

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

Пример структуры страницы

• <html>

  • <head>

    • <link>

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

    • <script>

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

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

  • <body>

    Видимое пользователю содержимое страницы, разбитое на небольшие части (<header>/ <main>/ <table>), которые можно отображать, не дожидаясь полной загрузки страницы.

    • <script>

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

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

См. также

• Книга: «Ускорьте свой сайт» Энди Кинга
• Изучите производительность на web.dev (2023)
• Инструменты для анализа и оптимизации производительности: инструменты Google PageSpeed и PageSpeed Insights