Внеплановый редизайн блога

Суть проблемы: блог обновлялся самостоятельно и, в результате, спустя год, стал тормозить как космические программы Роскосмоса. Последней каплей стало создание новой рубрики «макросъёмка» — в процессе задумчивость интерфейса пробила даже мою дзен-броню.

Лирическое

Теоретически, в планах на зиму, у меня стояло написать с нуля полностью свою тему оформления и интегрировать туда нужные мне фичи, возможно даже сделать платную pro версию, но… полярный лис пришёл к началу лета.

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

Углубленный анализ показал что полумерами (т.е. побырому найти виновных и расстрелять кого попало) не обойтись — требуется кропотливая работа. Так как времени что-то не особо, было принято решение рубить канаты и открывать кингстоны.

Заодно немного поменял концепцию дизайна: обложка вверху страницы исчезла — потому что я заметно левелапнулся как фотограф и дизайнер, в результате, сейчас КАЖДАЯ новость идёт с качественной, ну или хотя бы приличной, иллюстрацией (причём почти всегда своей).

Техническое

Основные работы заняли пол-дня, ещё два дня на ловлю багов и неторопливые допилы мелочёвки типа менюшек.

Шаблон оформления и плагины

• тема изменена на много более лёгкую (Colornews -> Envo Magazine)
• удалено с десяток плагинов со свистоперделками
• часть виджетов отправились в помойку
• шрифты: ненужные выкинуты, загрузка с гугла переделана на локальную
• половина доработок из functions.php отправились в корзину, вторая половина переписина красиво
• кусок кода отвечающий за авторасстановку text-align: justify;¹ переделан и вынесен в плагин и даже залит на github ²
• переделаны менюшки, погроханы старые неиспользуемые страницы, найдено и уничтожено много другой древней фигни
• кое-какие сеошные доработки, куда ж без них

Оптимизация

Пример одного из багов отловленных в процессе: если в плагине autoptimize включена lazy load, то виджеты с iframe блокируют загрузку остальных изображений, что вызывало очень заметные тормоза отрисовки слайдера на морде. Надо сказать это не первая проблема с данным плагином, и даже не вторая.

Немного потыкавшись я заменил связку Autoptimize + Async JavaScript + Cloudflare на Wp Fastest cache + Cloudflare и получил следующие результаты:

• 1.2-2с для кешированных страниц
• 2-3с для некешированных (там где сотни фоток цифра конечно хуже)

До всех оптимизаций морда грузилась за ~5 секунд, что неприемлемо долго.

Грандиозные планы на будущее

Когда-нибудь я запилю свою тему! С нуля! С flex и grid, под всю линейку разрешений, до 16k включительно!

1. Разработчики вордпресса в один далеко не прекрасный момент решили, что выравнивание текста по ширине страницы это плохо. Ну решили и решили, вот только они это решение добровольно-принудительно навязали всем пользователям цмски. Обоснование такое: на мелких девайсах с низким разрешением это выглядит как говно. Так то оно так, да не так — диагональ экрана смартфонов почему-то всё растёт, а размер пикселя всё уменьшается. По здравому размышлению я не только воткнул принудительное выравнивание по ширине для тегов абзаца <p>, но добавил брэкпоинт на 360px и вытащил это всё в примитивный плагин.
2. По здравому размышлению решено не позориться, патамушта парсер хтмл я подключать не стал, а регулярку ниасилил, ну и получилось костыльненько:(