Сказ об одной оптимизации

Пт, 07/10/2016 - 15:24

Предисловие

Итак, новая работа, офис, первое задание - ускорить загрузку сайта, обновить Друпал и модули. Не вопрос, дали мне тестовую площадку, работай.

Открываю сайт - он вообще не загружается. Белый экран и бесконечная загрузка. Однако. Открываю девтулзы, вижу ERR_BLOCKED_BY_CLIENT, вздыхаю, отключаю AdBlock. Сайт загружается. Субъективно - очень медленно загружается. Девтулзы открыты, включаю вкладку network, и наблюдаю следующее:

  • Около 300 запросов.
  • TTFB у страниц - 900ms
  • DOMContentLoaded - 5.5-6s
  • Load - 10-20-30s, рандомно.

Весело. Ну ладно. Где наша не пропадала. Тащу исходники с тестовой на локалку, разворачиваю, начинаю смотреть и потихоньку седеть.

Первый заход: Javascript

Первым шагом было отключение ненужных js-ок, исправление нужных и включение агрегации. По шагам:

  • Агрегация. Включил и сайт упал. Проблема оказалась в модуле HTTPRL, который не дружил с настройками nginx. Отключил модуль, включил агрегацию. Скрипты перестали работать. Проблема оказалась в древней версии WYSIWYG, которая не дружила с Locale. Отложил агрегацию до обновления модулей.
  • Рекламный код AdFox. Был криво подключен. Зато дважды - в блоке и в теме. И не асинхронно, отсюда по всей видимости проблемы с загрузкой всего сайта. Переподключил по инструкции с AdFox'a
  • ShareThis. Штук 60 запросов для пяти кнопок - перебор. Плюс этот сервис что-то штормило. Написал свой крохотный модулёк, где эти же самые кнопки подключались без js. Просто ссылки, изображения кнопок в спрайте, счётчик шар - отключен (спасибо Twitter!).
  • Лишние JS. На сайт подключено три карусели, две модалки, попап, который ведёт себя как модалка (зачем, Карл?!). Переписываю все карусели на использование одного скрипта. Отключаю colorbox - сайт валится с ошибкой. Мельком глянул - проблема в кастомном коде, без поллитры не разобраться, пока оставляю. Настраиваю подключение некоторых скриптов (Masonry, Raphael, Morris) только на нужных страницах(две-три буквально), а не на всех. Подобный же трюк попытался произвести я Я.Картами, но не получилось - мешал всё тот же кастом. Отложил до лучших времён.
  • Виджеты соцсетей. Подключались в quicktabs. Включил загрузку только активной вкладки, остальные через AJAX
  • Конский AJAX-запрос (900ms, 750KB), который блокировал загрузку. Поставил до рефакторинга асинхронным, ибо код, формирующий ответ довершил процесс седения.

Итогом первого захода стало:

  • 300 - 100 = 200 запросов.
  • DOMContentLoaded - ~4s.
  • Load - вменяемый, +0.5-1s от DOM

Второй заход: кэш для анонимов

На сайте были установлен Boost, около 6 видов Каптч, Memcache, Varnish, 100500 мелкомодулей для кэширования и всё это не работало.

  • Снёс все каптчи, ботчи, спамициды и зависимые от них модули, поставил тупой Honeypot. Хоп! Спам исчез.
  • Поэкспериментировал с Boost. Выяснил, что Nginx не настроен на работу с ним. К тому же по какой-то причине все страницы Boost при каждом запросе генерировались заново. Времени разбираться особо не было, поэтому просто снёс. -300ms к TTFB. Хоп! страницы для анонимов можно кэшировать.
  • Ковыряю модуль varnish. Варниша на сервере нет, конфигурация площадки его не позволяет. Сношу.
  • Включаю кэш для анонимов. Не включается. После сохранения настроек галка возвращается в отжатое состояние. Ладно, думаю врублю в settings.php принудительно. Вижу $conf['cache'] = 0;, сношу. Заодно убираю настройки варниша. Кэш по прежнему не включается. Нахожу где-то в глубинах кастома variable_set('cache', 0), сношу. Кэш анонимов работает.

Итог второго захода: TTFB при прогретом кэше - 15ms плюс минус 5. Великолепно.

Третий заход: обновление Друпал и модулей.

Самая долгая часть, с которой проваландался неделю. Все модули, и само ядро, были установлены как git-submodules. Нет версий, названий проектов, еще чего-то. Короче драш модулей не видел. Друпал не видел версий и не мог затащить обновлений.

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

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

