Удалите ненужные вызовы.js и.css (Rt-Theme19 - themeforest)
У меня есть ((очень)) простой сайт WP с вышеупомянутой темой.
Тема загружает тонну внешних файлов.css и.js выше сгиба, что вызывает блокировку рендеринга, и я уверен, что не использую половину из них.
В header.php включены только некоторые из них, и большинство из них включены через php wp_head() -tag. Я пытаюсь выяснить, какие.js и.css используются, а какие нет. Кроме того, как полностью избавиться от них, так как я чувствую, что использование "defer" или "async" - это решение проблемы только частично.
Мой сайт http://toptand.dk/. Имейте в виду, что в настоящее время я использую кэш WP Super для сжатия и автооптимизации, чтобы дополнительно минимизировать блокировку рендеринга и т. Д., Что может сделать заголовок совершенно другим. Я бы предпочел избавиться от этого по-настоящему.
Я прочитал много статей о том, как предотвратить блокировку рендеринга, но на самом деле не объясняет, как бороться со всем дерьмом из шаблона WP.
2 ответа
Тема загружает тонну внешних файлов.css и.js выше сгиба, что вызывает блокировку рендеринга, и я уверен, что не использую половину из них.
Это очень типично для коммерческих тем WordPress; такие темы загружают много файлов, так как многие из них необходимы для "многоцелевых" внутренних функций, которые предоставляют короткие коды, функции перетаскивания и перетаскивания, настраиваемые типы записей, электронную торговлю и т. д.
Вы жертвуете скоростью и весом страницы для всех тех функций, которые вы используете, а также для потенциальных функций, которые вы не делаете. Если вам нужна скорость и легкий сайт, не используйте такую тему. Вы можете пойти в эту тему и wp_dequeue_script скрипты и таблицы стилей, но тема функции сломается. Смотрите https://codex.wordpress.org/Function_Reference/wp_dequeue_script
Попробуйте более простую, легкую (и бесплатную) тему с https://wordpress.org/themes/ и узнайте, как работают темы https://developer.wordpress.org/themes/getting-started/, чтобы получить нужные функции без всего лишнего кода.
Вы можете использовать вкладку Аудит Chrome Dev Tools.
Я изо всех сил пытаюсь выяснить, какие.js и.css используются, а какие нет
После выбора вкладки "Аудит" включите использование сети в зависимости от необходимости, но обязательно проверьте параметр "Эффективность веб-страницы". После того, как выбор сделан, либо нажмите "Аудит текущего состояния", либо "Перезагрузить" и выполните аудит.
Как только процесс завершится, результаты предоставят данные о количестве неиспользованных правил CSS. Это даст вам представление о неиспользованном CSS.
Кроме того, как полностью избавиться от них, так как я чувствую, что использование "defer" или "async" - это решение проблемы только частично.
В последней версии Chrome (59) появилась новая функция под названием Coverage (вы можете найти ее в разделе "Дополнительные инструменты" в инструментах разработчика). Это помогает понять процент использования CSS на текущей странице и щелкнуть по одному из результатов, перенаправляет код и помечает части невыполненного кода красным, а выполненные - зеленым.
Эти входные данные должны помочь вам оптимизировать ваши активы и удалить неиспользуемый код.
Надеюсь это поможет!