Иногда достижение вашего бюджета производительности — это просто вопрос лучших практик, в других случаях это требует немного больше… танцев.

В последнее время я много езжу на метро. Я имел удовольствие просматривать новостные сайты при нестабильном 3G-соединении, и это было… весело. Иногда требуется весь путь, чтобы просто пройти мимо начального пустого экрана.

Иногда требуется пройти весь путь, чтобы пройти мимо начального пустого экрана.

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

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

  1. Внедрите самые основные стили для содержимого в верхней части страницы (ATF) в ‹head› документа. Я настоятельно рекомендую попробовать criticalCSS, чтобы автоматизировать этот шаг.
  2. Переместите все теги ‹script› в конец основного текста. Пока вы это делаете, добавьте атрибут defer.
  3. Загружайте асинхронно все стили, которые вы не встроили в ‹head›, с помощью JavaScript. Вы можете подробнее прочитать здесь об этой технике.
  4. Оптимизируйте загрузку веб-шрифтов: выберите метод из Библии, который наиболее удобен для вашего случая.
  5. Если вам абсолютно необходимо включить большие изображения в ATF, рассмотрите возможность их встраивания для оптимального восприятия. Вы можете узнать как это сделать здесь.

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

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