удалите неиспользуемый код javascript битрикс

Ускорение: отключаем 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, я использую следующую шпаргалку:

Источник

Выполнение требований Гугл для Битрикс

В связи с увеличением доли Гугл в рунете задача максимально устранить его рекомендации для сайтов Битрикс становится очень востребованной.

Добавлю дополнительные рекомендации от 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

Источник

Как Исправить Удалите Код JavaScript и CSS, Блокирующий Отображение Верхней Части Страницы

Введение

Скорость сайта – это один из самых важных факторов, который помогает привлечь и удержать посетителей. Всё остальные факторы имеют равное значение, но быстрый сайт имеет больше шансов заполучить много пользователей. Это происходит из-за того, что поисковые системы берут данный фактор во внимание при вычислении результатов рейтинга в поиске. Поэтому, если вы хотите оставить своих конкурентов у разбитого SEO корыта, сделайте скорость сайта своим приоритетом.

Конечно, оценить скорость вашего сайта может показаться немного сложным. Есть много факторов, которые могут повлиять на результат – скорость интернет соединения, географическое положение и т.д. Однако не стоит переживать, в этом нелегком деле вам может помочь Google’s PageSpeed Insights. Это бесплатный сервис от Google, который даёт оценку сайту на основе его скорости загрузки. В идеале, вы должны попытаться заполучить самую высокую оценку на PageSpeed. И если вы уже воспользовались данным онлайн инструментом, значит вы могли столкнуться с довольно известной рекомендацией по оптимизации скорости загрузки сайта Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.

Что означает Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Чтобы узнать немного больше об этой рекомендации, мы должны взглянуть на критерии по которым Google выдаёт баллы на PageSpeed Insights. Существует 10 правил для скорости определенных Google, и несоответствие одному из них выльется в уменьшение количества баллов.

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы одно из этих правил. Обычно загрузка JS и CSS скриптов заставляет браузер отложить загрузку HTML страницы. Конечно, это не является проблемой. Даже больше, это то чего вы хотите, никто не захочет смотреть на сайт без соответствующего оформления.

Однако Удалите код JavaScript и CSS, относится к тем скриптам, которые влияют на отклик страницы, но не используются в содержимом верхней части страницы (ATF). Содержимое ATF – это часть страницы, которая видна пользователю когда страница загружается; любая часть страницы для просмотра которой необходимо прокрутить сайт вниз не является ATF. Поэтому Google этой рекомендацией, говорит вам о том, что у вас на странице присутствуют JS и CSS скрипты, которые без надобности замедляют загрузку сайта, так как часть страницы на которую они влияют ещё не видна пользователю.

В этом руководстве по WordPress, мы воспользуемся Google PageSpeed Insights для обнаружения скриптов блокирующих отображение. Затем мы покажем вам 3 способа, как исправить эту проблему на WordPress. В дополнение к этому, вы также должны взглянуть на другие способы увеличить скорость загрузки сайта на WordPress, чтобы получить заметный результат.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Исправляем Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

JS и CSS являются важными составляющими любого современного сайта не только для его работы, но и для его внешнего вида. Однако тут есть один нюанс – производительность. Несмотря на то, что вы можете принять некоторые меры, вроде включения отложения загрузки JavaScript, иногда этого может оказаться недостаточно. Мы конечно же говорим о рекомендации удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Чтобы исправить данную ошибку, мы должны узнать существует ли данная проблема на вашем сайте вообще. После того, как мы подтвердим наличие, мы сможем приступить непосредственно к ее устранению.

Шаг 1 – Использование Google PageSpeed Insights для поиска кода JavaScript и CSS, блокирующего отображение верхней части страницы

Первый шаг для решения данной проблемы, это проверка вашего сайта с помощью Google PageSpeed Insights. Просто посетите данную страницу и введите в поле адрес вашего сайта. Нажмите кнопку Анализировать для получения отчета о сайте. Большинство сайтов имеют оценку от 50 до 70; это должно стать ориентиром вашей оценки. Помимо оценки, Google предоставит список с рекомендациям по улучшению скорости загрузки сайта.

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

