Как вы знаете, я давно и успешно борюсь с медленными магазинами.
Мы научились делать магазины с миллионом товаров, научились выгружать в яндекс-маркет несколько миллионов товарных предложений, научились держать 1.5-2к онлайна посетителей без единого разрыва. Сделали поиск, который умеет искать iphone-7 iphone7 и айфон7 и понимает разницу между iphone7 и iphone-8.
И в процессе всех этих наработок как-то вот очень мимо меня проходил вопрос улучшения оценки под новый алгоритм pageSpeed.
Последние пару недель появилась возможность провести определенные эксперименты с факторами, которые влияют на оценку, и наработать кое-какую методологию решения этой ситауции без потери работоспособности и масштабируемости магазина.
К сожалению вот так взять и взять в целом описать что необходимо делать - фактически невозможно, так как выйдет целый букварь.
Но кое-какие секреты я приоткрою.
И давайте начнем с врагов. Часто-густо как оказалось, можно практически из воздуха получить 12-15 баллов, просто устранив чью-то глупость. Я не знаю кто это сделал.
Но на многих-многих магазинах стоят модули СДЭК и Яндекс-Доставки. Разработчики этих модулей ходили на курсу программирования к Джигурде. Поэтому ничего зазорного не увидели в том, чтобы взять и на все страницы подключить api яндекс карт. Круто и клево. Вместо того чтобы рендерить страницы магазина, бразуер ваших клиентов стучит в яндекс и ждет-ждет яндекс карты. Зачем - я не знаю. У меня нет на это ответа. Но я знаю что делать.
Если у вас есть какое-то такое подобное творение. Они разные все. Находите в коде кусок, отвечающий за подключение скрипта и делаете что то подобное:
if (isset($this->request->get['route'])) {
$route = $this->request->get['route'];
if(strpos($route, 'checkout') !== false || strpos($route, 'simple') !== false || strpos($route, 'shipping') !== false) {
///...здесь пример из реального дополнения. У вас может быть другой код
$this->document->addStyle('catalog/view/theme/default/stylesheet/sdek.css');
$this->document->addScript('//api-maps.yandex.ru/2.1/?lang=ru_RU&ns=cdekymap');
$this->document->addScript('catalog/view/javascript/sdek.js');
};
}
В итоге, мы публикуем виджет карт, только там где он нужен. И не грузим ни сервер яндекса, ни своих посетителей. И в попугаях профит и покупателям быстрее.
Такие же плюшки есть у @29aleksey в его модуле редактирования товаров, да и много-много где.
Вобщем мораль басни такая. Сторонние скрипты да и скрипты в целом используем только там, где нам нужно.
А теперь немного общей информации.
Если раньше на оценку pageSpeed очень влияло время ответа сервера, то теперь за уменьшение ttfb от 2 до 1 сек для мобильных устройств, валидатор накидывает всего 6-8 баллов. И еще столько же при уменьшении от 1 до 200мс, как того требует стандарт.
Также все эти новые форматы изображений, webp и вся прочая лабуда, на которой пытается хайпануть и нажится на несведущих пользователях @sitecreator в целом абсолютно бесполезна на сегодня и не является дефакто необходимым действием, при условии что вы в состоянии использовать jpegoptim и отказаться от png. С нормально сжатыми и очищенными Jpeg гугл вас любит.
Также от этого никуда не денешься. Все скрипты и стили надо обьединять.
К сожалению автоматически это сделать без потери для масштабируемости достаточно сложно. Но при желании возможно.
Если не получилось объеденить стили просто пытаемся перенсти большую их часть в футер.
Туда же идут font-awesome и гугл-шрифты.
А еще оказывается просто волшебное действие на 15-20 попугаев оказывает удаление, выжигание напалмом модуля от одного очень много безответственно разговаривающего автора. Я думаю кому надо тот догадается.
https://upyachka.io/img/f_boyangreposm_2c6c344.jpg
Так вот там в модуле у автора есть подключение пары-тройки скриптов (капча, визивиг и прости господи bbcode 2019 год на дворе а у нас bbcode, следующим этапом морзянку можно еще вставить) на все страницы магазина по аналогии с Сдэком. А так как все его модули это архитектурная ошибка, которая не лечится, то проще все это снести и поставить нормальный модуль для статей.
Что же касается внутренних страниц (категории, товары). То если вы используете любой фильтр, неизбежно вы получаете пессимизацию оценки, в силу того что набор элементов фильтра - это много-много объектов DOM, а делать рендеринг набора параметров фильтра по какому-либо событию, фильтрописатели еще не научились.
Что касается карточек товаров. Там есть два вселенских зла. Одно всегда, второе приходящее. Первое - это всякие социальные share-кнопки, которые давно никому не нужны, но их все равно тулят во все шаблоны. Второе - это видосы с йотубера.
Кнопки выжигаем. А йотобуер борем как то так: https://ruseller.com/lessons.php?rub=32&id=2125 это первое что нагуглилось в понятном формате.
В целом 65-70 попугаев на мобиле - это не сложно, при условии того, что у вас в целом быстрый магазин, достаточно выкинуть весь лишний мусор и немного привести в порядок процесс генерации контента и подключения скриптов.
Если же говорить о глубоком тюнинге и раскачке магазина совсем в зеленую зону оценки. То и это фактически возможно. Но.
Во первых потребуется ограничение количества элементов в модулях на мобайл страницах и существенная переработка всех этих модулей.
Во вторых в идеале необходимо разделить общий стиль css на части и подгружать каждый согласно пришедшего vieport.
В третьих сделать все элементы максимально интерактивными, убрать лишний мусор и подгружать контент ровно там где он нужен. (тоесть если вам нужен фильтр, колбаса параметров должна грузиться по нажатию элемента, который его раскрывает. равно как и дерево меню и все остальные большие элементы).
В четвертых необходима проработка модулей и разделение вывода изображений, или использование динмаических тегов верстки, для вывода разного размера изображений под разные форматы экрана.
В пятых, все сторонние скрипты, типа тех же яндекс карт, виджетов вконтакта и прочих прочих, необходимо грузить по какому-либо пользовательскому событию, типа скролл, клик, свайп, а не сразу на страницу.
На этом пока хватит. В целом друзья, не бывает плохих и медленных магазинов, бывают кривые руки выпускников курсов программирования имени Джигурды.
-
9
16 Comments
Recommended Comments
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.