Враги PageSpeed
Запись опубликована ·
3 881 перегляд
Как вы знаете, я давно и успешно борюсь с медленными магазинами.
Мы научились делать магазины с миллионом товаров, научились выгружать в яндекс-маркет несколько миллионов товарных предложений, научились держать 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 коментарів
Recommended Comments
Створіть аккаунт або увійдіть для коментування
Ви повинні бути користувачем, щоб залишити коментар
Створити обліковий запис
Зареєструйтеся для отримання облікового запису. Це просто!
Зареєструвати аккаунтВхід
Уже зареєстровані? Увійдіть тут.
Вхід зараз