Jump to content

Асинхронная загрузка CSS как советует Google

Elliot
 Share Followers 0

Recommended Posts

Elliot

Elliot 14

Posted
Posted

Всем привет!

На всем известном инструменте developers.google.com/speed/pagespeed тестю сайт, и в мобильной версии всем ненавистное предупреждение о "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы" и там есть подсказка ведущая на эту страницу где говориться о асинхронной доставке CSS.

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

Вот их метод: 

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

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

Но вот в чем незадача, тупо не понимаю, как же заставить работать по этому же методу 2 и 3 стиля (которые висят на сайте) что я только не делал, как не шаманил, загружается только один стиль - другой(ие) нет...

Помогите решить проблему.

Спасибо!

Link to post
Share on other sites
sda

sda 7

Posted
Posted 
просто делаете несколько строк со стилями в блоке:
<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>

 

весь смысл кода, когда документ загружен, создается div в него заносятся строки из deferred-styles и он добавляется в конец body, после чего браузер автоматом их загружает

Link to post
Share on other sites
Beauty

Beauty 172

Posted
Posted 
 <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small0.css"/>
      <link rel="stylesheet" type="text/css" href="small1.css"/>
      <link rel="stylesheet" type="text/css" href="small2.css"/>
      <link rel="stylesheet" type="text/css" href="small3.css"/>
      <link rel="stylesheet" type="text/css" href="small4.css"/>

  

</noscript>
Link to post
Share on other sites
Elliot

Elliot 14

Posted
  • Author
Posted (edited)
7 часов назад, Beauty сказал: 

 <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small0.css"/>
      <link rel="stylesheet" type="text/css" href="small1.css"/>
      <link rel="stylesheet" type="text/css" href="small2.css"/>
      <link rel="stylesheet" type="text/css" href="small3.css"/>
      <link rel="stylesheet" type="text/css" href="small4.css"/>

  


</noscript>

К сожалению данный способ не работает... Вернее стили загружаются но pagespeed их видит, если только один стиль указать, то этот стиль будет загружаться но pagespeed его видеть не будет...

Edited by Elliot
Link to post
Share on other sites
Elliot

Elliot 14

Posted
  • Author
Posted
3 часа назад, Beauty сказал:

Поставьте Autoptimized он все это умееет и стили и скрипты и шрифты defer делает

Посмотрел как он работает, он все стили обьединяет в один, но проблема в том, что вместо трех, pagespeed видит два но уже от этого плагина...

Не думаю что это лучший вариант чем от гугла...

 

Вопрос открыт..

Link to post
Share on other sites
Elliot

Elliot 14

Posted
  • Author
Posted

Топорно сделал вот так: 

    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
      
      var loadDeferredStyles2 = function() {
        var addStylesNode = document.getElementById("deferred-styles2");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles2, 2000); });
      else window.addEventListener('load', loadDeferredStyles2);
    </script>
<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small0.css"/>
</noscript>
<noscript id="deferred-styles2">
      <link rel="stylesheet" type="text/css" href="small1.css"/>
</noscript>

И так далее, вышло 7 стилей, гугл их не видbт, да и время загрузки можно настроить, например для личного кабинета 10сек, пока пользователь в него зайдет то уже и css загрузиться))

 

Но вот беда с этим jquery асинхронно или отложено его не загрузить, вернее загрузить можно, но работать он не будет, и соответственно все для чего нужна эта библиотека. 

Кто знает как еще можно jquery подгрузить чтобы pagespeed не ругался?

Link to post
Share on other sites
Димон

Димон 14

Posted
Posted

Ваш вариант очень плох. Каждый файл css это один запрос к серверу,  Гугл подсказывает вам сделайте один (объедините все в одном css). А чтобы не потеряться в это большом css делайте комментарии /*меню*/ или /*рейтинг*/

Link to post
Share on other sites
Димон

Димон 14

Posted
Posted
20 минут назад, Elliot сказал:

