5 советов по созданию более простых и быстрых веб-сайтов

Никогда еще не было лучшего времени для работы фронтенд-разработчиком. HTML5 и CSS3 позволили нам гибко разрабатывать пользовательские интерфейсы на самых разных платформах, в то же время JavaScript превратился из лоскутного языка сценариев в полноценный язык программирования с собственной экосистемой, средой разработки и сообществом разработчиков. Теперь мы готовы сражаться с нативными приложениями — действительно, грань между тем, что является нативным, и тем, что нет, стирается все больше с каждой итерацией браузера.

Я чувствую, что в нашем стремлении стать быстрым и полнофункциональным нам не хватает некоторых хитростей. Как часто вы добавляли библиотеку в свой код внешнего интерфейса? А потом добавили фреймворк? Возможно подборка плагинов. Немного отзывчивой сетки. Некоторые прокладки и полифилы. И, наконец, немного изображений?

Внезапно у вас таинственным образом появляются сотни килобайт JavaScript и CSS для загрузки. Библиотеки и фреймворки, созданные на основе других библиотек, полные хаков для старых браузеров, использующие сжатие и минификацию для уменьшения размеров. И это еще до того, как вы доберетесь до любого контента, который хотите, чтобы ваши пользователи видели.

Вы ожидаете, что ваши страницы будут быстро работать в старых браузерах или на мобильных устройствах с небольшим объемом доступной памяти. Вы жалуетесь, когда они этого не делают, что это невозможно сделать, что мобильные браузеры слишком медленные, что JavaScript в телефонных браузерах недостаточно быстр, что DOM недостаточно быстр. Звучит знакомо? Ну, есть другой способ.

Быстро и просто

Техника, которая, кажется, несколько затмилась, — это метод прогрессивного улучшения. Используйте сервер для создания своих страниц, не отправляйте все клиенту и не заставляйте его собирать это. Напишите действительный, семантический HTML. Нацельтесь на самые медленные браузеры и сделайте все возможное, чтобы сделать их быстрыми. Если вам нужна поддержка IE8, откройте код с копией IE8. Проверьте все на скорость и производительность.

Если у вас есть реальная страница, отображаемая браузером, вам не придется беспокоиться о медленной работе JavaScript или DOM на мобильных устройствах. Будь проще. Держи это быстро. Если у вас есть действительно быстрый шаблон, работающий без JavaScript, вы можете улучшить контент, добавив JavaScript. Вот мои главные советы по созданию максимально быстрых веб-сайтов:

• Делайте как можно меньше запросов. В идеале — один файл HTML, один файл CSS и один файл JavaScript. Значки и визуальные ресурсы, составляющие ваш пользовательский интерфейс, должны быть небольшими, оптимизированными и по возможности встроены в CSS в виде изображений в кодировке Base64.
• Если вы используете шаблоны для создания HTML «на лету» в клиенте браузера, заставьте эти шаблоны работать как на сервере, так и на клиенте. Twitter потратил немало времени на удаление своей старой схемы хэшбэнга для твитов, превращая твиты в физические страницы в сети. Компания утверждает, что это снизило время загрузки страниц на 20 процентов.
• Загружайте только то, что вам нужно увидеть, и тогда, когда вам это нужно. Звучит очевидно, но часто у вас будет длинная страница с прокруткой, и все изображения на этой странице будут настроены на загрузку одновременно. Это приводит к каскадному эффекту: веб-браузеры одновременно открывают только определенное количество подключений к определенному хосту, поэтому одновременно будет загружено только определенное количество ваших изображений. Используйте CSS, чтобы показывать фоновые изображения, когда они необходимы.
• С фотографиями и изображениями сетчатки часто можно обойтись использованием 30-процентного качества в функции Photoshop «Сохранить для Интернета» и изменением размера в браузере. В итоге вы получаете изображения почти того же размера, что и обычные, сохраненные с качеством 70–80 процентов, но с более высоким разрешением.
• Если вы используете PNG с альфа-прозрачностью, вам часто удастся изменить их с 24-битного цвета на 256-битную цветовую палитру. использование такого программного обеспечения, как Fireworks или ImageOptim, без заметной потери качества, но иногда файл становится меньше более чем на 50 процентов. размеры.

При таком подходе вы получаете некоторые дополнительные возможности. SEO бесплатно. Пожилые клиенты, по большей части, тоже будут работать. То же самое и с программами чтения с экрана. Добавить поддержку специальных возможностей ARIA будет тривиально. Вдобавок ко всему, вы получаете легкое ощущение добропорядочного гражданина сети.

Слова: Скотт ван Лой

Скотт занимается созданием веб-сайтов с 1995 года. Последние 7 лет он проработал в AKQA в Лондоне и Берлине, специализируясь на JavaScript, CSS и HTML. Эта статья первоначально появилась в сетевой журнал выпуск 256.