PageSpeed ​​- Устранить блокирование рендеринга JavaScript и CSS в верхнем содержании

15

Я бегу magento 1.9, и я использую то, RWD sliderчто поставляется с Magento 1.9 на домашней странице.

Google PageSpeedне любит это и говорит:

Устранить блокировку рендеринга JavaScript и CSS в верхнем содержании

Как я могу сделать это для этого файла сценария Java, который вызывает слайдер:

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js
styzzz
источник

Ответы:

14

Я решаю проблему с блокировкой рендеринга JavaScript в Magento-1.9.x следующим образом:

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

или

<action method="addJs"><script>prototype/prototype.js</script></action>  
Replace with Following:  
<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

Подсказки: он может найти на базовую тему

app \ design \ frontend \ base \ default \ layout \ page.xml о строке: 38,

Если вы используете активную тему другого пути ex для rwd как app \ design \ frontend \ base \ default \ layout \ page.xml

matinict
источник
Где вы это добавите? в каком magento xml файле?
Styzzz
@styzzz, да, а также файл верхнего / нижнего колонтитула. Его лучше найти в Google, предложенном заблокированным js
matinict
@styzz это найти в базовой теме app \ design \ frontend \ base \ default \ layout \ page.xml о строке: 38 ,. Если вы используете активную тему с другим путем ex для rwd как app \ design \ frontend \ base \ default \ layout \ page.xml
matinict
1
Я следовал за тобой. Это решает проблему в понимании страницы Google, но выдает много ошибок в консоли в Google Chrome
Shoeb Mirza
@MDSHOEBMIRZA тогда это не решило проблему
Stevie G
5

Техника, описанная "Mohan Gs", здесь не сработает.

Из-за пути js /media/js/кажется, что он использует js merging . Это означает, что все файлы js добавляются стандартным способом xml

  • <action method="addJs">...
  • <action method="addItem"><type>js</type>..

будут объединены в один большой /media/js/<hash>.js.

Добавлены js-файлы Magento core

  • <action method="addJs"><script>prototype/prototype.js</script></action>

Сюда тоже.

Есть также много шаблонов, использующих встроенный js, который зависит от объектов / функций, которые определены файлами head js.

На данный момент, это не достаточно, чтобы переместить только файлы JS головы вниз. Вы должны переместить все встроенные объявления js после заголовка js и перед ним </body>тоже.

Во всех / многих случаях невозможно отделить встроенные j от шаблонов, потому что они используют переменные, специфичные для шаблона.

Вы можете использовать только общий метод, такой как синтаксический анализ окончательного HTML и перемещать все это вместе и в правильном порядке.

Итак, взгляните на расширение Pagespeed .

Стивен Фрицше
источник
Извините, я до сих пор не могу понять, что делать. Какой файл я должен редактировать? Вы говорите, что мы должны отредактировать файлы XML и переместить строку, которая вызывает JS, в другой раздел? Я могу отредактировать файл XML, но я не уверен, какой и куда переместить строку, которая называется сценарием JS. Пожалуйста, дайте мне знать.
Styzzz
Мой ответ должен объяснить, что вы не можете переместить вызовы javascript xml в другой раздел. Это приведет к ошибкам. Вы можете попробовать упомянутое расширение.
Стивен Фрицше
Привет Стивен, я попробовал твой модуль. Ничего не изменилось. Ни JavaScript, ни CSS не были перемещены. Конфигурация Страницы Скорости администратора также показывает 404
Сандип
@Sandeep: это не место для вашего комментария. Пожалуйста, создайте подробный отчет / проблему на github .
Стивен Фрицше
4

Этот код говорит, что дождитесь загрузки всего документа, а затем загрузите внешний файл defer.js.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

Это шаги, которые вам нужно выполнить.

  1. Скопируйте код выше.

  2. Вставьте код в HTML прямо перед </body>тегом (в нижней части HTML-файла).

  3. Измените defer.jsимя вашего внешнего файла JS.

  4. Убедитесь, что путь к вашему файлу правильный. Пример: если вы просто положите defer.js, файл defer.jsдолжен находиться в той же папке, что и ваш HTML-файл.

Для более подробной информации, обратитесь к этой статье

Мохан Гс
источник
1

Вот расширение с открытым исходным кодом, чтобы решить, что https://github.com/mediarox/pagespeed

Текущие функции

  • Переместите все теги Javascript (head & inline) вниз. ({Stripped_html} {} JS)
  • включая условные единицы измерения js ({несколько тегов js})
  • включая внешние теги js, включая встроенные теги js
  • Переместите все теги CSS (head & inline) вниз. ({Stripped_html} {} CSS)
  • включая условные единицы измерения css ({несколько тегов css})
  • включая внешние теги CSS
  • включая встроенные теги CSS

Совместимость

С Magento 1.5.x до Magento 1.9.x.

Конфигурация сервера

Все модули (Pagespeed_Js, Pagespeed_Css) по умолчанию отключены.

Путь конфигурации: Система> Конфигурация> ДОПОЛНИТЕЛЬНО> Скорость страницы

Как это устроено ?

Просто проанализируйте окончательный HTML-поток по событию "controller_front_send_response_before".

FireBear
источник
Перешел на GitHub и обнаружил, что скрипт был последний раз обновлен 23 сентября 2015 года. Более того, нет никакого упоминания о Magento 2. Будет ли он работать для magento 2 или нет? Если нет, есть ли у вас какие-либо другие рекомендации / предложения?
marikamitsos