Перейти к содержанию

Враги PageSpeed

Yoda

564 просмотра

Как вы знаете, я давно и успешно борюсь с медленными магазинами.

Мы научились делать магазины с миллионом товаров, научились выгружать в яндекс-маркет несколько миллионов товарных предложений, научились держать 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.

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

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

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

 

На этом пока хватит. В целом друзья, не бывает плохих и медленных магазинов, бывают кривые руки выпускников курсов программирования имени Джигурды.

 

 

 

  • +1 5


13 Комментариев


Рекомендуемые комментарии

Цитата

Так вот там в модуле у автора есть подключение пары-тройки скриптов (капча, визивиг и прости господи bbcode 2019 год на дворе а у нас bbcode, следующим этапом морзянку можно еще вставить) на все страницы магазина по аналогии с Сдэком. А так как все его модули это архитектурная ошибка, которая не лечится, то проще все это снести и поставить нормальный модуль для статей.

Полная чушь что эта пара-тройка скриптов из модуля markimax-a подключаются на все страницы магазина.

Поделиться этим комментарием


Ссылка на комментарий

На своей шкуре прошёл 7 кругов ада и могу заявить что всё верно написано! Возможно что автор в статье описывал мой случай или очень-очень на него похожий.
Осталось немного победить DOM и ещё несколько штрихов к портрету и можно тогда до очередных нововведений от Google не заходить с проверкой.
Но, есть одно но!
Теперь надо с большой осторожностью доверять работы по плюшкам на сайт! Дабы не растерять всё то, что рождалось в муках!!!
Почти как муковоз, только в интерпретации в мучениях)))

Поделиться этим комментарием


Ссылка на комментарий
8 minutes ago, klaos27 said:

Полная чушь что эта пара-тройка скриптов из модуля markimax-a подключаются на все страницы магазина.

Почему на все?

Только на те где выводятся модули отзывов и форм