Если после проверки сайта с помощью PageSpeed Insights, вы также нашли рекомендацию Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы, значит вы должны продолжить чтение данного руководства. Оставьте эту вкладку открытой, так как она может вам понадобиться в процессе исправления.

Важная вещь на которую необходимо обратить внимание – вашей задачей не должно стать получение 100 баллов на PageSpeed Insights. Скорее, ей должно стать стремление получить хорошую оценку без ущерба функционалу и дизайну сайта. Если на вашем сайте есть скрипты необходимые для работы robust UX, вы не должны удалять их просто для того, чтобы получить высокие оценки на PageSpeed Insights. Правила по которым Google оценивает сайты являются лишь рекомендациями и должны быть восприняты именно так.

Шаг 2 – Исправление Удалите код JavaScript и CSS

Вариант 1 – Использование W3 Total Cache

Теперь, когда вы знаете о наличии кода, блокирующего отображение страницы, у вас есть несколько вариантов его исправления. Мы рекомендуем скачать плагин, который поможет вам легко разобраться с этой проблемой. Один из наших любимых плагинов это W3 Total Cache. Установите и активируйте его. Далее, следуйте этим инструкциям:

Теперь вернитесь на страницу Google PageSpeed Insights для проверки исправления ошибки. На скриншоте ниже вы можете увидеть, что настройка W3 Total Cache помогла устранить ошибку Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы с нашего тестового сайта.

Если вы хотите еще больше контроля над вашим ATF содержимым, воспользуйтесь плагинов Above The Fold Optimization. Этот плагин разработан специально для ATF содержимого и совместим с другими популярными плагинами, вроде W3 Total Cache и Autoptimize.

Вариант 2 – Использование Autoptimize

Сравнительно простой метод для решения проблемы блокирующего кода, это использование плагина под названием Autoptimize. Скачайте и установите плагин, что не должно занять много времени. После этого перейдите во вкладку Настройки → Autoptimize. Здесь, выставьте галочки напротив Оптимизировать код JavaScript? и Оптимизировать код CSS?, и нажмите кнопку Сохранить изменения и очистить кэш.

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

Как вы можете заметить из скриншота сверху, Autoptimize оставил 1 блокирующий ресурс CSS.

Если вы хотите полностью закончить оптимизацию, вернитесь в раздел Настройки → Autoptimize. Нажмите кнопку Show Advanced Settings. Далее, выставьте галочки напротив опций Also aggregate inline JS и Also aggregate inline CSS. Закончите нажав на кнопку Сохранить изменения и очистить кэш. Чтобы проверить результат, вновь запустите проверку PageSpeed Insights.

Вариант 3 – Использование Speed Booster Pack

Еще один популярный плагин, который может помочь вам решить проблему Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы на WordPress сайте – это Speed Booster Pack. Скачайте и активируйте плагин. Его настройки вы сможете найти в разделе Настройки → Speed Booster Pack в панели управления WordPress.

Для JS скриптов вам необходимо включить Move scripts to the footer и Defer parsing of JavaScript files.

Для CSS перейдите в меню Still need more speed?. Здесь вы найдёте дополнительные настройки относящиеся к CSS оптимизации.

Вы можете поэкспериментировать с этими настройками, чтобы найти баланс – включение всех опций может привести к Flash of unstyled content (FOUC). Это случается в том случае, если браузер загружает страницу без ожидания загрузки таблицы стилей, вызывая отключение всех стилей на странице. Теперь осталось лишь вновь проверить сайт на наличие проблемы.

Заключение

Код блокирующий отображение может оказаться влияние на скорость и производительность вашего WordPress сайта. В этом руководстве по WordPress вы узнали, как исправить Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы на вашем сайте. Возможно ваш сайт еще содержит некоторый блокирующий контент код, однако мы смогли справиться с большинством из них.

