Автор кейсаМедиа ГаваньЛоготип компании

Как мы сделали высокоскоростной сайт и разработали кибер-дизайн

Заказчик
Tom Hunter - компания, которая занимается кибербезопасностью и предоставляет весь спектр решений и процедур по выстраиванию эффективной защиты бизнеса от угроз информационного хакинга.
Задача
Через графику и быструю загрузку сайта показать, что компания находится на пике информационных технологий.

Первый этап. Как мы увеличили скорость загрузки сайта.

Предыстория

Во времена HTTP1 для полного отображения страницы каждый скачиваемый с сайта файл требовал создания отдельного TCP-соединения. Например, если на странице 10 картинок, 3 файла стилей и 5 скриптов, то для их загрузки нужно было создать 18 соединений. Это сильно замедляло загрузку. И, чтобы уменьшить количество запросов на сервер, крутой разработчик объединял иконки в спрайты, а стили и скрипты сжимал в единый файл. Количество запросов на сервер уменьшалось, но при загрузке каждой страницы браузеру нужно было обрабатывать очень большие файлы, чтобы получить данные для отображения каждого элемента. 

А что сейчас?

С развитием технологии HTTP2 ушла необходимость контролировать количество запросов: теперь через одно TCP-соединение может передаваться сразу несколько файлов. Появилась возможность отдавать только те файлы, которые нужны для отображения конкретной страницы и не загружать ничего лишнего.  

Логично создавать файлы стилей и скриптов по принципу деления на типовые секции, благодаря чему значительно повышается производительность сайта. И можно, казалось бы, отойти от объединения стилей в один файл, но многие разработчики работают «по-старинке».  

Как поступили мы

Мы разработали сайт по принципу Mobile-First и использовали возможности HTTP2. При просмотре с мобильного телефона сайт загружает минимум файлов. Руководство Google пишет, что "с 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию для всех новых сайтов" (источник: https://developers.google.com/search/mobile-sites/mobile-first-indexing?hl=ru). Это значит, что для поисковых систем мобильная версия сайта важнее десктопной. 

Для каждого из расширений сайта мы разработали отдельный файл стилей. С телефона браузер загружает только файлы для мобильной версии. Выглядит это так: 

 

 Для планшета загружаются 2 версии, для ноутбука - 3, для десктопа - 4:

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

Что ещё сделали на сайте.

•   Настроили отложенную загрузку скриптов и картинок (lazy-load). Таким образом для отображения первичного контента нужно минимум времени. Остальные браузер загрузит, когда пользователь уже будет просматривать страницу.

•   Отложили загрузку карт, ведь из-за собственных шрифтов и иконок они очень тяжелые.

•   Отключили весь не используемый на сайте функционал WordPress. 

Результат:

 

 Получили GTMetrix PageSpeed Score – 94%. Сайт загружается полностью за 5 секунд. 

Второй этап. Дизигнер поработал 

Гид по стайлу

Дизайнер проработал цветовую схему, шрифты и элементы фирменной графики. Нарисовали много-много иконок под стиль компании.

 

 

 

Визуальный образ

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

 UI-элементы

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

 

 

Чтобы наглядно показать уязвимость бизнесов от кибератак, мы нарисовали графики в трендовом изометрическом стиле. Для тех, кто не вглядывается, график ассоциируется с точностью и скрупулезностью. 

В итоге мы выяснили: отлаженная дизайн-структура и четкость в подаче - это простой и понятный язык общения между профессионалами и пользователем. 

Вот еще картинка сайта:

 Чек-лист

 Теперь тезисно сделаем выводы, за счет чего получилось показать высокотехнологичность компании с помощью верстки и дизайна:

•   Чистота кода и верстка по БЭМ

•   Mobile-First разработка

•   Логичное деление стилей и скриптов

•   Отложенная загрузка второстепенных файлов

•   Отключение всех ненужных функций CMS

•   Минимум использованных плагинов – только ACF и CF7

•   Настроили Redis и браузерное кэширование

•   Все иконки и большая часть графики сделана в SVG

•   Структурированная подача информации и 

•   Современный брендированный дизайн 


Перейти на сайт

В карточку агентства

Письмо автору кейса

Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов
Подпишитесь на рассылку
Читайте также
Кейсы по теме#Информационные и инженерные технологии