удалите неиспользуемый код javascript bitrix
Выполнение требований Гугл для Битрикс
В связи с увеличением доли Гугл в рунете задача максимально устранить его рекомендации для сайтов Битрикс становится очень востребованной.
Добавлю дополнительные рекомендации от 19.03.2019:
1) Не следует экономить на качестве хостинга, это напрямую влияет на производительность системы и соответственно на скорость загрузки
2) Следует ответственно подходить к выбору коммерческих шаблонов, проверьте демо сайт коммерческого шаблона перед покупкой на соответствие гугл требованиям. Если все не в норме, то и у вас будет не в норме, и вы заплатите дважды.
Экономия на стадии создания сайта выходит боком в будущем.
3) Если вы купили шаблон с плохими показателями, тогда не откладывайте создание мобильного шаблона либо отдельной мобильной версии, благо лицензии сейчас это без проблем позволяют.
4) Старайтесь не использовать изображения формата png их нужно сразу менять при оптимизации на jpg
5) Не используйте на главной странице видео из ютуба и карты гугл (яндекс)
6) Списки элементов (новости, услуги и т.д.) не выводите больше двух строк
Рассмотрим ряд моментов позволяющих выполнить эти требования:
1) Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение
Тут три момента. Если скрипты шаблона можно перенести вызов в подвал сайта, то что делать с скриптами коробки? Например, с такими:
http://сайт-битрикс/…rix/js/main/core/core.js?143266495694768
http://сайт-битрикс/…s/main/core/core_ajax.js?143266495635166
http://сайт-битрикс/…js/main/json/json2.min.js?14326649563467
http://сайт-битрикс/…/js/main/core/core_ls.js?143266495610330
http://сайт-битрикс/…bitrix/js/main/session.js?14326649563170 и т.д.
Для решения этого вопроса потребуется наличие активной лицензии сайта позволяющее получить новые обновления. В последней версии продукта появилась возможность перенести js скрипты вниз страницы. Галочка появилась в настройках главного модуля.
Второй момент. Перенос и объединение скриптов может отразиться на работоспособности разработанных компонентов, а также на подключенных сторонних ресурсов, например, буржуйская голосовалка от polldaddy.com
Третий момент. Файлы стилей системы не будут перенесены вниз сайта.
3)В следующей из рекомендаций Гугл «Используйте кеш браузера» — Используйте кеш браузера для следующих ресурсов:
http://сайт-битрикс/….list/foto-home-2908/images/foto-fon.jpg (не указан срок действия)
-это картинка, которая используется в компоненте.Каким образом указывать в заголовках HTTP дату или срок действия статических ресурсов, чтобы браузер загружал уже полученные ранее ресурсы с локального диска, а не из Интернета. В компоненте кеш включен и используется, что не хватает для выполнения этой рекомендации?
Указывается время жизни кеша браузера заголовком header(‘Expires: Mon, 26 Jul 1997 05:00:00 GMT’);
Настройка такие заголовков производится на стороне сервера, битрикс не устанавливает эти заголовки.
Для включения использования кеша браузера достаточно подать заявку в тех. поддержку хостинга
Например, в хостинге reg.ru с этим проблем нет.
4) Ключевое требование «Адаптируйте размер контента для области просмотра»
Тут конечно условно все просто. Нужно внедрять адаптивную верстку в систему управления, что по факту является довольно не тривиальной трудоемкой задачей
Если вам требуется выполнения комплекса работ по выполнению требований Гугл или отдельно услуга по внедрению адаптивности, обращайтесь, опыт и портфолио есть.
Ещё статьи:
20.09.2021 Разговор с рекрутером в 2021. Мидл это младший специалист и на удалёнку не ниже сеньёра
Рекрутер: В принципе ок, но обычно младших специалистов мы в офис берем). Что скажете?
П.С. Мда, интересно оказывается, что мидл это младший специалист. ID: 320
01.12.2020 Свершилось, битрикс перестал поддерживать mbstring.func_overload
Теперь для обновления на версию v20.100.0 требуется удаление опции mbstring.func_overload. Эта опция более не требуется и не поддерживается платформой. ID: 313
13.08.2020 Получить id элемента привязки к пользователю битрикс
Получить id элемента, который добавлен в свойство привязки к пользователю битрикс ID: 250
Новые статьи в блоге:
23.09.2021 Тест провайдера adminvps.ru Тариф Битрикс 1 в 2021
Провёл тесты производительности Битрикс у провайдера adminvps.ru Тариф Битрикс 1.
В целом результаты мне очень понравились, что бросилось в глаза: ID: 321
07.05.2021 Дайджест №1 Ваджра и еврейский вопрос
На днях Ваджра зацепил так называемый «еврейский вопрос», выдержка цитата:
На днях я был безжалостно записан в антисемиты. Забавно. Честно говоря. ID: 318
Ускорение: отключаем JS библиотеку битрикса
Повышение производительности битрикс путем отключения ненужных библиотек.
Рядовой сайт на битрикс обычно не использует встроенную js библиотеку, либо использование не является основным способом разработки. В таких случаях, подключаемые файлы типа «kernel_main.js», «kernel_main.css» желательно отключить, т.к. любые лишние файлы тормозят систему и снижают очки производительности в поисковых системах, что может повлечь за собой ухудшение позиций в поисковой выдаче.
Для начала, можно выполнить самые очевидные действия:
В компонентах интернет-магазина подключение встроенных JS библиотек отключается при помощи следующего параметра компонента:
Отключаем счетчик монитора производительности битрикса. После этого, перестанет подключаться файл «bx_stat» и монитор производительности перестанет работать. Хм, потеря не из разряда трагичных, покуда для его функционирования используются методы, сами по себе замедляющие сайт. Для отключения счетчика, используйте данный код в файле /bitrix/.settings.php:
Далее ищем, в каких файлах подключается kernel_main.js, для этого в файле «/bitrix/modules/main/tools.php» в функции «CJSCore::Init» вставляем указанный ниже код. Обновляем страницу сайта и пишем в лог какие файлы используют эту функцию. После этого код сразу же удаляем.
Далее решение по отключению библиотек из серии «бабушка психанула». Не рекомендую, сам использую только если нужно проверить какова будет производительность без библиотек:
После отключения библиотек, смотрим в консоль браузера на предмет наличия ошибок. Так проще всего определить, где именно используется встроенная js библиотека по наличию ошибок вида «BX is not defined». Часто бывает, что функционал, использующий BX весьма прост и легко переделывается на jquery. Но это, конечно, не всегда так. В тяжелых случаях, при переписывании кода на jquery, я использую следующую шпаргалку:
Оптимизация сайта для PageSpeed Insights | Статьи CMS «1С Битрикс»
Задача
Провести оптимизацию выдачи контента Битрикс, контроль качества оптимизации провести при помощи PageSpeed Insights.
Решение
Инструменты для проверки скорости
Сервисы оптимизации изображений
Общие рекомендации
Перенос js и css в конец страницы
Для корректной работы битрикс с файлами стилей и скриптов их нужно подключать при помощи функций Битрикс:
Так же можно проставить галки Создавать сжатую копию объединенных CSS и JS файлов и Переместить весь Javascript в конец страницы
Программно опцию “Переместить весь Javascript в конец страницы” можно активировать так:
В случае программной активации галочка в админкеработать не будет, т.е. скрипты всегда будут помещаться в конец страницы.
Не все скрипты нужно помещать в футер. например tagManager от гугла должен быть вверху. Для исключения скрипта из переносимых нужно добавить атрибут data-skip-moving=true в тег script. Пример:
Для переноса CSS в конец страницы у Битрикса нет стандартных средств, но т.к. за вывод css отвечает отдельный метод, то мы можем вывести его в footer.php самостоятельно.
Для этого нужно вместо:
В файле header.php добавить:
В файле footer.php добавить:
Исключить служебные скрипты и стили битрикс из формирования пользовательских страниц сайта
Для этого нужно добавить обработку контента страницы перед выдачей его из буфера браузеру.
Как вы избавляетесь от неиспользуемого CSS-кода? Часть 1
Автор статьи, первую часть перевода которой мы сегодня публикуем, хотел бы, чтобы читатели заранее знали о том, что избавление от ненужного CSS — это трудная задача. Если вы это читаете в надежде найти некий инструмент, запустив который, вы сможете узнать о том, какой именно CSS-код можно безбоязненно удалить из вашего проекта, то… Есть подобные инструменты, но их нужно использовать крайне осторожно, так как ни один из них не способен дать достойный ответ на вопрос о неиспользуемом CSS.
Несложно понять, что любому веб-разработчику хотелось бы взять некую утилиту, запустить её, и удалить тот ненужный CSS, о котором она сообщит. Пара минут — и сайт ускорен. Но не всё так просто. Автор этого материала полагает, что к подобным инструмента стоит относиться со здоровым скептицизмом. Ни один из них не лжёт разработчику. Эти инструменты обычно просто не обладают достаточным объёмом информации, позволяющим им выдать результаты, которым можно безоговорочно доверять. Но это не означает, что такими инструментами невозможно пользоваться. Не значит это и того, что от неиспользуемого CSS никак нельзя избавиться. Обсудим это.
Зачем избавляться от неиспользуемого CSS?
Я полагаю, что главную причину, по которой кому-то может понадобиться избавиться от неиспользуемого CSS, можно описать с помощью следующего примера. Предположим, вы пользуетесь CSS-фреймворком (вроде Bootstrap), и в ваш проект попадает весь CSS-код этого фреймворка. А реально в проекте применяется лишь небольшая часть такого кода. Как избавиться от всего ненужного?
Я могу проникнуться чувствами того, кто оказался в подобной ситуации. CSS-фреймворки часто не дают разработчикам простых способов выбора именно тех возможностей, которые применяются в конкретных проектах. При этом доведение исходного кода фреймворка до состояния, идеально соответствующего некоему проекту, может потребовать от команды такого уровня опыта, которого у неё может и не быть. Подобная ситуация уже сама по себе может стать причиной поиска фреймворка.
Предположим, вы загружаете 100 Кб CSS. Я бы сказал, что это много. (В тот момент, когда я это пишу, на сайте css-tricks.com используется около 23 Кб CSS. Здесь имеется довольно много страниц и шаблонов. При этом я ничего особого не делал для того, чтобы уменьшить размер CSS.) Тут у вас возникает подозрение, что некую часть из этого объёма кода вы не используете. А, может быть, вы находите некие доказательства этого. Я тут вижу причину бить тревогу. Если у вас имеется JPG-файл объёмом в 100 Кб, который можно сжать до 20 Кб, обработав его неким инструментом, то это замечательно, и это стоит сделать. Но если нечто подобное сделать с CSS, то подобное гораздо важнее. Дело в том, что CSS загружается в начале загрузки страницы и является ресурсом, блокирующим рендеринг. JPG-файлы такими ресурсами не являются.
Анализ ситуации с помощью инструментов разработчика Chrome
Инструменты разработчика Chrome, вкладка Coverage
Мне неприятно это говорить, но анализ сайта с помощью вкладки Coverage оказался практически бессмысленным занятием. То, что я увидел, эти 70.7%, представляет собой ужасную картину, которая играет на моих сомнениях, но ничего конкретного этот анализ мне не даёт, в результате мне остаётся лишь беспокоиться о том, что на моём сайте что-то не так.
Возможно, подобный анализ сайта и будет тем самым механизмом, который наведёт вас на мысль о том, что вам нужно найти и удалить CSS-код, который загружается, но в вашем проекте не используется.
Моя первостепенная проблема
В деле поиска и удаления неиспользуемого CSS-кода меня больше всего беспокоит следующее. Предположим, некто смотрит на результаты анализа и видит неиспользуемые фрагменты CSS.
Неиспользуемые фрагменты CSS
Он думает: «Отлично, удаляю всё лишнее!». Лишнее удаляется, а потом оказывается, что было оно вовсе не лишним, и что его удаление привело к большим проблемам со стилизацией на всём сайте. Вот в чём тут дело: можно быть полностью уверенным в том, что некий CSS-селектор не используется, только если провести изыскания по следующему плану:
Нечто подобное — это слишком сложно для автоматических средств анализа CSS. Они не в состоянии идеально выполнить подобные проверки, особенно если учитывать анализ сайта в ситуации неопределённости. Речь идёт, например, об исследовании проектов в различных браузерных контекстах (разные размеры экранов, разные возможности браузеров, разные браузеры), и об учёте влияния на сайт сторонних библиотек.
А сейчас я хочу показать пример того, как все те проблемы, о которых я только что рассказал, выглядят на практике.
PurifyCSS Online
Я решил попробовать оптимизировать css-tricks.com с помощью ресурса PurifyCSS Online. Ему можно передавать ссылки, а он тут же выдаёт готовый к использованию CSS. Я «скормил» этому сайту css-tricks.com и в моём распоряжении оказался новый CSS-код. Вот что получилось после того, как я этим кодом воспользовался.
Слева — обычный вид css-tricks.com. Справа — результат применения нового, «очищенного» CSS. В этом новом коде недоставало много такого, что нужно для различных страниц сайта
Вероятно, я уже рассказал достаточно для того, чтобы вы поняли, что я не случайно так мало доверяю подобным инструментам.
Очистка CSS с помощью PurifyCSS как часть процесса сборки проекта
PurifyCSS, вероятно, чаще используется в роли инструмента, применяемого при сборке проекта, чем в роли онлайн-средства для очистки CSS. В документации проекта есть инструкции по его использованию при применении Grunt, Gulp и webpack. Вот, например, обработка файлов по шаблонам:
Такой подход позволяет добиться гораздо большей точности. Материалы сайта, передаваемые на анализ, могут представлять собой список, в который входит каждый шаблон, каждый фрагмент, используемый для построения страниц, каждый JavaScript-файл. Может оказаться так, что подобный список ресурсов непросто поддерживать, но это позволяет учесть всё, что можно учесть. Это, правда, не относится к содержимому страниц, лежащему в неких хранилищах (вроде блог-постов, которые хранятся в базе данных), и к стороннему JavaScript-коду, но, возможно, это в некоторых случаях и неважно, или, может быть, разработчик способен будет как-то учесть CSS-нужды подобных ресурсов.
В документации к конкуренту PurifyCSS PurgeCSS есть предупреждение, касающееся способа обработки ресурсов, используемого PurifyCSS. А именно, речь идёт о том, что PurifyCSS может работать с ресурсами любых типов, а не только с HTML и JavaScript. PurifyCSS в ходе работы анализирует все слова в файлах и сравнивает их с селекторами в CSS-коде. Каждое слово рассматривается как селектор. То есть — множество селекторов может быть ошибочно признано используемыми на сайте. Например, в текстовом наполнении файла, в обычном предложении, может присутствовать слово, соответствующее некоему CSS-селектору.
Об этой особенности PurifyCSS стоит помнить. Этот инструмент ищет CSS-селекторы в материалах сайта, применяя предельно простой алгоритм. Это, с одной стороны, толковая идея, а с другой — это довольно-таки опасно.
Сервис UnusedCSS
Ручная настройка некоего инструмента, проводимая так, чтобы этот инструмент проанализировал бы каждую страницу, чтобы он рассмотрел её со всех возможных точек зрения, это, конечно, скучная рутина. При этом такая работа должна проводиться на ежедневной основе, так как анализируемые сведения о сайте должны пополняться новыми данными по мере развития проекта. Существует один онлайн-сервис, который называется UnusedCSS. Он самостоятельно обходит страницы сайта, избавляя разработчика от массы однообразной работы. Этому сервису достаточно передать единственную ссылку на сайт.
Я оформил платную подписку на этот сервис и проанализировал с его помощью css-tricks.com. Надо признать, что после того, как я взглянул на результаты, у меня возникло такое ощущение, что выглядят они гораздо точнее, чем то, что мне доводилось видеть раньше.
Анализ css-tricks.com с помощью UnusedCSS. В отчёте говорится о том, что на сайте используется 93% от загружаемого CSS-кода. Мне это кажется близким к истине, так как я вручную написал весь CSS-код для этого сайта
Сервис, кроме того, позволяет загрузить файл с очищенным CSS-кодом и предлагает возможности по управлению содержимым этого файла. Например, это включение и отключение селекторов, которые разработчику хотелось бы или не хотелось бы добавлять в CSS-код. Предположим, разработчик видит имя класса, которое, по мнению UnusedCSS, на сайте не нужно, но разработчик совершенно точно знает о том, что без этого имени класса он обойтись не может. В результате ошибочно признанный ненужным код можно отметить как нужный. Среди других возможностей UnusedCSS можно отметить работу с префиксами и удаление дублирующихся селекторов.
Мне очень понравилось то, что UnusedCSS дал мне гораздо более точные результаты, чем другие инструменты. Однако в данных, выдаваемых этим сервисом, слишком много «шума», и я, к тому же, пока не знаю о том, как включить UnusedCSS в регулярно повторяющийся процесс сборки проекта и вывода его новых версий в продакшн.
Уважаемые читатели! Сталкивались ли вы с проблемой наличия неиспользуемого CSS-кода в своих проектах?
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на сайте WordPress — это комплексный подход к работе. Занимает немало времени, сил, терпения, поиска необходимой информации.
А цель одна — ускорить работу сайта, загрузку его страниц, повысить его производительность.
Еще раз напомню о требованиях Google PageSpeed, которые вступят в силу в марте 2021 года.
Читайте в статье — Оптимизация сайта под требования PageSpeed Insights.
Не все мы программисты. Но, это один из способов прокачать свои навыки и знания в сайтостроении. Поглубже узнать — где и какой код или скрипт находится, и за какие функции отвечает.
WordPress постоянно обновляется, а сейчас довольно кардинально — все ждут выхода, заключительной на данный момент, версии 5.7.
Обновление и оптимизация кода CMS WordPress происходит регулярно, пополняется его функционал.
Но это только движок.
Немаловажную роль играют темы (шаблоны), которые мы устанавливаем.
От их выбора зависит, как будет выглядеть наш сайт, выполнение тех или иных задач, запланированных нами. Скорость его загрузки и производительность.
Да, в депозитарии WordPress вы можете найти легкую, оптимизированную тему, но ее функционал будет ограничен.
Разработчики же Премиум-тем и таких же Премиум-плагинов, стараются максимально расширить их функции. Дать в руки пользователей множество инструментов, удовлетворить их творческие потребности.
Все это достигается насыщением кода различными Java-скриптами и стилями CSS.
Вот тут-то и возникает множество проблем при тестировании страниц сайта на PageSpeed Insights.
Неминуемо появляются предупреждения:
Но это только верхушка айсберга. Если вносить какие-либо изменения в Редакторе темы-шаблона — минимизировать HTML или CSS, удалять неиспользуемые коды — проку от такой оптимизации будет мало.
Тема сайта и плагины часто обновляются и все изменения окажутся напрасными.
А обновлять их необходимо обязательно.
Можно, конечно, поставить, в дополнение, дочернюю (Child) тему.
В ее Редакторе имеются две вкладки — Таблица стилей общая (style.css) и Функции темы (functions.php).
Кое-что сделать можно, но очень осторожно, необходимы определенные знания.
Кардинально что-то изменить здесь вряд ли получиться — только дополнить определенными функциями.
Проблема многофункциональных тем-шаблонов и Премиум-плагинов в том, что их некоторые коды CSS и JavaScript могут подгружаться на всех страницах сайта, а не только там, где это необходимо.
Наша задача, на каждой отдельной странице или записи сайта:
Вот этим мы и займемся. Для этого будем использовать плагин для WordPress Asset CleanUp Pro.
Плагин WP Asset CleanUP Pro для оптимизации HTML и удаления неиспользуемого кода CSS, JavaScript.
Плагин Asset CleanUP Pro позволяет избирательно удалять неиспользуемые стили CSS и Java-скрипты с любой страницы или поста, размещенных на сайте.
Минифицировать (сократить) и объединить загруженные файлы CSS и JS, чтобы уменьшить общий размер страницы и количество HTTP-запросов.
Производить очистку исходного кода HTML, настроить предварительную загрузку локальных и Google шрифтов. Выгрузку общих файлов CSS и JS по всему сайту.
Есть функция кеширования. Но, как для меня, лучше бы ее не было.
WP Asset CleanUP Pro отлично взаимодействует с более мощным плагином для кеширования — WP Rocket. Возможно, для некоторых легких сайтов и Asset CleanUP будет достаточно.
Проблема в том, что при предварительном тестировании сайта в PageSpeed Insights, файлы кеша очень мешают. Приходится делать полную очистку.
Есть две версии этого плагина. Бесплатная — Asset CleanUp, которую можно скачать с депозитария WordPress, и платная версия — Asset CleanUp Pro.
Минимальная цена базовой версии на один сайт начинается от трех с половиной тысяч.
Их отличие, друг от друга, заключается в том, что в версии Pro можно настраивать асинхронную (async) или отложенную (defer) загрузку кода CSS и JavaScript. Производить более тонкую настройку скриптов и стилей.
В бесплатной — только удаление кода.
Установка плагина Asset CleanUp Pro.
Установка плагина Asset CleanUp Pro не должна вызвать каких-либо осложнений. Все делается из Админ-панели WordPress.
Есть некоторые нюансы при установке Pro-версии. В скачанном архиве могут быть дополнительные файлы. Архив нужно распаковать в отдельную папку, и уже устанавливать, непосредственно, архив самого плагина.
А теперь, самое главное, что нужно сделать на сайте перед использованием плагина:
Обязательно посмотрите, чтобы не дублировались функции Webcraftic Clearfy и Asset CleanUp Pro.
Общие настройки Asset CleanUp Pro для HTML, CSS, JavaScript.
В Панели Общих настроек Asset CleanUp Pro для HTML, CSS, JavaScript необходимо активировать нужные нам пункты.
Плагин на английском языке — это не проблема. Открываете его в браузере Google Chrome. Правой кнопкой вызываете Контекстное меню — Перевести на русский.
Самый точный и адекватный перевод.
Я буду исходить из своих настроек — думаю, они подойдут большинству.
Stripping the «fat» (Удаление «жира»).
Читаете внимательно советы по использованию.
Принимаете соглашение.
Plugin Usage Preferences (Настройки использования плагина).
Активируем следующие пункты:
Test Mode (Тестовый режим).
Подходит для отладки, когда вы проходите методом проб и ошибок при удалении ненужных CSS и JavaScript на своем веб-сайте.
Изменения видны только вам — в том же браузере (внимательно читайте инструкцию).
Optimize CSS (Оптимизировать CSS).
Активация следующих опций:
Optimize JavaScript (Оптимизировать JavaScript).
Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.
Сообщите мне, когда будут добавлены новые комментарии.