Помните, работа над увеличением скорости загрузки сайт не должна наносить ущерб его функционалу. Поэтому не волнуйтесь, если у вас еще остался какой-либо из блокирующих кодов. Это руководство было для вас полезным? У нас есть множество других на hostinger.ru/rukovodstva.

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

Источник

Битрикс — убираем из кода type=text/javascript

Даже при чистой установке битрикса, сайт не проходит валидацию W3C. Как убрать из тегов устаревший атрибут type?

Как убрать атрибут type для тега script в Битриксе?

Для этого нам понадобится использовать файл событий.

Добавляем в /local/php_interface/ в файл init.php
(в некоторых проектах используется папка /bitrix/php_interface/)

Всё дело в том, что в HTML5 давно убрали атрибут type у тэга script, при помощи которого подключаются все скрипты как внешние так и внутренние. И, чтобы наш код был валидным, этот атрибут нужно убрать из исходного кода страницы.

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

Поэтому спокойно используем событие OnEndBufferContent, и убираем ненужный атрибут. Пройти валидацию вашей вёрстки можно на validator.w3.org

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

— Создание сайтов на 1С-Битрикс любой сложности
— Вёрстка макетов Figma, Photoshop, Zeplin
— Поддержка проектов на Битриксе
— Разработка нового функционала для сайта
— Парсинг данных
— Выгрузка из файлов в формате XML, YML, XLS, XLSX, CSV, JSON
— Интеграция по API со сторонними сервисами
и многое другое

Источник

Удалите неиспользуемый код javascript битрикс

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

Производительность является решающим фактором успеха (или неудачи) любого веб-приложения. Частые сбои и длительное время ожидания раздражают посетителей вашего сайта.

Kissmetrics обнаружил, что:

Удалите неиспользуемый код JavaScript

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

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

Избегайте утечек памяти

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

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

В инструментах Chrome Dev утечки памяти можно проанализировать, записав временную шкалу на вкладке Performance или Memory.

Создание четко определенных сред для тестирования

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

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

В различных браузерах (даже в различных версиях одного и того же браузера) код JS может выполнять по-разному. Или вообще не выполняться.

Задержите ненужную загрузку JavaScript

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

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

Отложенная функциональность может быть загружена после завершения начальной загрузки страницы. Согласно модели RAIL, Google рекомендует, чтобы эта отложенная нагрузка была выполнена в блоках 50 мс, чтобы взаимодействие пользователя со страницей оставалось неизменным. Читайте подробнее тут.

Приоритет доступа к локальным переменным

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

Имейте в виду, что для определения текущей области необходимо указать область действия, а также определить область действия функции, поставив перед каждой переменной значение let или const. Это позволит предотвратить поиск, а также ускорить код.

Использование web workers для выполнения трудоемких кодов

Мы сталкиваемся со многими кодами в нашей карьере программирования, которые занимают много времени, чтобы выполнить, не так ли? Запуск таких сценариев с главным потоком (UI приложения) значительно замедлит работу приложения.

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

Сохранение повторяющихся элементов DOM в локальной переменной

DOM означает модель объекта документа (DOM). Это интерфейс прикладного программирования (API), который определяет логическую структуру документов и способ доступа к документу и манипулирования им.

Доступ к DOM занимает много времени. Если вы знаете, что элемент должен быть прочитан несколько раз, сохраните его в локальной переменной. Но имейте в виду: если вы хотите удалить значение DOM позже, значение переменной должно быть установлено в “null”, чтобы оно не вызывало утечки памяти.

Используйте инструменты для обнаружения проблем

Lighthouse является одним из лучших инструментов для анализа производительности веб-страниц. Это поможет вам провести аудит производительности, доступности, лучших практик и SEO.

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

Опция дополнительные инструменты в Chrome может показать вам память и процессор, используемые каждой вкладкой. Кроме того, представление «производительность» в Firefox или Chrome можно использовать для анализа расширенных показателей.

заметки, javascript, сайтостроение, оптимизация сайта, ускорение производительности

Источник