PageSpeed ​​- Усуньте блокування JavaScript та CSS, що блокує візуалізацію, у вмісті, що знаходиться вгорі

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

Google PageSpeedце не любить і каже:

Усуньте JavaScript та CSS, що блокують візуалізацію, у вмісті, що знаходиться вгорі

Як я можу це зробити для цього файлу сценарію Java, який викликає повзунок:

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js

Вирішити проблему JavaScript, що блокує візуалізацію 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 як додаток \ дизайн \ frontend \ base \ default \ layout \ page.xml

Тут не працюватиме техніка, описана "Mohan Gs".

Через шлях js, /media/js/здається, він використовує js злиття . Це означає, що всі js-файли додані xml стандартним способом

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

буде об'єднано у велику до /media/js/<hash>.js .

Додані основні файли js Magento

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

і таким чином.

Існує також багато шаблонів, що використовують вбудований js, який залежить від об'єктів / функцій, визначених файлами head js.

На даний момент, чи недостатньо переміщати лише файли head js донизу. Ви повинні перемістити всі вбудовані js-повідомлення після заголовка js та раніше </body>.

У всіх / багатьох випадках неможливо відокремити вбудовані js від шаблонів, оскільки вони використовують певні змінні шаблону.

Ви можете використовувати лише такий загальний метод, як розбір кінцевого html та переміщення цих речей разом у правильному порядку.

Тому подивіться на розширення Pagespeed .

Цей код говорить, чекайте завантаження всього документа, а потім завантажте зовнішній файл 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-файл.

Детальніше див. У цій статті

Ось розширення з відкритим кодом, щоб вирішити це https://github.com/mediarox/pagespeed

Поточні можливості

• Перемістіть усі теги Javascript (голова та вбудований текст) донизу. ({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".