Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

улучшаем GooglePagespeed своими руками без модулей и хамовитых авторов.


Yoda

1,849 views

Зашел я сегодня посмотреть свежую ленту форума и увидел очередное хамство нашего героя:

Это ужасно, ужасно ужасно  в рамках поддержки платного дополнения, которое только разводит и не делает результат!

 

Но мы же с вами грамотные красавчики. И мы  понимаем что волшебной таблетки не может быть!

 

Но нам гуглпейдж спид кажить все эти FCP CLS и весь этот бред типа.

 

Друзья. ни один модуль не решит ваши проблемы.

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

 

Но ок, что же нам делать, у нас есть рабочий интернет-магазин. мы хотим подтянуть позиции по выдаче и стоим на распутье, хотим быстрый First contetn paintfull и отсутствие Cumulative Layout Shift.

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

 

Итак, что я вам советую сделать, чтобы у вас улучшились показатели, без хамства авторов дешевых бесполезных поделок и при этом своими руками и легко:

 

1. Все изображения во всех модулях, списках, баннерах и так далее идут в Lazy, просто берете и делаете нативное Lazy 

https://developer.mozilla.org/ru/docs/Web/Performance/Lazy_loading

Просто добавляете к изображениям свойство loading="lazy"

 

2. все изображения переводите в webp, для этого не надо бежать к сайткиратору и покупать платный модуль, просто пользуете это:

3. В большинстве шаблонов у нас по умолчанию в верстке list, который потом через js переводится в grid, сделайте grid в верстке по умолчанию и это отличн вам решит CLS показатель, так как у вас не будет сдвига макета при рендере, если не знаете что это и не знаете как сделать - долбите авторов шаблонов.

 

4. Новые хотелки page speed хотят, чтобы skeleton разметки страницы был сразу с установленными параметрами размеров изображений. Если у вас единый размер, задайте во всех выводах изображений width и height принудительно.

 

5. Используйте современные шаблоны. Да я верю, что вы все положили много денег и ресурсов в то что у вас есть, но

 

 

или 

 

Криво косо, но содержат в себе какие-то built in механизмы отпимизации-сжатия скриптов стилей и дадут вам меньше запросов на вебсервер.

Несмотря на кривость реализации, это лучше чем ничего!

А еще шаблон от @29aleksey все таки прилично выглядит по сравнению со всеми остальными поделками за полтосик.
Мне бы в 2012 году такой, для моих магазинов. Реально Леха-кравачик и душу вложил! 

 

6. Если вам вот прямо необходим JivoChat, 

Вот вам отличный мануал, как решить с  ним проблему;

https://habr.com/ru/post/447262/

 

7. Да я молчу про TTFB, который тоже влияет на оценку pagespeed, да я знаю как это сделать, да, я с удовольствием сделал бы  бесплатную таблетку, которая решала проблему быстрой загрузки HTML контента, но это не возможно к сожалению, Минимум что я вам могу рекомендовать, едьте на быстрые хостинги, пользуйте пхп 7+, следите за включенным opcache.

 

8. Если  у вас там метрики  и аналитика от гугла - снести все в футер, это плохой совет, возможно вы лишитесь 3-5% каких то показателей, но зато внешние скрипты не затупят.

 

9. если у вас модуль доставки типа сдэка - посмотрите, чтобы он не пытался грузить яндекс карты на все страницы магазина.

 

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

 

11. Счетчики, аналитики и т.д. Ни в коем случае не делайте их подгрузку по пользовательскому событию или в отложенную загрузку. Уж если сильно вам мозолит глаза 10-15 баллов, которые они навешивают, снесите их  в футер.

 

12. Вывод и скрытие контента в зависимости от типа устройства. Используйте с умом. Пользуйтесь не js библиотеками а mobiledetect, от того что вы спрячете в display none какой либо элемент, он все равно будет опубликован в DOM страницы, если что-то хотите убрать для мобильных устройств, просто не выводите этот контент фактически при генерации html кода!

 

 

 

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

 

upd: ну и еще банальшина, но проверяйте настройки кеширования сжатия статики, и если у вас webp то и для него добавляйте правильные заголовки.

К примеру, если у вас ISP

то должно выглядеть так:

 

image.png.55ceab349281943ac3c9084303a94c90.png

 

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

Опять же возвращаясь к ISP менеджеру, который заполонил все, попросите вашего вебмастера или саппорт хостинга проверить, чтобы nginx отдавал вот для этого всего правильные заголовки:

 

        location ~* ^.+\.(webp|jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|flv|swf|woff2?|ico)$ {
            access_log off;
            expires max;
            break;
        }

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

  • +1 22

16 Comments


Recommended Comments

Поучительно однако.

Нужно взять на заметку.

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

Спасибо, кэп.

  • +1 1
Link to comment

По мне.. вам бы уже пора завязывать с вашими войнами. Я был один из первых кто установил его (сайткиратор) разработку на свой сайт и закрыл много вопросов разом (модуля тогда еще небыло на форуме) На днях я пытался купить у сайткиратора модуль для сжатия фото на свой второй сайт , задал вопрос автору модуля, но внятного ответа так и неполучил...а точнее я непонял что вообще происходит:? он как загнаный зверь мечется, а толком обьяснить не может. Бесплатные дополнения хорошо, но как быть если непонимаешь в этом ничерта? взять бесплатный ocmod и что дальше? если нужна адаптация или править код, к кому потом идти ? на форуме толковых разрабов по пальцам пересчитать и те загруженны на месяц вперед, клали они на мои проблемы.

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

  • +1 1