if ($type == 'treecomments' || $type == 'forms') {

И то если включен визуаьны HTML редактор

if ($this->data['visual_editor']) {

То есть фактичсеки на все страницы товаров, если используется модуль отзывов от Марка.

Но сами по себе эти скрипты балов добавляют, согласен.

Поделиться этим комментарием


Ссылка на комментарий
1 минуту назад, vtkach сказал:

Почему на все?

Только на те где выводятся модули отзывов и форм

if ($type == 'treecomments' || $type == 'forms') {

И то если включен визуаьны HTML редактор

if ($this->data['visual_editor']) {

То есть фактичсеки на все страницы товаров, если используется модуль отзывов от Марка.

Но сами по себе эти скрипты балов добавляют, согласен.

Я и говорю что НЕ на все страницы. Если виджет выведен на страницу - есть скрипты, нет виджета - нет скриптов

Поделиться этим комментарием


Ссылка на комментарий
10 минут назад, klaos27 сказал:

Я и говорю что НЕ на все страницы. Если виджет выведен на страницу - есть скрипты, нет виджета - нет скриптов

 

Далеко не у всех есть возможность следить за творчеством данного персонажа и экстермально латать за ним недоработки. 
В не самых старых версиях все это было реализовано соверешенно по другому и цеплялось во все дыры при намеке на малейшее использование этого хлама.

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

Поэтому проще выжечь и использовать утилитарные решения. Чем возится с бесконечными обновлениями.

 

Если вдруг вы там по дружбе решите, что я это все выдумал - есть живой пример!
Да и пост собственно не об этом. Не надо превращать его в очередной срач.

А то сейчас прибежит киса и навалит тут 20 страниц параноидальных фантазий.


А данный пост все-таки мое личное мнение основанное на определенном опыте решения общих проблем с оценкой гугла, и моими личными рекомендациями.
Если вам что-то не нравится, или вы считаете по другому - вам никто не мешает написать подобный пост со своими личными рекомендациями.

Поделиться этим комментарием


Ссылка на комментарий
7 minutes ago, Yoda said:

 

Далеко не у всех есть возможность следить за творчеством данного персонажа и экстермально латать за ним недоработки. 
В не самых старых версиях все это было реализовано соверешенно по другому и цеплялось во все дыры при намеке на малейшее использование этого хлама.

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

Поэтому проще выжечь и использовать утилитарные решения. Чем возится с бесконечными обновлениями.

 

Если вдруг вы там по дружбе решите, что я это все выдумал - есть живой пример!
Да и пост собственно не об этом. Не надо превращать его в очередной срач.

А то сейчас прибежит киса и навалит тут 20 страниц параноидальных фантазий.


А данный пост все-таки мое личное мнение основанное на определенном опыте решения общих проблем с оценкой гугла, и моими личными рекомендациями.
Если вам что-то не нравится, или вы считаете по другому - вам никто не мешает написать подобный пост со своими личными рекомендациями.

Не срач не нужно. Лучше пишите еще что-то полезное)

Поделиться этим комментарием


Ссылка на комментарий
2 минуты назад, vtkach сказал:

Не срач не нужно. Лучше пишите еще что-то полезное)

Можно я без вас, пользователь с рейтингом 14,  буду решать что мне писать, а что нет?
Если вы считаете данную информацию не интересной - не читайте. И не участвуйте в дискуссии, возможно она будет полезна другим людям.

Спасибо.

Поделиться этим комментарием


Ссылка на комментарий

 

20 минут назад, Yoda сказал:

Далеко не у всех есть возможность следить за творчеством данного персонажа и экстермально латать за ним недоработки. 
В не самых старых версиях все это было реализовано соверешенно по другому и цеплялось во все дыры при намеке на малейшее использование этого хлама.

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

Если нет возможности следить, то и не надо писать так, что это распространяется все версии.

 

26 минут назад, Yoda сказал:

Не надо превращать его в очередной срач.

Так вы сами способствуете этому. Прямо или косвенно, уж не знаю.

Поделиться этим комментарием


Ссылка на комментарий

Я без вас решу где мне участвовать, а где нет.

Если б я считал что статья не интересная то так бы и написал.

Но я написал что не нужно разводить срач, а лучше пишите еще что-то полезное, наподобие этой статьи.

 

Поделиться этим комментарием


Ссылка на комментарий

 

Цитата

 

Если нет возможности следить, то и не надо писать так, что это распространяется все версии.

 

 

Есть возможность однозначно не рекомендовать использовать данные дополнения.

В силу приведенных аргументов. А там каждый пусть решает как хочет.

 

 

 

Поделиться этим комментарием


Ссылка на комментарий

Очень полезная статья. Спасибо автору. У меня вот такой вопрос про фильтры которые сильно тормозят загрузку. Вот вы давали ссылку та тему видео с ютуба, где говориться что сначала подгружается только картинка (обложка, превью) и только при клике на видео уже подгружается фрейм. Так вот, нельзя ли сделать такое для фильтра, чтобы грузился просто чистый HTML к примеру из кеша, и только если пользователь нажал по фильтру то грузиться остальное (Тут я не силен, простите :mellow:) Ну вот как то так. Я это написал потому как использую ФильтрПРО, и при загрузки страницы он занимает огромное количество времени, и как это побороть не понятно. И даже если пользователь вобще не кликал по фильтру, а просто нажал на пагинацию то фильтр начинает свою работу, т.е жмем просто на вторую страницу, и вместо /?page=2, в URL выходит
 

Цитата

/#min_price=0&max_price=118544&category_id=59&page=2&path=59&route=product%2Fcategory


ЗАЧЕМ ? ДЛЯ ЧЕГО ? непонятно. Я же не взаимодействовал с фильтром, писал и разработчикам и в другие темы, пока внятного ответа не было, ровно как и предложений по исправлению.

Изменено пользователем Facebook

Поделиться этим комментарием


Ссылка на комментарий
11 часов назад, Facebook сказал:

Очень полезная статья. Спасибо автору. У меня вот такой вопрос про фильтры которые сильно тормозят загрузку. Вот вы давали ссылку та тему видео с ютуба, где говориться что сначала подгружается только картинка (обложка, превью) и только при клике на видео уже подгружается фрейм. Так вот, нельзя ли сделать такое для фильтра, чтобы грузился просто чистый HTML к примеру из кеша, и только если пользователь нажал по фильтру то грузиться остальное (Тут я не силен, простите :mellow:) Ну вот как то так. Я это написал потому как использую ФильтрПРО, и при загрузки страницы он занимает огромное количество времени, и как это побороть не понятно. И даже если пользователь вобще не кликал по фильтру, а просто нажал на пагинацию то фильтр начинает свою работу, т.е жмем просто на вторую страницу, и вместо /?page=2, в URL выходит
 


ЗАЧЕМ ? ДЛЯ ЧЕГО ? непонятно. Я же не взаимодействовал с фильтром, писал и разработчикам и в другие темы, пока внятного ответа не было, ровно как и предложений по исправлению.

 

Про это я даже забыл, хотя недавно сталкивался. Фильтр про большая редкость в последне время. Но в целом ренедирть на готовую страницу повторно набор товаров в нынешних реалиях - это плохая техника, равно как и даже очень быстрое, но ожидание ajax запроса, которым получается этот набор, даже если это 300-500мс. Ну вобщем тут как бы все понятно само собой.

 

А по фильтру в целом, вы почти правильно сформулировали решение. В идеальном мире, набор параметров атрибуции должен грузится первично либо по событию поведения пользователя, либо по окончанию загрузки базового контента. Это вкладывается в общую концепцию алгоритма оценки, основная суть которого отобразить первичный контент как можно быстрее.

Поделиться этим комментарием


Ссылка на комментарий
Raino

Опубликовано (изменено)

Еще есть вариант для видео с ютуба и аналогичных сервисов подгружать айфрем "полуавтоматически" не сразу при загрузке страницы, а например после скролла на х пикселей вниз. Боты не выполняют действия, фрейм не подгружают, оценку не снижает, а человек, получит нужный контент. Аналогично можно и с картами делать или любыми тяжелыми вещами, которые нужны не сразу, на первом экране, но на странице гарантированно нужны. Так можно мобильные пузомерки до 95-97 выгонять. В тексте просто ставите метку вида <div class=video-frame" data-video-src="код видео на ютубе"></div> ну и вешаете скрипт, который будет туда фрейм подгружать по событию- позволит не заморачиваться с картинкой-превью.

Изменено пользователем Raino

Поделиться этим комментарием


Ссылка на комментарий

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Вы комментируете как гость. Если у вас есть аккаунт, пожалуйста, войдите
Добавить комментарий...

×   Вы вставили контент с форматированием.   Удалить форматирование

  Разрешено использовать не более 75 смайлов.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.