Jump to content
  • entry
    1
  • comments
    33
  • views
    593

Оптимизация и ускорение сайта: JavaScript, CSS и пр., что работает на клиентской стороне (в браузере). Повышение оценки pagespeed Гугла

Известно, что работу сайта можно разделить на две независимые составляющие с определенной степенью условности:

 

  1. серверную (выполнение кода PHP, выполнение запросов БД и т.п.)
  2. клиентскую (выполнение кода JavaScript и т.д. и т.п., что выполняется в браузере)

 

 

Разбор полетов предлагаю делать на основе тестового сайта:

https://hi-optimizer.sitecreator.pro/

 

Входные данные:

дефолтная тема (шаблон),

присутствуют на странице:

  • Карта Яндекса
  • Jivochat
  • Яндекс метрика
  • Ютюб вставка

 

оценка гугла в этом случае падает до 29 баллов.

 

Спойлер

sitecreator_ru_2aZiOaFVYp.jpg

 

 

Речь пойдет об оптимизации процессов на клиентской стороне, т.е. в браузере.

Одним из важнейших и ресурсоемких процессов является выполнение программ на JavaScript в браузере.

Гугл в своих рекомендациях всегда предлагает обратить внимание на долго выполняющиеся скрипты.

 

sitecreator_ru_uF1yRS78AV.jpg

 

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

Как пример такого скрипта - это скрипт чата Jivisite.

 

 

sitecreator_ru_T0LTsaxE4a.jpg

 

 

 

Итак, что мы можем оптимизировать?

Ютюб-вставку и разнообразные карты (впрочем как и различные виджеты)   можно показывать пользователю тогда, когда он до них долистает и не тратить время на их загрузку до загрузки основного контента.   Это известный принцип отложенной ленивой загрузки (Lazy Load).  Это принцип применим не только к изображениям, но и к блокам iframe, которые используют как один из вариантов размещения карт, виджетов и т.д.

 

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

 

sitecreator_ru_wVAi1lv5Ir.jpg

 

 

Разумно использовать Lazy Load для загрузки карт, виджетов, ютюб-вставок и пр. iframe и т.п.?  Разумно.   Если у вас есть иные предложения по оптимизации указанных объектов, то, милости просим, поделитесь.

 

Документация по Lazy Load:

 

от разработчиков FireFox

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

 

документация от developers.google.com   (гугл для разработчиков)

Lazy Loading Images and Video

 

 

С картами и ютюбом справились. Но у нас есть еще скрипт Jovosite.

 

<script src="//code-ya.jivosite.com/widget/xxXbQf2XXX" async></script>

 

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

Логично бы сделать так чтобы он выполнялся позднее всех других скриптов на странице, а лучше после загрузки основного контента страницы.

Переместим скрипт в конец страницы?

 

<script src="//code-ya.jivosite.com/widget/XXXXXxxx" async></script>
</body></html>

 

Что мы получили от гугла в результате? блокировка уменьшилась до 670 мс против 1100, т.е. почти в два раза. Ура!?

 

sitecreator_ru_yfONh34ufa.jpg

 

 

И как же гугл оценил наши усилия по оптимизации? Что-то не очень.... Вместо 29 баллов теперь 32. Всего?  Да и параметр "время загрузки для взаимодействия" не радует.
 

Спойлер

 

sitecreator_ru_GR1MRVm4Li.jpg

 

 

 

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

Итак, код для эксперимента (он неидеальный, т.к. не учитывает возможные медленные соединения, но для эксперимента сойдет)

 

<script>
window.onload = function() {
			var src="//code-ya.jivosite.com/widget/XXXxxxXXX"
			var js = document.createElement("script");
			js.src = src;
			document.head.appendChild(js);
		};
</script>

 

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

 

sitecreator_ru_4FLGQhx37m.jpg

 

 

Что же реально может помочь изменить отношение гугла к оценке?

Попробуем отложить выполнение скрипта Jivosite на 3 сек или даже на 5 сек?  Чисто из соображений юзабилити это вполне оправданный ход.  Окошко чата вряд ли кому-то будет нужно раньше чем через 3 или 5 сек.

