Лендинг онлайн-курса йоги
Посмотреть сайт: yogacurs.ru
Задача: создать одностраничный сайт с презентацией онлайн-курса по йоге на YouTube, максимально ускорить загрузку страницы и оптимизировать для дальнейшего SEO-продвижения.
Решение: для создания лендинга заказчик прислал подробное техническое задание с описанием структуры будущей страницы и предоставил все изображения в высоком разрешении и отличном качестве. По данному ТЗ программист сверстал страницу с минимальным дизайнерским оформлением в цветах логотипа.
Все иконки используются в формате SVG для масштабирования их на разных разрешениях экрана без потери качества и для уменьшения загружаемого пользователем трафика. Сравним для примера внешний вид и размеры одних и тех же иконок в PNG формате и SVG:
Так выглядит одна и та же иконка в разных форматах на мониторе компьютера:
Так они отображаются на экране смартфона с шириной экрана 1080px. В мобильной адаптации браузер отображает вёрстку шириной 360px, поэтому иконка в высоту 72px растягивается до 216px физических пикселей дисплея, что значительно ухудшает качество самой иконки, либо вынуждает использовать файл в 3 раза больше по ширине и высоте (что соответственно увеличит и размер файла):
Все фотографии были уменьшены до максимального используемого на странице разрешения и оптимизированы для web, что позволило уменьшить общий размер изображений в 50,7 раз (с 11,1 Мб до 223,9 Кб). Для всех изображений были прописаны теги alt и title, для страницы созданы meta-теги title и description.
Вёрстка страницы адаптирована под малые разрешения для удобного просмотра на мобильных устройствах. Также для сайта были созданы несколько favicon в разных разрешениях для лучшего отображения иконки сайта на разных устройствах и в разных браузерах. В браузере Chrome на платформах Android настроено изменение цвета верхней панели на фирменный цвет.
Весь комплекс работ по оптимизации привёл к таким результатам скорости загрузки на на Google Page Speed: 100 баллов для компьютеров и 99 - для мобильных устройств.
