Кроссбраузерность — корректная работа сайта в разных браузерах
Браузеров много, и они несколько по‑разному отображают страницы. Способность сайта корректно отображаться в разных браузерах называется кроссбраузерность.
Наиболее рациональным требованием к верстке является сохранение эстетичности отображения сайта в различных браузерах с допущением, что некоторые элементы могут отображаться немного по‑разному. Этим путём идут все крупные проекты, что легко проверить, если наложить друг на друга снимки экрана из различных браузеров.
Однако у заказчиков часто бывает требование добиться абсолютно идентичного отображения сайта во всех браузерах (с точностью до пикселя). Это достижимо, но не очень рационально, так как увеличивает стоимость разработки, а ощутимых преимуществ не даёт. Реальная конверсия большинства сайтов на самом деле слабо зависит от эстетической составляющей — гораздо большее значение имеет удобство интерфейса и качество представленной информации.
Современные сайты обычно адаптируют под актуальные на момент разработки браузеры: Google Chrome, Mozilla Firefox, Opera, Safari и Microsoft Edge. Разработка под устаревшие версии браузеров, как правило, не особо рациональна: это приводит к снижению сопровождаемости проекта и иногда заставляет отказываться от современных технологий в разработке.
Корректное отображение в разных браузерах — важное требование в ТЗ, но тут следует перечислить только те браузеры, поддержка которых действительно нужна для эффективности проекта. Всё просто: на «затачивание» вёрстки под большое количество версий браузеров требуются ресурсы, которые оплачиваются из кармана заказчика, а эти затраты должны окупиться — если число пользователей какой‑либо версии браузера в абсолютном выражении будет составлять, например, 20 человек в год, то обычно нет смысла тратить время на оптимизацию под этот браузер.
Тематические статьи
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как путём уменьшения их физического размера в пикселях, так и путём оптимизации параметров сохранения. На «широких» каналах размер изображений на сайте не очень сильно влияет на скорость загрузки сайта, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, по кроссбраузерности и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
Вёрстка независимыми блоками — это методология, которая была сформулирована разработчиками Яндекса. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.