Гугл реагирует уже положительно прибавкой баллов за такой отложенный скрипт. Но видит ли гугл выполнение данного скрипта? Нет, не видит. Хотя гугл способен после полной  загрузки страницы и ее отображения еще несколько секунд оценивать работу JS в браузере.   Например, задержка в 1000 мс или 1500 мс обычно не поможет, т.к. гугл еще успеет поймать и оценить такой "запоздалый" скрипт.   Задержка, которую видит гугл, зависит от нескольких факторов и не может быть универсальной для всех сайтов и всех случаев. Нельзя назвать гарантированно минимальную задержку, после которой гугл не реагирует на выполнение скриптов. Задержка отсчитывается отсчитывается от события window.onload.

 

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

 

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

 

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

Если можете объяснить чем плох такой метод оптимизации загрузки JS, пожалуйста, с аргументами и фактами только.

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

 

Любой конструктивный диалог приветствуется.

Примеры ваших сайтов, на которых успешно работает оптимизация Jivosite также приветствуются.

 

Аргументы вроде

 

Цитата

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

 

не хотелось бы получать.  Если решили покритиковать, то покажите как делаете вы и объясните насколько ваша идея лучше.  Про секреты и ноухау лучше не стоит...

 

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

 

  • +1 1


33 Comments


Recommended Comments



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

В отличие от виджета чата Чатра  (смотрите пример выше).

 

 

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

 

sitecreator_ru_qQPM7kPV6Y.jpg

 

sitecreator_ru_d3sAfQGbCr.jpg

 

 

После оптимизации 90+:

 

sitecreator_ru_g09Vbb7Ro6.jpg

Share this comment


Link to comment

Esxawzi.jpg

 

Завистники заминусовали блог?

Неужели мой блог настолько бесполезный?

Или просто завистники сами ничего не умеют кроме как сектой прибежать и заминусовать?

 

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

Критики также не увидел никакой. Альтернативных вариантов или хотя бы вариантов для обсуждения тоже нет.

 

Впрочем, это никак не мешает мне делиться информацией.

Понимающий человек просто сможет выудить полезную информацию из моих методик. Ну а неудачникам остается только минусовать.

И выполнять работу для заказчиков.

  • +1 1

Share this comment


Link to comment

Про счетчики (Метрика, Аналитика и т.п.).  Стоит ли бояться санкций если ваш счетчик работает неверно?

 

 

 

Немного полезной информации для понимающих и думающих людей.

Насчет счетчиков.

 

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

Это всевозможные блокираторы рекламы вроде adBloock, AdGuard и т.д.

Они просто напросто отключают счетчики на сайте.

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

В режиме "Инкогнито" счетчики блокируются по умолчанию.

 

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

Скорее всего не ошибусь если скажу, что половина пользователей используют блокировщики ненужного контента.

 

 

Блокировщики блокируют не только рекламу, но они же блокируют Метрику, Аналитику и прочие счетчики.

 

sitecreator_ru_Dyoxq08QAY.jpg

 

sitecreator_ru_XDic4R9jTI.jpg

 

 

Было бы наивно полагать, что поисковики об этом не знают.   Поэтому сама идея наказывать сайт на "неправильный счетчик" выглядит довольно абсурдной с учетом данной информации.  С учетом установленных блокираторов добрая половина данных либо вовсе не отправляется в Метрику, Аналитику, либо отправляется в кастрированном виде, например, с отключенным вебвизором потому, что блокиратор может  снисходительно позволить один раз отправить какие-то данные, но не позволит делать это постоянно с отслеживанием движений пользователя.

 

Учитывая все вышесказанное + отсутствие в принципе санкционных фильтров поисковиков за "неправильные счетчики"  (официально) идея "пессимизации" за счетчик звучит совершенно надуманно, более того никто не знает таких примеров.

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

 

 

Сам Яндекс довольно спокойно описывает ситуацию, когда JS Метрики не работает. В этом случае вся информация в Яндекс не поступает или вовсе не поступает.

Будет ли Яндекс наказывать за то, что ему отправили не всю информацию?  Думаю, что вы и сами понимаете, что это абсурд.

 

 

sitecreator_ru_nkPIDwuQIx.jpg

 

 

 

Яндекс также пишет, что точность собираемых данных зависит от множества факторов и не может быть полностью достоверной. Тот же вебвизор, входящий в Метрику может глючить и давать неверные данные если не соблюдены определенные условия.   Не вполне валидный HTML? Тут уже верное поведение вебвизора метрики будет под вопросом.

 

 

 