Link to comment
6 минут назад, vasilev86 сказал:

По мне.. вам бы уже пора завязывать с вашими войнами. Я был один из первых кто установил его (сайткиратор) разработку на свой сайт и закрыл много вопросов разом (модуля тогда еще небыло на форуме) На днях я пытался купить у сайткиратора модуль для сжатия фото на свой второй сайт , задал вопрос автору модуля, но внятного ответа так и неполучил...а точнее я непонял что вообще происходит:? он как загнаный зверь мечется, а толком обьяснить не может. Бесплатные дополнения хорошо, но как быть если непонимаешь в этом ничерта? взять бесплатный ocmod и что дальше? если нужна адаптация или править код, к кому потом идти ? на форуме толковых разрабов по пальцам пересчитать и те загруженны на месяц вперед, клали они на мои проблемы.

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

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

 

Я уже давно не обращаю внимание на идиотов! И вам советую!

  • +1 2
Link to comment
3 минуты назад, buslikdrev сказал:

Я выполнил некоторые рекомендации выше + собрал стили и скрипты, и добавил предзагрузку изображений которые есть в шапке

<link href="image/catalog/logo.png" rel="preload" as="image" />:

  Скрыть контент

image.thumb.png.42d42713c69349bb5ff42476e1a0fdb3.png

 

Давай тезисно дополнения к посту что еще сделать.

 

Link to comment

Йода красава. Эх, запись бы на  пару лет раньше)))

Link to comment
В 13.05.2021 в 02:24, Yoda сказал:

Я уже давно не обращаю внимание на идиотов! И вам советую!

Нашел в теме единственную полезную фразу. Оценил. С удовольствием буду применять ее к постам и темам автора.

  • +1 2
Link to comment
Цитата

3. В большинстве шаблонов у нас по умолчанию в верстке list, который потом через js переводится в grid, сделайте grid в верстке по умолчанию и это отличн вам решит CLS показатель, так как у вас не будет сдвига макета при рендере, если не знаете что это и не знаете как сделать - долбите авторов шаблонов.

Это решается так: https://forum.opencart.pro/topic/3639-как-сделать-вывод-товаров-всегда-только-сеткой/?tab=comments#comment-32680

Link to comment
Shureg

Posted (edited)

5 часов назад, NazarVen сказал:

уважаемый автор

как Вы относитесь в такому мнению, что  lazy убивает индексацию

Убивает не lazy, а убогие плагины и некомпетентные сайтописатели с древними технологиями. Подкидываание картинок скриптом уже неактуально, loading="lazy" решает и отлично работает. При этом индексацию только улучшает.

Edited by Shureg
  • +1 1
Link to comment
Yoda

Posted (edited)

18 часов назад, NazarVen сказал:

уважаемый автор

как Вы относитесь в такому мнению, что  lazy убивает индексацию

 

как пример приведу эту статью

https://vc.ru/seo/169540-kak-lazy-load-ubivaet-vashi-sayty-i-chto-s-etim-delat

Давайте не будем обращать внимания на писульки каких то псевдоспециалистов на VC.

В посте я привел пример реализации Lazy через нативное свойство css, которое поддерживает большинство современных браузеров.  А не пример с использованием сторонних библиотек, которые работают с дополнительными атрибутами разметки типа data-image, и переставляют заглушку по умолчанию на изображение в атрибуте.
Но даже если использовать и такую технику - ничего вам не мешает сделать дополнительную разметку в тегах <noscript></noscript>.

 

Так что не читайте утренних газет! Они вредят аппетиту!

Edited by Yoda
Link to comment
13 години назад, Yoda сказав:

Давайте не будем обращать внимания на писульки каких то псевдоспециалистов на VC.

В посте я привел пример реализации Lazy через нативное свойство css, которое поддерживает большинство современных браузеров.  А не пример с использованием сторонних библиотек, которые работают с дополнительными атрибутами разметки типа data-image, и переставляют заглушку по умолчанию на изображение в атрибуте.
Но даже если использовать и такую технику - ничего вам не мешает сделать дополнительную разметку в тегах <noscript></noscript>.

 

Так что не читайте утренних газет! Они вредят аппетиту!

Спасибо за пояснения

Link to comment

Йода прям радует своим стилем ведения переговоров) Остроумия ему не занимать, ум свеж, начищен, и блестит так, что некоторым аж смотреть не видно)

Правда матка VS Йода = Йода (TKO) 1 раунд 0:01

 

Умного человека видно издалека, даже если где-то и ошибался, это ладно, это нормально, бывает. Забавнее наблюдать, как потом некоторые люди этими мелкими ошибками (недочётами) пытаются оправдать свой более низкий уровень осознания бытия.

Link to comment

ничего нового, но все конкретно по делу. хорошая компиляция советов

 

 

Цитата

12. Вывод и скрытие контента в зависимости от типа устройства. Используйте с умом. Пользуйтесь не js библиотеками а mobiledetect, от того что вы спрячете в display none какой либо элемент, он все равно будет опубликован в DOM страницы, если что-то хотите убрать для мобильных устройств, просто не выводите этот контент фактически при генерации html кода!

по поводу этого хочу добавить немного конкретики. еще лучше убрать это из контроллера, что положительно скажется на ttfb

есть либа system/helper/general. туда можно положить функцию детекшена мобилки. что-то вроде

 

 

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

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

$data['column_left'] = isMobile() ? "" : $this->load->controller('common/column_left');

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

 

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

https://developer.mozilla.org/ru/docs/Web/HTML/Element/img#attr-loading

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.