NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:

Diskuze: PageSpeed - Asynchronné načítánie CSS

Aktivity
Avatar
Zelenac
Člen
Avatar
Zelenac:18.3.2018 2:21

Zdravím,
skúšam optimalizovať moju firemnú stránku [https://8r.sk]. podľa PageSpeed, ale už pár dni sa trápim s tým, že výsledok je rovnaký.
Potrebujem načítať css styl až po načitani stránky, ale som prečital všetky možne návody, ako napr. http://jecas.cz/nacitani-css
ale skúšal implenetovať do môjho kódu, asi všetko. Skúšal som aj od googla jeho script ale podľa testu to mám vkuse zle.
Kód:

<noscript id="deferred-styles">
  <link rel="stylesheet" type="text/css" href="https://8r.sk/css/style.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>

kód mám vložený, až na konci stránky, ale výsledok je rovnaký.
https://developers.google.com/…ed/insights/?…

a to nemám tam vložený žiadný externý font. Keď vložným link na načitania písma tak moje hodnotenie rýchlosti spadne pri mobiloch na 60 pri PC zostáva na 90.

Viete mi poradiť čo robím zle?

Ďakujem za každú radu :)

Editováno
 
Odpovědět
18.3.2018 2:21
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Zelenac
David Dostal:18.3.2018 12:16

Podle toho co píšou na https://developers.google.com/…eCSSDelivery tak CSS nutné pro vykreslení viditelné části stránky se nemá načítat až po načtení stránky, ale pokud je krátké tak vložit do <style> (aby nezpůsobovalo zbytečně další http request) a pokud je delší tak načíst úplně normálně přes link.

To co načítáš až po načtení stránky je pouze css, které není nutné pro vykreslení viditelné části stránky.

Pro vykreslení stránky to CSS totiž je tak jako tak potřeba, tak proč odkládat jeho načtení až na později. Zbytečně to pak také způsobuje nepříjemné probliknutí.

Jinak imo načítání Tvé stránky je už teď celkem rychlé, otázkou je, jestli je potřeba vůbec ještě dál optimalizovat.

Snad to pomůže :-)

 
Nahoru Odpovědět
18.3.2018 12:16
Avatar
Zelenac
Člen
Avatar
Odpovídá na David Dostal
Zelenac:18.3.2018 12:20

A netreba to načitavanie splniť kvôli googlu, aby to bola, ako výhoda na seo? Len kvôli tomu to vlastne robím. Som čítal nejaký článok, že už aj to bere google, ako údaj.

 
Nahoru Odpovědět
18.3.2018 12:20
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Zelenac
David Dostal:18.3.2018 13:05

Ano, může to přispět k pozici ve vyhledávačích, vždy by ale měl být prioritou uživatel a ostatní z toho pak vyplývá (Google preferuje stránky s rychlejším načtením, protože jsou uživatelsky přívětivé).

Pokud tedy chceš dále optimalizovat, tak stále platí, že nedává smysl načítat důležité styly až po načtení celé stránky (říká to i PageSpeed v jedné z těch zpráv). Smysl to má jen u stylů, které neovlivní jak vypadá viditelná část stránky.

Je to popsané i na stránce, o které jsi tu psal: http://jecas.cz/nacitani-css. Odkazují tam i na užitečný nástroj k identifikaci, které CSS načíst rovnou a které až později: https://jonassebastianohlsson.com/…ssgenerator/.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
18.3.2018 13:05
Avatar
Zelenac
Člen
Avatar
Zelenac:18.3.2018 13:08

Dik za radu :)

 
Nahoru Odpovědět
18.3.2018 13:08
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Zelenac
David Dostal:18.3.2018 13:55

Rádo se stalo :-)

 
Nahoru Odpovědět
18.3.2018 13:55
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.