Дизайн для скорости загрузки

13.03.2012

Дизайн для скорости

Как часто вы смотрите на свой сайт, который дооолго загружается и думаете над тем, как бы ускорить этот процесс? А как часто вы задумываетесь не над оптимизацией контента и хитрыми способами кэширования, а над самим дизайном? Ведь не только Apache принимает участие в ускорении (хотя его роль немаловажна), но и сам сайт должен быть спроектирован на максимальную скорость. Что такое дизайн для скорости — об этом сегодняшняя статья.

Почему важна скорость загрузки сайта?

Надеюсь, никто не будет спорить, что это важно. Причем, сейчас наступает такое время, что нельзя игнорировать мобильные устройства. Адаптивный дизайн, который набирает популярность — это не только грамотное расположение элементов на экране смартфона или планшета. Очень важное значение имеет размер страницы. Если вытянуть страницу в 400-500 килобайт на «большом брате» — это нормально, при условии достаточно быстрого соединения, то для мобильного устройства это абсолютно неприемлемо. Тут играет роль не только скорость соединения, но и ограниченная вычислительная мощность. Подробнее об особенностях разработки мобильных шаблонов я уже писал тут, а почитать про быстрое добавление мобильной версии блога можно тут.

Мысли относительно дизайна

Время загрузки, как основной мотив дизайна

Скорость — основной пункт в разработках инженеров, но игнорируется большинством дизайнеров. Однако, на этом этапе разработки можно значительно ускорить сайт, не написав ни единой строчки кода. Если можно пожертвовать каким-то элементом, в целях ускорения — нужно это сделать, не задумываясь. Сейчас сложно удивить посетителя «накарамеленым джипегом», так к чему делать? Уделите больше внимания контенту.

Как дизайн влияет на скорость?

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

Каждый элемент должен оправдывать свое существование

У дизайнеров учтен каждый пиксель их работ, если, конечно, это хороший дизайнер. Аналогично следует поступать с каждым запросом и лишним байтом кода. Если он не оправдывает своего наличия — зачем он, вообще, нужен? Максимальное сжатие кода, оптимизация графики, минимум запросов — только то, без чего сайт не сможет нормально работать. Все лишнее — за борт, на вашем корабле этому нет места.

Ближе к делу

Идеальный дизайн

Мысли это хорошо, но что конкретнее необходимо использовать? Самые злостные пожиратели времени загрузки сайта — ниже.

JavaScript

Начнем со скриптов, которые привносят жизнь на страницы, делают их динамичными и интересными. Подумайте, а так ли сильно нужен ли вам этот слайдер? А эта кнопочка перехода к началу страницы? Можно ли обойтись без них? Если есть сомнение — смело убирайте, вам это не нужно.

Аналогично с библиотеками. JQuery содержит очень много функций, а ваши скрипты используют только 10%. Зачем грузить всю остальную библиотеку? Причем, это относится не только к JQuery, остальные работают также. Написать свою, маленькую библиотеку, которая будет содержать только нужные функции — задача достаточно сложная, но вполне выполнимая.

Нестандартные шрифты

Не так давно появилась удобная и достаточно кроссбраузерная возможность использовать собственные шрифты. И дизайнеры, а вместе с ними и разработчики просто сошли с ума, вставляя их куда ни попадя. Возможность этого не означает, что вам нужно это использовать. Подумайте лишний раз…

Социальные кнопки

С одной стороны, кнопки дают возможность поделиться вашей записью в социальных сетях. С другой — каждая генерирует несколько запросов на родительский сайт при загрузке страницы, плюс подтягивает оттуда свой скрипт. А если кнопок не две-три, а 5-7-10? Нагрузка возрастает в разы и ваши усилия по ускорению сайта могут уткнуться в скорость загрузки социальных кнопок.

Но, без них тоже нельзя, как говорят SEO специалисты. ПС учитывают «шум» который статья произвела в соц.сетях. Я предлагаю оставлять только те кнопки, из чьих сервисов идет более-менее заметный трафик. Для себя я сделал выбор, ниже в блоке у меня только те кнопки, результат от которых я вижу. Но для каждой тематики и аудитории кнопки будут свои, тут нужно проводить тщательный анализ.


Вот так я вижу идеальный дизайн, который даже без кода обречен быть быстрым. А если добавить к нему оптимизацию контента и серверной части — получится самолет. Удачного вам дня

,

Комментариев: 8

  1. Pogudo

    Годная статья! Скорость загрузки страницы это один из основных показателей качества сайта. + больше 80% пользователей уходят если сайт открывается больше пары секунд.
    Как-то я раньше даже не задумывался о социальных кнопках..

    Ответить
  2. Atamovich

    Еще нужно помнить про счетчики. Если поставить очень много — тоже теряется скорость загрузки.

    Ответить
    • GerinG

      Совершенно верно, множество счетчиков существенно замедляет загрузку, неэстетично выглядит и вообще — зачем?? Как по мне, вполне достаточно Аналитикса или Метрики, кому что ближе

      Ответить
  3. Эльвира

    Уважаемые оптимизаторы! Вы пишите ведь от лица мужчин, а ведь есть мы, женщины. Я точно знаю, что для женщин главное уют, красота, яркость странички. А также обязательно наличие видео, фото и других медиа. 
    Что же с нами-то делать? Тем более, что у Виктора Милашечкина такие красивые шаблоны на сайте есть.))))))))) 

    Ответить
  4. Cospi

    Какая-то патологическая зацикленность на скорости загрузки, может вообще на голом html сайты делать? Сейчас когда скорость интернета 

    Ответить
    • Виктор Милашечкин

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

      hover сделаю, тут еще по мелочам целая куча работы )) 

      Ответить
  5. GGLMaster

    Я всегда использую простенькие дизайны на своих проектах….
    Чем он проще, тем лучше!

    Ответить