Поддержка устаревших браузеров, как правило, накладывает ограничения на функциональность и гарантированно увеличивает стоимость разработки и сопровождения.
Кроссбраузерность, несомненно, важна. Но любые требования должны иметь под собой рациональную основу.
Многие крупные интернет-проекты (например, Google, Яндекс, YouTube, VK) или полностью отказались от поддержки устаревших версий Internet Explorer или поддерживают их лишь частично и выводят пользователям сообщения с рекомендацией обновить свой браузер. Доля пользователей устаревших IE сейчас составляет меньше 1%, поэтому такое решение является вполне обоснованным.
Если же поддержка устаревших браузеров всё же требуется, то есть две популярные методики её реализации — progressive enhancement (прогрессивное улучшение) и graceful degradation (изящная деградация). В первом случае сайт делается под устаревшие браузеры, а затем к нему добавляются современные элементы. Во втором случае — сначала делается современный сайт, а затем для старых браузеров отключаются неподдерживаемые ими функции. Оба этих подхода позволяют создавать качественные и сопровождаемые решения, так как учитывают тот факт, что не все современные функции можно заставить корректно работать в браузере, которому больше 10 лет. Тем не менее, часто встречается требование абсолютной идентичности в работе сайта на всех платформах. Как правило, это приводит к существенному урезанию функциональности сайта и к созданию трудносопровождаемых решений (программисты такой подход красноречиво называют «костылями»: это, конечно, тоже способ передвижения, но не самый эффективный и грациозный).
Тематические статьи
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтенд-разработке никаких других языков не используется.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения. На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.