удалите неиспользуемый код javascript yastatic net
Оптимизация 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 и адрес сайта в этом браузере для последующих моих комментариев.
Сообщите мне, когда будут добавлены новые комментарии.
Yastatic.net: что это за сайт, как удалить?
08.11.2020 302 Просмотры
Сегодня поисковики предлагают пользователям попробовать дополнительные возможности и расширения. Например, Yastatic.net.
Что это такое?
Уже из названия видно, что сервис принадлежит Яндексу. Если быть точнее, то это JavaScript библиотеки от Яндекс. То есть, у разработчиков сайтов появилась возможность загрузки разных JavaScript-фреймворков и библиотек с открытым исходным кодом с серверов популярного поисковика по постоянным ссылкам.
Сегодня в Yastatic.net доступны:
В чем же кроется проблема?
Несмотря на то, что изначально Yastatic.net задумывался, как вещь крайне полезная, на практике он вызвал множество недовольств со стороны пользователей. Люди отмечают, что на скрипт часто «ругаются» антивирусы. При этом в ряде случаев выдается огромное количество предупреждений об угрозе сайта.
При этом «Yastatic.net» прописывается и в реестре доменов Youtube и Яндекс.ру.
Что же делать, как избавиться от Yastatic.net?
Во-первых, придется зайти в меню шаблонов по следующему пути: /public_html/catalog/view/theme/default/template/product/product.tpl
Во-вторых надо найти следующие строки:
Их все нужно удалить. После этого в модификаторе (зайти в администрирование менеджера обновлений) потребуется нажать на кнопку «Обновить».
Следующим действием станет очищение кэша twig.
Если ничего не изменилось, то придется внимательно изучить кэширующие модули и почистить буфер обмена. В штатном функционале этого не потребуется, однако, в ряде случаев все же приходится это сделать.
Удалите из верхней части страницы код JavaScript и CSS!
Продолжаю тему ускорения сайта, теперь передо мной ещё один пункт, который мне подсказал Google: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение. Сейчас попробую разобраться, что там лишнего и как удалить лишний JavaScript и CSS?
Тесты, я напомню, я произвожу этим сервисом: developers.google.com, где в отношении JavaScript и CSS мне был дан конкретный совет:
Как видите, у меня это самая большая проблема, 8 скриптов подгружается сразу и из-за этого первый экран загружается не так быстро, как хотелось бы. Так же есть 10 css файлов, которые тоже не оптимизированы. Ну что же, будем решать проблему!
Как удалить из верхней части страницы код JavaScript?
По этому вопросу претензии примерно такие:
Удалите код JavaScript, препятствующий отображению:
Недавно нашел интересное решение: в function.php нужно вставить код, который будет давать команду нужным нам скриптам загружаться не сразу:
Сам google советует в скрипт вставить атрибут async, который делал бы его загрузку асинхронной. Но это решение подходит только для внешних скриптов, например, этот атрибут async можно вставить в script рекламы Яндекс Директ, если у вас его реклама выводится в первом экране.
Оптимизировать плагины таким образом трудно, нужно лезть в код каждого плагина и прописывать в него этот атрибут, или его альтернативу. Я не программист и так поступать не буду. К тому же если вы постоянно обновляете плагины, то все ваши труды пропадут после обновления.
Как видите, остался всего один скрипт, и это скрипт самого плагина. После установки лично у меня проблем с отображением темы сайта не было, но если у вас возник какой-то косяк, и нужно, чтобы какой то скрипт загружался сразу, то в настройках плагина можно добавить его в исключения:
Как оптимизировать работу CSS?
Напомню список претензий:
Оптимизируйте работу CSS на следующих ресурсах:
Решить же вопрос можно установкой плагина, который сам объединит все стили в один файл. Плагина, который бы выполнял только эту функцию не нашел, поэтому расскажу о плагине, который делает все сразу, и удаляет скрипты, и оптимизирует css.
Как оптимизировать все сразу?
Я решил себе установить плагин Autoptimize, который оптимизирует и скрипты, и css одновременно. После установки плагина нужно лишь зайти в его настройки и поставить галочки в нужном месте:
После этого Google Page Speed выдает такое:
Ни одного скрипта не грузится, только два файла css, которые включают в себя все стили, а все скрипты перемещаются в область подвала.
Если теперь посмотреть на исходный код страницы, то там оптимизированная КАША, в которой без бутылки не разобраться.
Сначала я подумал, что этот плагин не решит моих проблем полностью, но как оказалось, это было из за того, что я его не до конца настроил!
После выставления галочек в нужном месте я получил ОТЛИЧНЫЙ результат! ВСЕ ПРОБЛЕМЫ ИСЧЕЗЛИ!
Чтобы так получилось нужно нажать кнопку вверху Show advanced settings и тогда появятся дополнительные настройки. Нужно, чтобы стояли галочки в пунктах:
Оптимизировать код HTML?
Оптимизировать код JavaScript?
Оптимизировать код CSS?
Inline all CSS?
Save aggregated script/css as static files
После этого правда у меня перестал работать плагин, который фиксирует виджет, но это совсем не проблема, скорость загрузки сайта намного важнее. А еще важнее угодить дяде Гуглу.
Хочу так же упомянуть об одном нюансе: у меня на этом сайте адаптивный шаблон, и если использовать его, то плагин при отображении мобильной версии не может устранить все проблемы до конца.
Когда же я включаю плагин мобильной версии, то никаких ошибок не остается. Я еще раз убедился, что лучше использовать мобильную версию сайта, чем адаптивный дизайн.
Удаление кода JavaScript и CSS Google PageSpeed
14 советов по оптимизации кода JavaScript для фронт-энд разработчиков
Дата публикации: 2020-08-11
От автора: советы и рекомендации по улучшению производительности, времени загрузки сайта и оптимизации кода JavaScript.
JavaScript стал одним из самых популярных языков программирования всех времен. По данным W3Tech, он используется почти на 96% сайтов по всему миру. Одним из ключевых фактов, которые вы должны знать о сети, является то, что вы не контролируете технические характеристики устройств, на которых пользователь будет получать доступ к вашему веб-сайту. Конечный пользователь может получить доступ к вашему веб-сайту на мощном или слабом устройстве с хорошим или плохим подключением к Интернету. Это означает, что вы должны убедиться, что ваш сайт максимально оптимизирован, чтобы вы могли удовлетворить требования любого пользователя.
Вот несколько советов, которые помогут вам получить более оптимизированный код JavaScript, который позволит повысить производительность.
Как примечание, убедитесь, что вы повторно используете компоненты JS, чтобы сохранить правильный баланс между высококачественным кодом (на создание которого нужно время) и разумными сроками доставки. Вы можете использовать популярные инструменты, такие как Bit (Github), для обмена компонентами (vanilla JS, TS, React, Vue и т. д.) из любого проекта в хаб компонентов Bit, не теряя при этом слишком много времени.
1. Удалите неиспользуемый код и функции
Чем больше кода содержится в приложении, тем больше данных необходимо передать клиенту. Кроме того, браузеру потребуется больше времени для анализа и интерпретации кода.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Иногда вы можете включить функции, которые вообще не используются. Лучше хранить этот дополнительный код только в среде разработки и не использовать его для производства, чтобы не обременять браузер клиента лишним кодом.
Всегда спрашивайте себя, является ли эта функция или фрагмент кода необходимыми.
Вы можете удалить неиспользуемый код вручную или с помощью таких инструментов, как Uglify или Google Closure Compiler. Вы даже можете использовать технику, называемую встряхиванием дерева, которая удаляет неиспользуемый код из приложения. Поставщики, такие как Webpack, предоставляют эту технику. Вы можете прочитать больше о встряхивании дерева здесь. Если вы хотите удалить неиспользуемые пакеты npm, вы можете использовать команду npm prune.
2. Кешируйте, когда только это возможно
Кэширование увеличивает скорость и производительность веб-сайта за счет сокращения задержек и сетевого трафика и, следовательно, сокращения времени, необходимого для отображения представления ресурса. Это может быть достигнуто с помощью Cache API или HTTP-кэширования. Вы можете спросить, что происходит, когда ваш контент меняется. Вышеуказанные механизмы кэширования способны обрабатывать и восстанавливать кэш при выполнении определенных условий, таких как публикация нового контента.
3. Избегайте утечек памяти
Будучи языком высокого уровня, JS заботится о нескольких низкоуровневых системах управления, таких как управление памятью. Сборка мусора — это процесс, общий для большинства языков программирования. Сборка мусора с точки зрения непрофессионала — это просто сбор и освобождение памяти, которая была выделена объектам, но которая в настоящее время не используется ни в одной части нашей программы. В таких языках программирования, как C, разработчик должен позаботиться о распределении и освобождении памяти, используя функции malloc() и dealloc().
Даже если сборка мусора выполняется в JavaScript автоматически, могут быть определенные случаи, когда она не будет идеальной. В JavaScript ES6 Map и Set были представлены со своими «более слабыми» братьями и сестрами. Этот «более слабый» аналог, известный как WeakMap и WeakSet, содержит «слабые» ссылки на объекты. Они позволяют собирать ненужные значения и предотвращать утечки памяти. Вы можете прочитать больше о WeakMaps здесь.
4. Попытайтесь выходить из циклов раньше
Обработка больших циклов, безусловно, может занять много драгоценного времени. Вот почему вы всегда должны пытаться выйти из цикла раньше. Вы можете сделать это с помощью ключевого слова break и ключевого слова continue. Вы несете ответственность за написание наиболее эффективного кода.
В приведенном ниже примере, если вы не вышли из цикла, ваш код будет запускать цикл 1000000000 раз, что явно слишком.
В приведенном ниже примере, если вы не сделали continue, когда цикл не соответствует условию, вы все равно будете запускать функцию 1000000000 раз. Мы обрабатываем элемент массива только в том случае, если он находится в четном положении. Это уменьшает выполнение цикла почти вдвое.
5. Минимизируйте количество вычислений переменных
Чтобы уменьшить количество вычислений переменной, вы можете использовать замыкания. С точки зрения непрофессионала, замыкания в JavaScript предоставляют доступ к области видимости внешней функции из внутренней функции. Замыкания создаются каждый раз, когда вызывается функция created-not. Внутренние функции будут иметь доступ к переменным внешней области видимости, даже после возврата внешней функции.
Давайте рассмотрим два примера, чтобы увидеть это в действии. Эти примеры взяты из блога Брета.
Если мы вызываем вышеупомянутые функции несколько раз, каждый раз создается новый объект. Для каждого вызова память излишне перераспределяется на переменные texasCustometrs и californiaCustomers. Используя решение с замыканиями, мы можем создать экземпляр переменных только один раз. Давайте рассмотрим приведенный ниже пример.
В приведенном выше примере с помощью замыканий внутренняя функция, которая возвращается в переменную cityOfCustomer, имеет доступ к константам внешней функции findCustomerCity(). И всякий раз, когда вызывается внутренняя функция с именем, переданным в качестве параметра, ей не нужно снова создавать экземпляры констант.
6. Минимизируйте доступ к DOM
Доступ к DOM медленный по сравнению с другими операторами JavaScript. Если вы внесете изменения в DOM, которые приведут к перерисовке макета, это может привести к замедлению работы.
Чтобы уменьшить количество раз, когда вы обращаетесь к элементу DOM, обращайтесь к нему один раз и используйте его как локальную переменную. Когда необходимость отпадет, обязательно удалите значение переменной, установив для него null. Это предотвратит утечку памяти, поскольку позволит работать процессу сбора мусора.
7. Сожмите файлы
Используя такие методы сжатия, как Gzip, вы можете уменьшить размер файлов JavaScript. Эти файлы поменьше приведут к увеличению производительности сайта, так как браузер должен будет загружать меньшие ресурсы. Эти сжатия могут уменьшить размер файла до 80%. Подробнее о сжатии читайте здесь.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
8. Сократите окончательный код
Некоторые люди считают, что минимизация и сжатие – это одно и то же. Вовсе нет – это разные вещи. В сжатии используются специальные алгоритмы для изменения выходного размера файла. При минимизации необходимо удалить комментарии и лишние пробелы в файлах JavaScript. Этот процесс может быть выполнен с помощью многих инструментов и пакетов, которые можно найти в Интернете. Минимизация стала стандартной практикой для оптимизации страниц и основным компонентом оптимизации интерфейса.
Минимизация может уменьшить размер файла до 60%. Вы можете прочитать больше о минимизации здесь.
9. Используйте Throttle и Debounce
Используя эти два метода, мы можем строго следить за тем, сколько раз событие должно обрабатываться кодом.
При Throttle указывается максимальное количество раз, когда функция может быть вызвана. Например, «выполнять функцию события onkeyup не чаще, чем раз в 1000 миллисекунд». Это будет означать, что если вы нажмете клавиши 20 раз в секунду, событие будет срабатывать только один раз в секунду. Это уменьшит нагрузку на код.
С другой стороны, Debounce — это то, где вы указываете минимальную продолжительность времени для повторного запуска функции с момента предыдущего выполнения той же функции. Другими словами, «выполняйте эту функцию, только если прошло 600 миллисекунд без ее вызова». Это будет означать, что функция не будет вызываться до тех пор, пока не пройдет 600 миллисекунд с момента последнего выполнения той же функции.
Вы можете реализовать собственные функции debounce и throttle или импортировать их из таких библиотек, как Lodash и Underscore.
10. Избегайте использования ключевого слова delete
Ключевое слово delete используется, чтобы удалить свойство из объекта. Было несколько жалоб относительно эффективности этого ключевого слова. Вы можете просмотреть их здесь и здесь. Ожидалось, что это будет исправлено в будущих обновлениях. В качестве альтернативы, вы можете просто установить нежелательное свойство как undefined.
Вы также можете использовать объект Map, так как его метод delete, согласно Брету, работает быстрее.
11. Используйте асинхронный код для предотвращения блокировки потоков
Вы должны знать, что JavaScript является синхронным по умолчанию, а также однопоточным. Но могут быть случаи, когда коду требуется много времени для вычислений. Будучи синхронным по своей природе, для JavaScript это будет означать, что этот фрагмент кода будет блокировать выполнение других операторов кода до тех пор, пока он не будет выполнен. Это снизит производительность в целом.
Но мы можем предотвратить эту ситуацию, внедрив асинхронный код. Асинхронный код был ранее написан в форме обратных вызовов, но с ES6 был введен новый стиль обработки асинхронного кода. Этот новый стиль был назван промисами. Вы можете узнать больше об обратных вызовах и промисах в официальной документации MDN.
Но подождите…
JavaScript является синхронным по умолчанию, а также однопоточным.
Как вы можете работать в одном потоке, но при этом все же выполнять асинхронный код? Здесь многие люди запутываются. Это возможно благодаря движку JavaScript, который работает под капотом браузера. Механизм JavaScript — это компьютерная программа или интерпретатор, который выполняет код JavaScript. Движок JavaScript может быть написан на самых разных языках. Например, движок V8, который поддерживает браузеры Chrome, был написан на C ++, а движок SpiderMonkey, который поддерживает браузеры Firefox, был написан на C и C ++.
Эти движки JavaScript могут обрабатывать задачи в фоновом режиме. По словам Брайана, стек вызовов распознает функции веб-API и передает их в браузер. Как только эти задачи завершены браузером, они возвращаются и помещаются в стек как обратный вызов.
Вы можете иногда задаться вопросом, как обстоят дела с Node.js, поскольку он не помогает браузеру работать. Фактически, тот же движок V8, который работает на Chrome, также поддерживает и Node.js.
12. Используйте разделение кода
Если у вас есть опыт работы с Google Light House, вы знакомы с метрикой, которая называется «первое значимое отображение». Это один из шести показателей, отслеживаемых в разделе «Производительность» отчета Light House.
First Contentful Paint (FCP) измеряет, сколько времени браузеру требуется для отображения первого фрагмента содержимого DOM после перехода пользователя на вашу страницу. Изображения, небелые элементы и SVG на странице считаются содержимым DOM; ничего внутри iframe не включено.
Один из лучших способов получить более высокий балл FCP — использовать разделение кода. Разделение кода — это метод, при котором вы сначала отправляете пользователю только необходимые модули. Это сильно повлияет на оценку FCP, уменьшая размер полезной нагрузки, передаваемой изначально.
Популярные пакеты модулей, такие как webpack, предоставляют функционал разделения кода. Вы также можете использовать собственные модули ES, чтобы загрузить отдельные модули.
13. Используйте async и defer
На современных веб-сайтах скрипты используются более интенсивно, чем HTML, их размер больше, и на их обработку уходит больше времени. По умолчанию браузер должен дождаться загрузки скрипта, выполнить его, а затем обработать оставшуюся часть страницы.
Это может привести к тому, что ваш громоздкий скрипт заблокирует загрузку веб-страницы. Чтобы избежать этого, JavaScript предоставляет нам две техники, известные как async и defer. Вы должны просто добавить эти атрибуты в