Категория: Оптимизация/Доработка

Задача

Создать многостраничный сайт для компании-производителя поверочных установок. Нужно было создать дизайн, написать код, запрограммировать в CMS 1C Bitrix. Срок 14 дней.

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

Главное — решить задачу клиента

Решили упростить задачу и приобрести готовое решение в каталоге 1С Битрикс.

Нашли 3 подходящих для нас готовых решения:

• http://universelite.intecwork1.ru/ — 28 440 руб.
• https://allcorp2.aspro-demo.ru/ — 28 840 руб.
• https://priority.aspro-demo.ru/ — 32 190 руб.

В итоге клиент выбрал решение Aspro Priority за 32 190.

Преимущества готового решения

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

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

На видео боковая панель настройки сайта.

Хостинг и домен покупали на beget.ru
На установку и тестирование готового решения ушло 2 дня.

Далее в течении недели сайт был заполнен данными компаниями.

Проблема

Время загрузки сайтов было долгим, показатели тестов скорости — 0/100

Задача

Оптимизировать 4 одностраничных сайта.

Результаты:

Снизил размер сайта в 6 раз: с 3 до 0.5 мб.
Уменьшил время загрузки: с 3.5 до 2 секунд.

Какие шаги были выполнены чтобы ускорения загрузки?

1. Разделение кода оформления. При переходе пользователя на сайт, код оформления будет грузиться не для всей страницы, а только для первой секции сайта. А спустя несколько секунд загрузится оформление и для остального сайта, это называют — критический css. Это позволяет отложить загрузку большого количества стилей при загрузке сайта.

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

3. Объединение файлов скриптов и стилей. Чем больше файлов подключается к сайту, тем больше браузеру нужно сделать запросов для корректного отображения сайта, каждый запрос — время, поэтому нам надо упростить работу браузеру и объединить все скрипты в 1 файл и все стили в 1 файл. На каждом из 4 сайтов было по 12 файлов скриптов и по10 файлов стилей. Я сделал по одному.

4. Минификация кода. Код нужно сжимать, делается это с помощью удаления пробелов, сокращения имен переменных, программы для сжатия пытаются по максимуму сократить количество символов в коде. Минификация кода позволяет сжать файл на 10−40% от начального размера.

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

До оптимизации

Размер сайта: 3 мб.
Время загрузки: 3.5 секунды

После оптимизации

Размер сайта: 0.5 мб.
Время загрузки: 2 секунды

Отзыв

Нужно было адаптировать 4 сайта. У самой времени не было. Данил быстро откликнулся и взялся за работу сразу же в этот вечер. За несколько часов все было готово! Быстро. Качественно. И всегда на связи. Спасибо большое!

Мария Луцева

Фактические показатели

До

Фактическая скорость загрузки: 18 секунд
Загружаемые ресурсы: 40 мб
Баллы ПК pageSpeed: 55
Баллы МБ pageSpeed: 26

После

Фактическая скорость загрузки: 4.96 секунд
Загружаемые ресурсы: 4.5 мб
Баллы ПК pageSpeed: 58
Баллы МБ pageSpeed: 94

Работа

Сжал css и javascript файлы.
Оптимизировал изображения. Сократил вес сайта с 800мб до 400мб.

css

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

javascript

Перенес подключение javascript из шапки в подвал.

На сайте было подключено 3 jquery файла, я оставил только один.

Slick, b-lazy библиотеки подключалиcь локально — заменил их на cdn-аналоги.

В карусели slick был установлен параметр lazy, который обеспечивает ленивую загрузку изображений.

Установлена библиотека b-lazy и все изображения на главной странице и в каталоге теперь загружаются по мере прокрутки. Почему не на всем сайте? Главная и каталог — основные страницы с изображениями, на остальных страницах их очень мало.

В видео-отзывах оптимизирована загрузка библиотек для отображения youtube-видео. Каждый тег iframe подхватывает скрипт от youtube, который сильно грузит страницу.

Оптимизировал это так: тег iframe создается только тогда, когда был клик по «Просмотреть отзыв». Это позволило здорово сэкономить при загрузке и в целом по поведению сайта. Бывает медленной загрузки и не ощущается, но сайт подвисает при использовании.

Итог:

Ускорил загрузку в 3.6 раз
Уменьшил размер в 9 раз
Улучшил «отклик» сайта. Переход на некоторые страницы часто даже не ощущается.

Для такой насыщенной картинками, видео страницы 2−4 секунды для загрузки — отличный результат. Учитывая то, что первый экран страницы загружается менее, чем за секунду.

Задача

Сделать редизайн сайта, исправить ошибки в коде, сделать мобильную версию сайта

Редизайн

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

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

В шапке сайта оставил важную информацию: лого, меню, кнопки «Заказать звонок», «Задать вопрос» и номер телефона. Я считаю что на сайтах с юридической информацией такие кнопки нужны в шапке сайта, так как ситуации всегда индивидуальные и хочется задать вопрос индивидуально.

Один номер телефона поместил в шапку и продублировал их оба в подвале сайта. Отзывы убрал совсем, я уже писал о том, какие отзывы должны быть на сайте. Просматривать список услуг в таком виде было не очень приятно. Складывалось ощущение что я открыл не сайт, а word документ. Вместе со Светланой мы пришли к тому чтобы отобразить услуги плиткой. В новостях творился хаос. Изображения где-то были, где-то нет, размер изображений тоже был разным, да и вообще вся верстка выглядела очень плохо. Я решил отобразить новости плиткой, к которой я думаю уже привыкли многие.

До

После

Подвал первой версии сайта был очень не информативен. Если его убрать — пользователь ничего не потеряет. Я решил убрать оттуда лишнюю информацию и дополнить полезной: продублировал меню сайта, чтобы пользователь докрутив сайт до конца мог сразу перейти на интересующую страницу, добавил два телефона и email, адреса и время работы.

Было

Стало:

• Продублировано меню
• Добавлены контактные данные
• Добавлены адреса и время работы