Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Если какие‑то стили не нужны на странице — их надо отключить. В процессе разработки часто подключаются те стили, которые потом не используются. Например, стили для отладки или стили для подключенных скриптов, которые не используются. Не надо заставлять пользователя загружать ненужные файлы.
Загружайте стили с поддоменов, с других доменов или CDN — файлы с одного домена загружаются в ограниченное число потоков, количество этих потоков даже у самых продвинутых браузеров не более десяти. Поэтому если картинок, файлов стилей и скриптов на странице много, то некоторым из них придется ждать своей очереди. Лимит количества потоков распространяется только на домен, поэтому если CSS‑файлы будут загружаться с другого домена, то скорость загрузки возрастет за счёт параллельности.
Блокирующие отрисовку страницы стили не должны загружаться с нестабильных внешних доменов. Если используемый для загрузки внешний домен перестанет отвечать или станет отвечать с длительной задержкой, то существенно замедлится загрузка вашего сайта. Если используете внешние домены, то убедитесь, что они достаточно стабильно работают.
CSS надо сжать, минимизировать и оптимизировать. Удаление пробелов, комментариев, переносов строк, сокращение кодов цветов и другие оптимизации уменьшают размер файлов и ускоряют загрузку. При использовании сторонних библиотек — просто подключайте минимизированную версию. Для собственных скриптов используйте специальные библиотеки, сжимающие и оптимизирующие CSS, — CSSO или YUI Compressor.
Совместно используемые стили должны быть объединены в один файл. Загрузка одного большого файла осуществляется быстрее загрузки множества небольших файлов такого же размера. Выгрузка всех стилей в одном большом файле меньше грузит сервер, плюс к этому, сжатие также эффективнее работает на больших файлах.
Используйте GZIP для сжатия данных. Почти все современные браузеры могут обрабатывать сжатые в GZIP стили CSS. Оптимальный способ — предварительное сжатие используемых CSS‑файлов на максимальном (девятом) уровне компрессии и последующая отдача веб‑сервером уже сжатых файлов. Сжатие «на лету» вызывает нагрузку на процессор сервера, поэтому его на нагруженных проектах не стоит использовать.
Кешируйте CSS на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же файл: задайте соответствующие заголовки в ответе веб‑сервера (Expires или Cache-Control max-age + Last-Modified или ETag).
Сократите каскады в CSS — на «слабых» устройствах быстрее отрисовываются страницы, где для определения стиля элемента не требуется обработка многократно вложенных правил.
Тематические статьи
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Бывает так, что некоторое содержание страницы нужно не всем или не всегда, но на генерацию этого материала или для его передачи тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтенд-разработке никаких других языков не используется.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.
Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.