Настройка идеальной критической последовательности рендеринга является одним из наиболее важных аспектов формирования быстрого отображения веб-страниц. Команда Google PageSpeed уже несколько лет проливает свет на эту концепцию и считает ее одним из ключевых факторов скорости страницы. А когда говорят эти специалисты, то их следует слушать.
Настройка критической последовательности рендеринга в основном означает, что вы сначала загружаете самые важные визуальные части вашего сайта, вместо того чтобы загружать все сразу. Обычно это значит, что важная информация "первого экрана" должна загружаться первой. Таким образом, посетитель получает мгновенное представление о важном контенте вашего сайта и может сразу же начать его использовать, не дожидаясь загрузки остального менее важного контента. Это дает посетителям ощущение "мгновенной загрузки страницы".
Что такое "контент первого экрана"?
Контент первого экрана — это контент, который посетитель видит на дисплее своего компьютера сразу же после загрузки веб-странице без необходимости прокручивать экран вниз. Для большинства сайтов — это логотип, ссылки навигации, текстовая информация и одна-две фотографии.
Важность "контент первого экрана"
Если сосредоточиться на загрузке "контента первого экрана", то можно сделать так, что страница с сотнями файлов CSS и Javascript будет загружаться менее чем за секунду. Конечно, браузер все равно в конечном итоге будет должен загрузить эти сотни файлов (что, кстати говоря, многовато), но начальный вид страницы с контентом первого экрана будет виден вашим посетителям практически мгновенно. Вот почему настройка критической последовательности рендеринга важна практически для любого сайта, особенно для больших сайтов с большим количеством загружаемых файлов.
Последовательность рендеринга страницы в браузере
Прежде чем мы узнаем, как настроить критическую последовательность рендеринга, мы должны узнать, как браузеры отображают типичную веб-страницу с разметкой HTML, текстовым содержимым, фотографиями, файлами CSS и файлами Javascript. Вот как браузер отображает такую страницу:
- Браузер читает и анализирует HTML разметку, чтобы узнать, как отобразить страницу.
- Браузер обнаруживает, что на странице есть текстовое содержимое и фотография, однако, чтобы отобразить этот контент целостно, браузеру сначала нужно загрузить стили CSS и файлы Javascript.
- Браузер начинает загружать эти файлы CSS и Javascript друг за другом, чтобы проанализировать их код и увидеть, что они приказывают делать.
- После того как эти файлы загружены. браузер загружает фотографию, после чего завершает загрузку и показывает посетителю полностью загруженную страницу.
Как вы можете видеть, файлы CSS и Javascript могут стать ключевым фактором, замедляющим процесс рендеринга вашей страницы, особенно если у вас их больше одного. Также это то место, где можно добиться самого значительного улучшения в скорости загрузки страницы, и именно поэтому мы сосредоточимся на рендеринге этих файлов.
Как задать идеальную последовательность рендеринга?
Чтобы ускорить вывод контента первого экрана, мы можем предпринять определенные действия. Для этого нужно:
- Перевести в режим отложенной или асинхронной загрузки файлы JavaScript с низким приоритетом
- Перевести в режим отложенной загрузки файлы CSS
- Разместить код CSS в теге style в заголовке head вместо вызова .css файлов
- Встроить небольшие скрипты JavaScript в код страницы
- Уменьшить или встроить в код функциональные изображения
- Подключить фотографии в режиме "ленивой загрузки"
- Сжать файлы CSS, JavaScript, а также PNG, GIF и JPG
- Удалить или минимизировать кнопки социальных сетей
Последний пункт не является обязательным. Если вам действительно нужны кнопки социальных сетей, их можно не удалять, однако они могут значительно замедлить загрузку страниц вашего сайта.
Проанализируйте свой сайт
Чтобы установить наилучшую критическую последовательность рендеринга для своего сайта, вам сначала нужно проанализировать его страницы. Зайдите на ключевую страницу (это страница, которая наиболее часто используется вашими посетителями) и задайте себе такой вопрос: какие файлы необходимы, чтобы загрузился только контент первого экрана для этой страницы?
Необходимый контент
Следует помнить, что у каждого сайта свой контент первого экрана. Тем не менее, у большинства сайтов — это элементы, необходимые для отображения содержимого первого экрана базовой страницы:
- HTML страница
- CSS для заголовка и контента первого экрана
- Файл логотипа
- Текстовый контент
- Фотографии первого экрана
Ненужный контент
Обычно, все, что перечислено в предыдущем пункте достаточно, чтобы обеспечить быстрый, но вполне функциональный начальный вид вашей страницы. Имейте в виду, что, кроме логотипа, никогда не следует в дизайне сайта использовать изображения. Только стили CSS. Так как, вполне очевидно, что если в элементах дизайна сайта используется много изображений (что, кстати, давно не рекомендуется), то их также нужно загрузить.
Теперь, что касается контента первого экрана, то для большинства сайтов не требуется:
- Большинство скриптов Javascript
- CSS, не участвующий в формирований стилей контента первого экрана
- Рекламные материалы
- Фотографии и картинки, продолжающие контент первого экрана
- Социальные кнопки
- Любой другой вид скриптов, функций или дополнений к вашему сайту
При необходимости все эти элементы можно подгрузить после того, как будет загружен контент первоначальной важности.
Экспериментируйте и тестируйте
Всякий раз, внося изменения на своем сайте, связанные с вопросами, которые были затронуты в этой статье, не забывайте проверять, как эти изменения повлияли на скорость загрузки вашего сайта. И при необходимости делайте правильные выводы.
