Eliminate render-blocking JavaScript and CSS in above-the-fold content

Fra Brande

Tilmeldt 3. Mar 06

Indlæg ialt: 161

Poulsgaard Fra Compack Aps. Skrevet 05-08-2016 kl. 11:15

Hvor mange stjerner giver du? :

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 ?

Compack pluk og pak lagerhotel

Brug tiden på at udvikle din webshop i stedet for at have eget lager

Fra Ballerup

Tilmeldt 6. Jun 08

Indlæg ialt: 16489

Mikael christiansen Fra Poledanser underholdning danser Skrevet 05-08-2016 kl. 11:31

Hvor mange stjerner giver du? :

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

poledancer.dk klik bestil shows altid god priser og lange shows

Tilmeldt 20. Apr 07

Indlæg ialt: 16014

Slettet bruger Skrevet 05-08-2016 kl. 11:37

Hvor mange stjerner giver du? :

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

Tilmeldt 30. Oct 06

Indlæg ialt: 588

Mads Fra dk Skrevet 05-08-2016 kl. 11:41

Hvor mange stjerner giver du? :

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.

Freelance senior udvikler med over 15 års erfaring

Fra Brande

Tilmeldt 3. Mar 06

Indlæg ialt: 161

Poulsgaard Fra Compack Aps. Skrevet 05-08-2016 kl. 12:24

Hvor mange stjerner giver du? :

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 ?

Compack pluk og pak lagerhotel

Brug tiden på at udvikle din webshop i stedet for at have eget lager

Fra København S

Tilmeldt 1. Feb 06

Indlæg ialt: 3533

Kim Tetzlaff - Kim Tetzlaff ApS Fra Kim Tetzlaff ApS Kim Tetzlaff Ejendom Skrevet 05-08-2016 kl. 13:27

Hvor mange stjerner giver du? :

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.

Kim Tetzlaff

🚀 Hastighedsekspert ⚙️WordPress hjemmesider 🎯SEO
Siden 1995 - hjemmeside Udvikling og teknisk optimering af hjemmesider
👉 Mere om mig

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

poledancer.dk klik bestil shows altid god priser og lange shows