Hjælp til salg (Ikke internet)

Svar: Eliminate render-blocking JavaScript and CSS in above-the-fold content - ja men, hvad betyder det.

Kim Tetzlaff - Kim Tetzlaff ApS — Fri, 05 Aug 2016 11:27:01 GMT

Mads Mogenshøj:

Den måde du kan løse det på, er at skrive 'async' inde i CSS linjen. F.eks.:

<link rel="stylesheet" href="http://festbyen.dk/themes/default-bootstrap/cache/v_115_219147e0229e0e16e01ba206b69f3fad_all.css" type="text/css" media="screen"/>

ændre til:

<link rel="stylesheet" href="http://festbyen.dk/themes/default-bootstrap/cache/v_115_219147e0229e0e16e01ba206b69f3fad_all.css" type="text/css" media="screen" async />

Kan man ikke, det er kun javascripts dette gøres ved.

Mads Mogenshøj:
Det er dog ikke noget jeg vil anbefale at du bruger tid på. Hvis du laver CSS styles non-blocking, vil du opleve dit website først bliver vist uden design/korrekt font, og det så vil blinke til det rigtige design efter siden er indlæst. Fordi stylesheets ikke nødvendigvis bliver indlæst samtidigt med resten af siden. Det er ikke særlig kønt.

Det kommer nu an på hvordan man laver det. Man loader selvfølgelig det der skal bruges above the fold i selve html dokumentet med indlejret css i head. Så vil den ikke blinke.

Svar: Eliminate render-blocking JavaScript and CSS in above-the-fold content - ja men, hvad betyder det.

Poulsgaard — Fri, 05 Aug 2016 10:24:11 GMT

Jeg forstår godt problemstillingen,

Det jeg ikke helt forstår, er lige præcis, hvor disse CSS filer bliver kaldt, og hvordan jeg kan ændre det.

Det ene filnavn giver mig det indtryk at det er noget cache, der alligevel bliver ændret konstant.

Kan i ser hvor Prestashop gør brug at disse css'er

I forhold til google API'en, er det så analytics der giver dette resultat ?

Svar: Eliminate render-blocking JavaScript and CSS in above-the-fold content - ja men, hvad betyder det.

Mads — Fri, 05 Aug 2016 09:41:56 GMT

Det betyder at pga. du har 2 CSS stylesheets øverst på din side (hvliket er meget normalt), skal browseren hente de 2 stylesheets inden den kan forsætte med at indlæse resten af siden. Dvs. når den når til de 2 linjer i HTML koden, skal filerne hentes inden den indlæser de efterfølgende linjer. Og det skaber så en lille (typisk marginal) forsinkelse i hastigheden.

Den måde du kan løse det på, er at skrive 'async' inde i CSS linjen. F.eks.:

ændre til:

Det vil gøre, at den henter dem asynkront i stedet.

Eller du kan lave din CSS inline, så det ikke ligger i en ekstern fil (dog ikke specielt nemt med din Google font).

Du kan også flytte dem fra <head> nederst på siden lige før </body>

Det er dog ikke noget jeg vil anbefale at du bruger tid på. Hvis du laver CSS styles non-blocking, vil du opleve dit website først bliver vist uden design/korrekt font, og det så vil blinke til det rigtige design efter siden er indlæst. Fordi stylesheets ikke nødvendigvis bliver indlæst samtidigt med resten af siden. Det er ikke særlig kønt.

Svar: Eliminate render-blocking JavaScript and CSS in above-the-fold content - ja men, hvad betyder det.

Anonymous — Fri, 05 Aug 2016 09:37:21 GMT

slå optimering til at CSS i indstillinger og så løfter den dig lidt mere

Svar: Eliminate render-blocking JavaScript and CSS in above-the-fold content - ja men, hvad betyder det.

Mikael christiansen — Fri, 05 Aug 2016 09:31:28 GMT

statikKen trækker en del så slå en af dem fra faktiske trækker begge 2 en del men det er nok kun nødvendigt med den ene http://static.zotabox.com/ fra eller http://www.google-analytics.com/ det vil få pagescore bedre , at fjerne begge 2 vil den blive det aller bedst men det er jo også dejligt kunne se hvor trafik kommer fra

billeder er store stadigvæk de burde kunne gøres mindre

jeg har lært med Wordpress der er stor forskel på facebook plug in hvor meget cpu de trækker måske findes et bedre til din prestashop

Eliminate render-blocking JavaScript and CSS in above-the-fold content - ja men, hvad betyder det.

Poulsgaard — Fri, 05 Aug 2016 09:15:34 GMT

Hej Aminoer.

Jeg har siddet og rodet lidt med PageSpeed Insight, og fået flyttet vores site op fra 30/100 til 80/100, altså ved at plukke alt det lavt hængende frugt.

Nu er der lidt længere op til grenene med frugt på, men siden dette punkt er dårlig for både min mobil visning og desktop visningen, tænkte jeg at det ville jeg også gerne have væk.

Dette står under den ubehjælpelige overskrift:

Your page has 2 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Optimize CSS Delivery of the following:

http://festbyen.dk/themes/default-bootstrap/cache/v_115_219147e0229e0e16e01ba206b69f3fad_all.css
http://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin,latin-ext

Jeg kører med en 1.6.1.4 Prestashop, med standard theme (dog tilpasset en del)

Så er der nogle der har et bud på, hvad der skal til for at løse dette problem ?