sitecreator_ru_NvmoBUfLeU.jpg

 

 

 

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

Но Яндекс ничего не имеет против нестандартных счетчиков.

sitecreator_ru_VdFtASCZ03.jpg

 

 

sitecreator_ru_cKuJUv9DCC.jpg

 

 

Также Яндекс считает совершенно штатной ситуацией когда Яндекс не может найти свой счетчик на странице.

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

 

Как бы там ни было, но Hi-Optimizer при верной настройке не лишает хозяина сайта нормального сбора статистики Метрикой, Аналитикой и т.п.

Это тщательно проверялось на разных сайтах.

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

 

 

Вообще, на сайте поддержки Яндекс-Метрики миллион вопросов о неверно работающей Метрике.  Но вы там не найдете даже намека на возможные санкции за неверный счетчик. Ответы дают сотрудники Яндекса. Вы и сами можете задать в лоб вопрос "а что будет если ...?"

 

Тема на Яндексе так и называется про "неработающую толком метрику".

 

https://yandex.ru/blog/metrika-club/schetchik-yandeks-metrika-korrektno-ustanovlen-no-ne-rabotaet

 

sitecreator_ru_8vlJTMlb9B.jpg

 

 

sitecreator_ru_G6Btq8ZG5v.jpg

 

Share this comment


Link to comment

Еще в тему о возможной неверной статистике.

О возможном обмане поисковиков.

Тут нужно сразу сказать, что оптимизация никак не изменяет код самой Метрики и с помощью оптимизации поэтому никак невозможен обман поисковика.

Утверждение обратного будет, мягко говоря, лукавством.

 

Есть так называемая накрутка по поведенческим факторам. Имитация переходов с поисковиков, которых не было. Да, за это поисковики могут наказать.

Но только поведенческие факторы поисковики не отслеживают именно из вашего счетчика.

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

 

Небезызвестный Платон о возможности накрутки за счет ПФ писал:

 

Цитата

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

 

 

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

Сам Яндекс рекомендует ставить счетчик в самом верху. Это хорошо для счетчика, но плохо для скорости сайта.

Самый просто способ оптимизации - это перенос счетчика в самый низ.

Что может случиться страшного в этом случае?

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

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

 

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

Просто напросто загрузка данного кода Метрики происходит с меньшим приоритетом, т.е. после загрузки наиболее важных файлов, а не наоборот.

Откладывается время старта Метрики, но никак не изменяется сама Метрика.

Share this comment


Link to comment

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

Один из таких параметров - это "совокупное смещение макета".

Если у вас верстка построена так, что после формирования HTML (рендеринга и отображения результата в браузере)   происходит изменение страницы за счет JS,  то крупные изменения сильно повлияют на оценку гугла.

 

В примере показываю как выглядит страница до начала работы JS по перестроению страницы.   Разница получается очень большая.  В итоге очень низкая оценка даже для десктопа.

 

sitecreator_ru_7w1aD1LD1M.jpg

 

 

 

До старта JS по перестроению страницы:

 

 

 

LS049TU.jpg

 

 

 

 

После завершения JS по перестроению страницы:

 

 

 

Yku21UR.jpg

 

 

 

Вывод:   не нужно делать верстку средствами JS.   Чем меньше перестроений, то тем лучше.

Share this comment


Link to comment

После введения новых  параметров , резко снизились оценки.

Раньше было как отмечено зеленым пунктиром.

 

image.thumb.png.2b77d3bde6d9a80da0817c1dcdda106d.png

 

 

 

Pagespeed для компьютеров показывает CLS

 

image.png.ab9b36b1e0c1b5156a09728261806439.png

 

 

 

Для  мобильных оценка ниже. Но CLS =0 при имитации загрузки страницы??

 

 

image.png.a15b4ef0a8ed50a2e3e0260e70c3fe20.png

 

 

Шаблон куплен здесь на форуме.

Трясти автора шаблона? или самому разбираться?

 

Share this comment


Link to comment
17 часов назад, Bigbrother72 сказал:

Трясти автора шаблона? или самому разбираться?

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

Share this comment


Link to comment

Что-то я не понял как правильно поступить с кодом Jivochat? Как правильно сделать?

Share this comment


Link to comment

Guest
You are posting as a guest. If you have an account, please sign in.
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.