Дальше эпопея с зависимостями - оказалось, что стоят версии модулей, несовместимые друг с другом. Не помню как решил, ибо температурил. Вкратце подход выглядел так: обновил всё, откатился, обновил всё, кроме конфликтующего, откатился… В итоге необновлёнными остались два модуля - yamaps, из-за жёстко завязанного кастома, и nodequeue, из-за кривых обновлений базы в dev-версиях. Плюс была свистопляска с entity_cache, его надо было отключить, удалить, обновить, затем снова включать.

Затем обновление друпал. Сначала до 7.38, ибо боялся проблем с аяксом в кастоме. Потом до упора, на тот момент 7.44. Проблем с ajax-ом не вылезло, и вообще полёт нормальный.

Затем снёс все неиспользуемые модули(закачанные, но не включенные). Позже, с выходом 7.50 еще и от missing избавился.

Всё колданул в git и радуюсь.

Итог третьего захода: с системой можно работать с помощью драш, git, и вообще, можно нормально работать, без этих давно исправленных в контрибе багов.

Четвертый заход: мобильная версия

Приходит менеджер, даёт дизайн. Надо наваять адаптивку. Я сразу предупреждаю, что времени займёт много, так как вёрстка - караул. Что было главного из весёлого в вёрстке:

  • Главный файло темы весил 750КБ. 750, Карл! Я больше 150-ти не писал никогда даже. А этот сайт вообще в сотню уложить можно бы.
  • Всё сделано на панелях. Гибких. Без классов. Все селекторы вида .panels-flexible-region-102-content .views-field-field-price. И вообще всё так сделано. Всё.
  • Не отключены многие дефолтные стили. Они грузились, а потом переопределялись. Или не переопределялись, и на них было многое завязано. Или переопределялись частично, но оставались нужны в непереопределённой малости.
  • Вкусовщина. Мне омега в качестве базовой темы никогда не нравилась.
  • Все изображения были подключены инлайново в base64. Отключение дало минус 300КБ к весу.
  • Ужасающая вложенность. Например семь селекторов с тремя id-шниками внутри.

В итоге, в процессе вёрстки адаптива, я рефакторил только те места, которые меня затрагивали. Где работало - не трогал, страшно. Уберёшь какой-нибудь panels-flexible-region-102-content, а он ещё в трёх местах используется. Плюс добавил спрайты, плюс сжал все изображения темы, то да сё, css этот после добавления адаптива стал весить 350КБ. Теперь весит 300КБ, и по мере возможностей и времени всё больше уменьшается. Старые css-файлы тоже частично поотключал.

Пятый заход: приход SEO-шника и итерации

В определенный момент на сайт напустили “интернет-маркетолога”. Для SEO-шника - отличный парень. Не без мелких загонов, но кто из них без греха? Короче, начало поступать от этого товарища много мелких задач, плюс просто поступают задачи на доработку, всплывают какие-либо незамеченные баги, которые надо поправить. Всё это позволяет попутно рефакторить затрагиваемые куски сайта.

Послесловие

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

Писал по большей части по памяти. Естественно упущено много промежуточных моментов. Статистику чёткую на каждом этапе я не вёл, потерял блокнот и остались только первые записи. Текущие данные - время загрузки сайта без кэша браузера - 1.3с DOM, 2с Load у главной, у внутряка поменьше.

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

3 Спасибо

Комментарии

Аватар пользователя sergeybelya
8 months 2 недели назад sergeybelya #

Без ссылки на сайт - статья ни о чем. Наверняка ваш труд еще можно оптимизировать). Правильный только вывод.

0 Спасибо
Аватар пользователя Studio VIZA
8 months 2 недели назад Studio VIZA #

Всё что тут описано, у меня занимает одну ночь.Мышь правда устаёт, зато код исключительный и не надо писать костыли для написанных вчера. Настоящих прогеров 40 человек на весь мир. Остальные ломают и думают что достойны повышенной оплаты.

0 Спасибо
Аватар пользователя bumble
8 months 2 недели назад bumble #

@fairrandir - спасибо - интересный пост!
Очень близко :)) почти как с зеркала читал...

Есть предложение: добавьте немного реальных примеров и нужных тегов - отправим на главную.

