Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Frontend аудит сайта – lifehack.ru

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

Поехали!

lifehack

Во-первых, хочется сразу отметить, что на сайте хорошо сделана адаптивная верстка. Прямо чувствуется современный подход – “mobile first”, подозреваю, что это во многом связанно с тем, что авторы рассчитывают в основном на “мобильную аудиторию”. Едет человек с работы, после долгого трудового дня и отдыхает просматривая советы. Идея и исполнение хорошие, вопросов нет.

CSS

Вместе с этим оформление css классов несколько непонятное. Кажется, что разработчики используют БЭМ, но в какой-то странной форме. Есть несколько нотаций: с двойным подчеркиванием, либо с двойным тире, на сайте же используются обе. То есть элементы могут объявляться так .top-menu--wrapper и в то же время вот так .fixed-menu__progress-bar.

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

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

90% стилей на странице не используется, однако присутствует в загружаемых css файлах. Я подозреваю, что часть из них может быть задействована на других страницах, однако, если на главной есть так много “холостых” стилей, то есть повод задуматься. Вполне возможно, что часть из них нужно выпилить

screen-shot-2017-04-15-at-16-20-26

Network

Выполняется достаточно много запросов к серверу. Причем среди них много запросов к разным частям css и js файлов. По-хорошему стоило бы их объединить. Особенно те, что на своем же сервере и лежат. Сейчас с lifehacker.ru загружается 16 css и 18 js файлов.

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

JS

Дважды загружается библиотека lodash один раз в самой теме, а второй в плагине lh-popups. Очевидный минус использования вордпресса – сложно скоординировать загрузку скриптов.

all.min.js – основной файл со скриптами темы. Название вводит в заблуждение, файл не минифицирован, хотя конечно стоит это сделать.

Заглянем внутрь этого файла и постараемся разобраться в коде и сразу видим вот такую функцию:

return

Внезапно 🙂 Видимо никому ненужная функция на 30 строчек.

Достаточно часто в коде встречается вот такой анти-паттерн при работе с jQuery:

jquery-doc

В рамках одного скопа не стоит обертывать один и тот же DOM элемент в jQuery несколько раз. Вместо этого лучше использовать переменную.

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

Ссылки по теме:
https://ru.bem.info/
jQuery Anti-Patterns and Best Practices

Поделиться:
comments powered by Disqus