pagespeed Буслік Кэш / Buslik Cache Full

[buslikdrev]

Приобрести модуль и узнать о нём подробнее можно здесь:

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

 

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

Мысли таковы:

- упор на оптимизацию кода (сейчас библиотека составляет около 2000 строк);

- скорость;

- расширенные настройки;

- компактность (то есть сколько всего можно в одном поле прописать);

- подробное описание полей.

 

Пример настройки демо сайта:

Скрытый текст

 

 

Как видим легко и просто. Накидываем всё возможное, потом играемся ставя\убирая в начале строки " ; ", подбирая оптимальное решение.

Сложность может быть, когда нужно писать js-код (нужен опыт и фантазия), чтобы разрешить какую-нибудь ситуацию, как в примере с видео окном (не хочу блок отправлять в lazy load html, так как он не хочет тогда отображаться на странице Google PageSpeed -  на самом деле такова может быть прихоть заказчика, так как он будет думать, что перестал работать модуль).

Для ценителей своего времени, есть возможность заказать настройку от автора (при заказе необязательно приобретать модуль).

 

Большинство вопросов решает функционал "Замена в html-коде", когда отсутствует иная возможность.

Например, мы хотим html тег <header> подгружать по скроллу, но в внутри <header> у нас встречается <noscript>, а значит нам нужно произвести его замену, так как loading lazy html построен по принципу применения тега <noscript>. В таком случае в loading lazy html предусмотрен атрибут data-busloadinglazy-remove, который удаляет ненужные теги.

Но, есть задача: нам нужно подцепиться к ненужному тегу <noscript>. Для этих целей в функционале замены предусмотрена возможность замены несколько строк.

Чтобы заменить такой код:

Скрытый текст

<header>
<noscript>
<div>

</div>
</noscript>
</header>

 

Прописываем в поле "Замена в html-коде":

Скрытый текст

Для Windows серверов

#|<noscript>[\r][\n]<div>|<div data-busloadinglazy-remove="">[\r][\n]<div>
#|</noscript>[\r][\n]</header>|</div>[\r][\n]</header>

 

Для Unix (Linux и т.д.) серверов

#|<noscript>[\n]<div>|<div data-busloadinglazy-remove="">[\n]<div>
#|</noscript>[\n]</header>|</div>[\n]</header>

 

В итоге получим:

Скрытый текст

<header>
<div data-busloadinglazy-remove="">
<div>

</div>
</div>
</header>

 

 

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

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

 

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

Суть работы такая: создаётся функция, она срабатывает и сохраняет время начала работы. После загрузки основного скрипта метрики и аналитики, они получают данные, на которые основывают поведенческий фактор. Обратите внимание, что у Яндекс метрики можно управлять временем одной из функций поведенческого фактора с  помощью accurateTrackBounce - событие без отказов регистрируется через 10 секунд (учёт отказов).

Скрытый текст

<!-- Google Tag Manager -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX&l=dataLayer" type="text/javascript"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'gtm.start':new Date().getTime(),event:'gtm.js'});
</script>
<!-- Google Tag Manager -->
<!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Google Tag Manager -->

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X" type="text/javascript"></script>
<script type="text/javascript">
	window.dataLayer = window.dataLayer || [];
	function gtag(){window.dataLayer.push(arguments);}

	gtag('js', new Date());
	gtag('config', 'UA-XXXXXXXX-X');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->

<!-- Yandex.Metrika -->
<script async src="https://mc.yandex.ru/metrika/tag.js" type="text/javascript"></script>
<script type="text/javascript">
	//https://yandex.ru/support/metrica/code/counter-initialize.html
	window.ym = window.ym || function() {(window.ym.a = window.ym.a || []).push(arguments);};
	window.ym.l = 1*new Date();

	ym(00000000, "init", {
		clickmap:true,
		trackLinks:true,
		accurateTrackBounce:10
	});
</script>
<!-- Yandex.Metrika -->
<!-- Yandex.Metrika -->
<noscript><div><img src="https://mc.yandex.ru/watch/00000000" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- Yandex.Metrika -->

 

 

Суровый Google PageSpeed:

Скрытый текст

 

Да нет, не суровый хоть и изменил алгоритм на суровый, просто сеть плохая между моим хостингом и сервером Google PageSpeed. В браузере страница загружается за пол секунды, а Google PageSpeed пишет про 2 секунды (First Contentful Paint 1,5 секунды на сетевой доступ + 0.5 секунды на загрузку содержимого).

 

Это тот момент, когда правильный выбор хостинга или сервера практически решает вопрос по баллам Google PageSpeed.

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

Если нет возможности переписать стили, то можно попробовать функцию модуля "Сбор критических стилей" и "Замена в css-коде, js-коде".

С помощью инструмента "Coverage" Google Chrome можно найти ненужные стили и закомментировать, не трогая стили зависящие от ширины экрана (нужно иметь ввиду), подробности тут.

Немного сократив стили bootstrap 3 (закомментировал иконки и загрузку шрифтов google), я могу в принципе метрику google запускать после загрузки страницы:

Скрытый текст

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

Скрытый текст

 

Поэтому прежде чем прибегать к оптимизации модулем, подберите себе хостинг или сервер (подбор хостинга или сервера с настройкой под ключ можете заказать у @snastik). После получения нормального сервера, возможно, простого сжатия стилей и скриптов будет достаточно (а такая возможность во многих шаблонах есть, а если нету, то есть лайтовая версия Буслік Кэш).