Главное Свежее Вакансии Образование
914 16 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Борьба за жизнь сайта после фрилансеров: кейс ускорения сайта

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

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

Дано: интернет-магазин детской мебели. Сайт сделан дружной кампанией любителей Wordpress. Да, магазин на Wordpress. А что? Дёшево ведь. Поскольку статья не про Wordpress, могу сослаться на статью о нём, чтобы исключить лишние бурления народных масс.

Запущена атомная лидогенерация на сайт по различным каналам. Рекламный бюджет — несколько сотен тысяч рублей в месяц. Это тот самый случай, когда «закапывают» деньги: рекламный бюджет на порядки больше затрат на разработку и поддержку. Конечно, есть жалобы на работу сайта. До такой степени, что сами клиенты уже звонят и жалуются. Сайт откровенно «тормозит». Команда разработчиков разводит руками: «мы все оптимизировали».

Процесс

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

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

Как обычно, пункт ноль это аудит. Определяем узкие места производительности (инструменты Google PageSpeed Insights, WebPagetest, Chrome Developers tools).

Были определены проблемы:

  • в каталоге товаров в качестве миниатюр использовались исходные фото (примерно по 2000 px, а это лишние 5-10 секунд загрузки страницы списка товаров), загружены и прописаны в карточки товаров они были вручную, возможности фотогалереи не были задействованы — пришлось делать миниатюры, прописывать в каталоге, оптимизировать большие фото;
  • подгружались внешние шрифты Google Fonts — сделали локальную загрузку, оптимизировали файлы шрифтов;
  • обнаружено много подгружаемых файлов JS, которые по факту не использовались на страницах сайта;
  • замусоренный CSS, чрезмерная фрагментация — уборка лишних стилей, объединение в один файл;
  • старые версии JS-библиотек (jQuery и его плагинов) — обновлены до актуальных версий;
  • код шаблонов имел блокирующие элементы — исправлена верстка, расположение блокирующих элементов в коде, перевод некоторых частей кода на асинхронную загрузку.

Оптимизированная версия сайта прошла тестирование на отдельном сервере, принята Заказчиком. Были сделаны замеры производительности, сняты согласованные в договоре метрики скорости работы. В процессе работы был найден оптимальный баланс между баллами Google PageSpeed Insights и субъективной скоростью для обычного посетителя (сервис Google PSI не всегда корректен в рекомендациях).

Только после этого новый вариант опубликован в интернет.

Что сделано:

  • перенос сайта на выделенный сервер в дата-центре Selectel (Москва) — с учетом данных по географическому распределению аудитории сайта. Причины перехода на отдельный сервер: нагрузка 12000 хитов в сутки с перспективой роста, независимость от других сайтов на хостинге, стабильность работы, размещение на этом же сервере других проектов заказчика;
  • настройка веб-сервера на максимальную производительность (тюнинг Nginx, MySQL);
  • настроен мониторинг доступности сервера с уведомлением на почту и смс;
  • настроено инкрементальное резервное копирование данных;
  • настройка работы HTTP/2 и TLS;
  • клиентская оптимизация сайта (картинки, скрипты, HTML-код шаблонов, CSS) — размер страницы каталога сократился в 2-3 раза без потери функционала.

Результат

Интегральная скорость загрузки страниц поднялась в 2-3 раза при уменьшении размера страниц в 1.5-2 раза. Такой эффект достигнут засчет синергетического влияния отдельных компонентов ускорения на общий результат. Оптимизированы как серверная, так и клиентская части. Написано руководство для разработчиков, чтобы «не ходить по граблям».

Заказчик был весьма доволен результатом и заказал ускорение своего второго сайта-лендинга.

Что не так с разработчиками?

Надо сказать несколько слов о разработчиках. Их непосильный труд привел к печальному результату. Почему:

  • спорный выбор платформы (Wordpress) для ИМ, причем еще и некорректное использование возможностей CMS, реализация функционала «в лоб»;
  • отсутствие клиентской оптимизации, нет культуры разработки оптимизированного кода, минификации, оптимизации изображений — всё грузят «как есть», по любимому принципу «и так сойдёт».

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

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

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Bogutskiy
Блог о интернет-маркетинге, SMM, SEO, SMO
Влад Богуцкий
Ускорение сайта очень полезная и нужная работа. Какие можете посоветовать сервиса для проверки скорости сайта... Ну кроме гугловского!! Буквально недавно в блоге девака была хорошая статья про скорость сайта. Если не путаю ничего, то речь шла не более чем 4 секунды)))
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
Самый точный инструмент - девелоперские панели в Хроме и Мозилле. А вообще можете обратиться к нам - диагностика сайта делается бесплатно.
Ответить
Bogutskiy
Блог о интернет-маркетинге, SMM, SEO, SMO
Влад Богуцкий
Спасибо за предложение! Где оставлять заявку или куда писать!?
Вот ссылка на блог: https://bogutskiy.org.ua/
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
Заявку на аудит можно оставить тут: https://www.methodlab.ru/price/uskorenie_sajta.shtml
Ответить
werqwer qwer
pagespeed insights, tools.pingdoom.com, gtmetrix скажут вам все о слабх местах
Ответить
werqwer qwer
ответил можете посмотреть.
Ответить
werqwer qwer
А по теме ребята можна скрин теста гугла до и после ?
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
смотрите ролики с результатами ускорений у нас на канале: https://www.youtube.com/channel/UCH_PvxSiuETI_ecbeAmb7_w/videos
Тест Гугла ценят в основном сеошники, он не все рекомендации дает справедливые, об этом сказано в статье
Ответить
zvonobot.ru
Сервис голосовых рассылок
Алексей Брагин
Какие качественные хостинги можете посоветовать?
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
У нас сервер в Селектел (Москва). Качеством довольны. Виртуальный хостинг сложно советовать, надо его долго пробовать чтобы уверенно говорить да. Не советуем категорически Мастерхост, Русоникс, Руцентр.
Ответить
Arkadii Yakovets
Оптимизация методом синергетического интегрирования :)
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
Да, заумно получилось :)
Ответить
Михаил Шитиков
Статья производит впечатление на отчёт о проделанной работе для клиента очень далёкого от темы. Но да суть не в этом. Если планируется рост нагрузки на сайт, почему не перенести его на более оптимальную платформу или вообще не сделать новый?
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
Почему бы не сделать сразу нормально? Видимо, так не принято, не интересно... Ваш вопрос риторический. Есть такие люди, любители хождения по граблям...
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Для кейса всё-таки мало цифр. И вопросы:
1.В чем конкретно неправ инструмент Google PageSpeed Insights, мне известна только одна его спорная рекомендация.
2.Зачем объединяли в один файл, если перешли на HTTP/2?
3. На сколько повысилось быстродействие после внедрения TLS?
Ответить
Фоторубка
Оптимизация изображений для сайтов самыми современными компрессорами
Denis Lavlinsky
1. Не учитывает расстояние от пользователя до сервера; не учитывает общий объем трафика; не учитывает общее время загрузки страницы; не понимает разницы между HTTP и HTTP2.
2. Особенность работы плагина autoptimize. Основная задача была перекинуть все в низ шаблона.
3. Отдельно не замеряли. Поскольку это необходимая доработка, смысла в этом нет, все равно надо делать однозначно.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.