0 Спасибо
Аватар пользователя Van'Denis
8 months 2 недели назад Van'Denis #
fairrandir написал:
товарищи заказчики, не экономьте на разработчиках. Сейчас вы заплатили 200р за час работы, а потом, чтобы это поправить…

За эти слова спс от меня. Занёс в заметки. пригодится!

0 Спасибо
Аватар пользователя ivnish
8 months 2 недели назад ivnish #

Самое главное не озвучил - сколько стоит работа по такой оптимизации?

0 Спасибо
Аватар пользователя dashiwa
8 months 2 недели назад dashiwa #

Интересно другое. Среднее время в часах на данную работу.
И почему наши заказчики поятся почасовой оплаты без четких рамок

0 Спасибо
Аватар пользователя ХулиGUN
8 months 2 недели назад ХулиGUN #
dashiwa написал:
И почему наши заказчики поятся почасовой оплаты без четких рамок

Потому что не уверены ни в силах незнакомого разработчика, ни в коде своего же проекта))) Либо они наборот, знают все подводные камни и хотят с наименьшими затратами всё поправить, типа "Сам подписался на такой ценник, так шо давай, отрабатывай"))))

0 Спасибо
Аватар пользователя fairrandir
8 months 2 недели назад fairrandir #
ivnish написал:
Самое главное не озвучил - сколько стоит работа по такой оптимизации?

По цене - я на зарплате. Компания не IT-шная, просто группа компаний, у которой штук 30 сайтов. До этого разработку отдавали на аутсорс, с желанием сэкономить и печальными последствиями.

dashiwa написал:
Интересно другое. Среднее время в часах на данную работу

Среднее время - могу только приблизительно оценить.

Первые три захода заняли около 10-ти рабочих дней, но это без поправки на акклиматизацию (офисная бюрократия, настройка рабочего окружения, вот это вот всё) и дополнительные задачи по другим сайтам.

Четвертый, перевёрстка - пять или шесть рабочих дней.

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

Например, задача: поставить дефолтный description. На сайте, зачем-то, стоит два модуля: metatag и simple_meta. Друг с другом они, естественно не дружат. Когда добавляешь дефолтный через metatag - появляется два description. Пишу модулёк, который перетаскивает метатэги из Simple Meta в Metatag. Проверяю, выясняется, что для некоторых типов материала ещё и в кастоме тэги добавляются. То есть на некоторых страницах было ТРИ description. Вычищаю, настраиваю дефолты в metatag. Хоп! Вместо пяти минут - полдня прошло, пора на обед идти.

0 Спасибо
Аватар пользователя sas@drupal.org
8 months 2 недели назад sas@drupal.org #

Если бы 20% давно прогеров с этого сайта, написали бы 20% своих работ по рефакторингу кода, то Вы бы читали их отсавшиеся 80% времени года. И вообще что за нерентабельные советы = писать код для маньяков, чтобы Вы тогда делали, если бы говнокода не было, и как бы самопиарились?!
Да и ссылку на сайт в студию?!

1 Спасибо
Аватар пользователя Junegton
8 months 1 неделя назад Junegton #

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

Но главное - я не знаю программирования вообще, все делаю по интуиции - хотя склад ума позволяет понимать что и зачем! ТЗ делаю всегда сам (инжегер по образованию)! И может быть стоило бы потратить время на изучение языков, но я знаю, что зарабатывать этим не смогу! Вот часто предлагают сделать сайт - отказываюсь, говоря что я не программист :) А для себя или друзей за бесплатно - пожалуйста!

0 Спасибо
Аватар пользователя sergeybelya
8 months 1 неделя назад sergeybelya #
Junegton написал:
я знаю все как устроено

Junegton написал:
Но главное - я не знаю программирования вообще

0 Спасибо
Аватар пользователя Junegton
8 months 1 неделя назад Junegton #

я имел ввиду, что понимаю процесс - но с кодом все осень трудно

0 Спасибо
Аватар пользователя gun_dose
8 months 1 неделя назад gun_dose #

Синдром эникейщика - это когда ты отлично умеешь делать то, в чём ничего не понимаешь))

0 Спасибо
Аватар пользователя dashiwa
8 months 1 неделя назад dashiwa #

Чтобы продавать понимание не нужно.
Вон как парни на вордпресе жгут

0 Спасибо
Аватар пользователя ХулиGUN
8 months 1 неделя назад ХулиGUN #

сайт оптимизировали, оптимизировали да не отоптимизировали)))

0 Спасибо