Ускорение сайтов с адаптивным дизайном

От автора: Когда в последний раз вы заходили на какой-нибудь сайт и были потрясены его производительностью (т.е. как быстро вы могли на нем делать то, что вам хотелось?)

Заходя на сайт CanIUse.com, после его последнего обновления, создается ощущение, что он работает быстрее, чем летит пуля. Он не только снабжает нас статистическими данными о совместимости различных передовых веб-технологий и других возможностей, но еще и делает это с впечатляющей скоростью и производительностью.

Недавно Максимилиано Фиртман (Maximiliano Firtman) опубликовал заставляющую задуматься статью для сайта Smashing Magazine. Фронтэнд-разработчику важно помнить о том, что его конечная цель – это не отзывчивый дизайн для сайта, а быстродействие и удобство использования сайта, который является отзывчивым. Эта мысль не является новой, но точно является стоящей.

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

Как редизайн отзывчивых сайтов помогает добиться этого

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

Сайт New Yorker

Имеет самый большой из всех вес страницы, но не самое продолжительное время загрузки. Одной из целей сайта New Yorker является обеспечение посетителей как можно большим количеством бесплатного контента, вне зависимости от устройств пользователей. И сайт хорошо справляется с этой задачей, сохраняя привычную гарнитуру Irvin в качестве веб-шрифта с помощью сервиса Typekit.

Сайт Virgin America

Этот сайт изменил представление о том, как в дальнейшем будут выглядеть сайты, посвященные путешествиям (хочется надеяться на это). Внимание к мелочам и потрясающий опыт взаимодействия (UX) демонстрируют, как ощутимая скорость и удобство использования помогают быстрее достигнуть поставленных целей:

Одной из ключевых целей сайта было увеличение числа авиабилетов, забронированных с мобильных устройств и планшетов. Серьезные покупки, такие как заказ авиабилетов, до сих пор редко совершаются со смартфонов, частично потому что такого рода веб-сайты были созданы на основе стандартов Web 1.0 и содержат элементы пользовательского интерфейса, которыми ужасно неудобно пользоваться на маленьких экранах. Поэтому владельцы Virgin America инвестировали средства в разработку отзывчивого веб-сайта, а не в создание веб-сайта + приложение, в надежде на то, что создание удобного пользовательского интерфейса принесет больше выгоды, чем размещение рекламных объявлений. — Суперудобное взаимодействие с новым сайтом Virgin America по бронированию билетов

Сайт Adobe

30% от общего веса домашней страницы приходится на огромное фоновое изображение (261Кб), но, тем не менее, сайт грузится меньше 3 секунд и визуально выглядит впечатляющим.

Сайт Harvard Law Review

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

* Все данные получены с помощью сервиса Pingdom.

Ускоряем сайты

Плагин Critical

Это плагин таск-менеджера Gulp, который извлекает и встраивает критический путь (над всем остальным) CSS отдельно от HTML, оптимизируя CSS, который загружается первым.

//github.com/addyosmani/critical

Сервис Pingdom

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

//tools.pingdom.com/

Сервис Google PageSpeed

Это инструмент от Google, предназначенный для того, чтобы анализировать ваш сайт и ускорять его работу на всех устройствах. Он похож на сервис Pingdom, и, на мой взгляд, наиболее удобным в нем является наличие расширения для браузера, которое встроено прямо в инструменты разработчика браузера Chrome.

//developers.google.com/speed/pagespeed/insights/

Сервисы Smush.it и TinyPNG

Принцип сжатия изображения без потерь избавляет от лишних байтов и сохраняет прежнее качество изображения. Это очень хороший помощник в вопросах оптимизации, и при этом его легко применять.

Метод matchMedia()

Это полифил, позволяющий протестировать, требуется ли использование JavaScript с определенным медиа-запросом или нет. Таким образом, он позволяет осуществлять выборочную загрузку для разных окон просмотра.

Пример:

Быть ответственным за производительность

Причины плохой производительности кроются в недостатке внимания и ответственности за производительность в рамках разработки проекта – независимо от того, является ли сайт отзывчивым или нет. Говорить о том, что отзывчивый дизайн негативно сказывается на производительности, – это все равно, что говорить о том, что оптимизация под touch-устройства также негативно влияет на производительность. Это не имеет особого смысла, т.к. у вас нет возможности работать над тем и другим по отдельности и ожидать, что общий эффект от использования будет положительным. — Тим Кадлек (Tim Kadlec), «Отзывчивый веб-дизайн, негативно влияющий на производительность», положительно влияет на производительность

Если мы посмотрим на такие отзывчивые сайты, как CanIUse, The New Yorker, Virgin America, Adobe и Harvard Law Review, то это позволит нам поразмышлять о них в контексте того, как и зачем эти сайты были созданы (т.е. цели, причины для посещения сайта и т.д.). Тот факт, что сайт Virgin America грузится пять секунд, не так запомнится вам, как то общее впечатление, которое получает пользователь при заказе авиабилетов на новом сайте компании. Ключевым здесь является понимание того, как вы создаете то, что вы создаете, от чего это зависит и как найти наилучший способ для реализации задуманного.

Автор: Brian Krall

Источник: //sideproject.io/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)