Сделать один css?)) Я уже пробовал это провернуть, вышло не очень хорошо, лучше я пожертвую парой запросов...

Интересно почему вышло НЕ ОЧЕНЬ ХОРОШО, много сайтов испольуют один файл css и у них все работает нормально.

А вы не пробовали @import

Создаете, например файл default.css там прописываете

@import "small0.css" all;
@import "small1.css" all;
@import "small2.css" all;

В скрипте указать

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="default.css"/>
</noscript>

Link to post
Share on other sites
Elliot

Elliot 14

Posted
  • Author
Posted
10 часов назад, Димон сказал:

Интересно почему вышло НЕ ОЧЕНЬ ХОРОШО, много сайтов испольуют один файл css и у них все работает нормально.

А вы не пробовали @import

Создаете, например файл default.css там прописываете

@import "small0.css" all;
@import "small1.css" all;
@import "small2.css" all;

В скрипте указать

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="default.css"/>
</noscript>

Я не о том подумал, ваш способ работает. Теперь осталось еще с jquery разобраться для полного счастья))

Link to post
Share on other sites
Beauty

Beauty 172

Posted
Posted
14 минуты назад, Elliot сказал:

Я не о том подумал, ваш способ работает. Теперь осталось еще с jquery разобраться для полного счастья))

перенести его в футер, а все остальные скрипты сделать после него

Link to post
Share on other sites
  • VIP
campusboy

campusboy 912

Posted
  • VIP
Posted
10 часов назад, Димон сказал:

Создаете, например файл default.css там прописываете

@import "small0.css" all;
@import "small1.css" all;
@import "small2.css" all;

Это самый медленный способ. Браузеру надо сначала default.css загрузить, а затем, чтобы распарсить его правильно, последовательно загрузить все "внутренние" css. Пруф (англ), перевод.

Link to post
Share on other sites
Димон

Димон 14

Posted
Posted
12 часа назад, campusboy сказал:

Это самый медленный способ. Браузеру надо сначала default.css загрузить, а затем, чтобы распарсить его правильно, последовательно загрузить все "внутренние" css. Пруф (англ), перевод.

Да я тоже когда-то слышал, что это замедляет загрузку. Но этой статье 10 лет, и за 10 лет многое изменилось (например скорость инета). У меня прописан @import я даже моргнуть не успеваю, как сайт загрузится. Да и в default.css будет прописано всего одна строка.

@import "small0.css" all; @import "small1.css" all; @import "small2.css" all;

10 часов назад, Elliot сказал:

Мда... А какой тогда лучше??

Лучше сделать один файл css

Оф. сайт Dle использует один файл css и нормально работает.
А вообще сами пробуйте и смотрите, что лучше!!!

Link to post
Share on other sites
Elliot

Elliot 14

Posted
  • Author
Posted
1 час назад, Димон сказал:

А вообще сами пробуйте и смотрите, что лучше!!!

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

 

12 часа назад, Beauty сказал:

отето вы заморочились) покажите потом сайт, интересно посмотреть на этого франкенштейна)))

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

На pingdom.com  пока что Load time 2.33 s так что у меня еще есть куда стремится)

Link to post
Share on other sites
Beauty

Beauty 172

Posted
Posted
В 30.04.2018 в 2:37 PM, Elliot сказал:

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

 

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

На pingdom.com  пока что Load time 2.33 s так что у меня еще есть куда стремится)

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

В РФ даже в Сибири давно есть ютуберы которые снимают видео в прямом эфире)))

Link to post
Share on other sites
Elliot

Elliot 14

Posted
  • Author
Posted

в украине не везде 3g есть,а тут о 4g)))

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

Link to post
Share on other sites
Beauty

Beauty 172

Posted
Posted
1 час назад, Elliot сказал:

в украине не везде 3g есть,а тут о 4g)))

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

Это одна из стран третьего мира где обещают этим летом 4G

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Followers 0
Go to topic listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...