Предисловие

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

Открываю сайт - он вообще не загружается. Белый экран и бесконечная загрузка. Однако. Открываю девтулзы, вижу 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р за час работы, а потом, чтобы это поправить…