Оптимизация производительности веб-страницы

Прослушать эту статью

Веб-сайты обычно делятся на две части: фронтенд и бэкэнд. Мы можем понять, что фон используется для реализации функций веб-сайта, таких как: осуществление регистрации пользователей, изменение паролей, комментирование статей и так далее. А как же фронтенд? На самом деле, он и должен быть функцией производительности. Большинство факторов, влияющих на удобство доступа пользователя, связаны с оптимизацией внешних страниц сайта. Оптимизация страниц – эта статья даст общее представление об этом процессе.

Содержание статьи:

• 1. Оптимизация времени загрузки страницы
• 2. Сожмите все сжимаемые ресурсы
• 3. Оптимизация кэша сайта
• 4. Критический путь рендеринга

1. Оптимизация времени загрузки страницы

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

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

2. Сожмите все сжимаемые ресурсы

1. Код, должен быть весь сжатый.
2. Удалите ненужные картинки.
3. Используйте css3 вместо изображений.
4. Используйте изображения с более высокой степенью сжатия. Особенно гифки, некоторые форматы видео (H.264 или WebM) намного меньше, чем гифки.
5. Используйте шрифты WordArt, а не изображения.
6. Обеспечить более современные форматы изображений для пользователей с более новыми браузерами (например:WebP).
7. Растровые изображения с несколькими разрешениями для разных размеров страниц.
8. Укажите ширину и высоту для изображения, иначе может произойти обрезание.
9. Используйте HTTP/2. Например, спрайт — это большое изображение, состоящее из множества маленьких изображений, что может уменьшить количество HTTP-запросов. Однако его сложно кэшировать, и изменение маленького изображения приведет к аннулированию кэша всех маленьких изображений. HTTP/2, по ссылке можно инициировать несколько запросов, что устраняет необходимость использования спрайтов.

3. Оптимизация кеша сайта

Механизм кеширования браузера:

1. Заходите на страницу, запрашиваете различные ресурсы, и браузер проверяет, есть ли локальный кеш.
2. Если да, проверьте, не просрочен ли ресурс. Срок действия не истек, используйте кеш напрямую. Когда он истекает, делается запрос на сервер.
3. Поля заголовка etag и last-modified будут включены в отправленный запрос.
4. Сервер будет использовать Etag и last-modified, чтобы определить, недоступен ли кэшированный браузером ресурс.
5. Если ресурс все еще действителен, верните 304 код ответа, чтобы указать браузеру использовать кеш. В противном случае верните обновленный ресурс.

В соответствии с этим набором логики можно планировать кэш веб-сайта.

Как я могу уведомить браузер об обновлении ресурса, если срок действия ресурса истекает раньше?

Обычно это невозможно, потому что браузер видит, что ресурс не просрочен, и вообще не делает запрос. Но этого можно добиться, изменив URL-адрес ресурса. Поэтому вам нужно добавить номер версии или случайный тег к имени файла ресурса. Например, style.12.css. То есть не позволяйте браузеру кэшировать html-файл, иначе браузер не будет запрашивать сервер до истечения срока его действия.

4. Критический путь рендеринга

Браузер отображает веб-страницу с помощью следующих шагов:

1. Обработайте HTML-разметку и постройте DOM-дерево.
2. Обработайте разметку CSS и постройте дерево CSSOM.
3. Объедините DOM и CSSOM в дерево рендеринга.
4. Макет в соответствии с деревом рендеринга для расчета геометрической информации каждого узла.
5. Нарисуйте каждый узел на экране.

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

Css

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

Избегайте использования @import в файлах css, потому что браузер найдет и загрузит импортированный css только после того, как файл, содержащий импорт, будет загружен и скомпилирован. Рассмотрите возможность использования встроенного CSS, который не требует дополнительных запросов и не блокирует отрисовку основного контента.

Js

Java script не начнет выполняться, пока не будет построен CSSOM. Js также предотвращает построение дерева DOM. Если асинхронность не отмечена в теге.

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

С этой статьей читают:

• CSS оптимизация — 21 способ ускорить сайт
• Оптимизация JS и CSS кода сайта онлайн – подробное руководство

Спасибо, что читаешь: SEO HELPER | NICOLA.TOP