Avatar billede Slettet bruger
05. marts 2015 - 11:48 Der er 3 kommentarer og
1 løsning

Fjern gengivelsesblokerende JavaScript og CSS fra indholdet over skillelinjen

Når jeg kører PageSpeed Insights på Google, får jeg følgende problem, der tilsyneladende påvirker mobilvisningen i høj grad: "Fjern gengivelsesblokerende JavaScript og CSS fra indholdet over skillelinjen"

Her er linket til Google PageSpeed:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.aahb.dk%2F

Jeg har prøvet at rykke rundt på links til css og js filer, men kan simpelthen ikke tilfredsstille deres kriterier.

Jeg forstår godt, at det er smart at alt indholdet indlæses hurtigt, men det bliver jo alligevel lavet om i løbet af et splitsekund til sidst, hvorfor det nærmest virker mere forvirrende at indlæse CSS-indstillingerne til sidst.

Hvad er den bedste løsning på problemet?
Avatar billede Slater Ekspert
05. marts 2015 - 13:07 #1
Den bedste løsning er at lade være med at lytte. Det er ikke meningen din side skal have en 100% score i det, det er kun en guideline for at optimere mest muligt hvor de giver mening.

At deferre sin CSS giver en dårligere brugeroplevelse, da man som regel hellere vil vente et kvart sekund længere på indholdet (ved første visning, da det derefter caches), end man vil se et kort blink af en side uden CSS, hvorefter det skifter til stylet indhold.

Rent bortset fra det er det ukorrekt HTML at putte <link>-tags i bunden på den måde. Det må kun være i <head> sektionen, og du risikerer at en browser der overholder standarderne ikke vil rendere det overhovedet.

Hvis du virkelig har så meget brug for at optimere hastigheden, så skær ned på mængden af ressourcer i stedet. Undvær Bootstrap hvis du kan, eller fjern de elementer fra filen, du ikke bruger, osv. Det er en bedre løsning end at deferre det. Men i 99,9999% af tilfælde er det aldeles unødvendigt og bør bare ignoreres.
Avatar billede Slettet bruger
05. marts 2015 - 14:51 #2
Tusind tak for det uddybende svar. Det giver god mening :-)

Det er bare et mindre irritationsmoment at få en gul smiley og 84/100, når man forestiller sig at det påvirker SEO.

Men der er nok ingen tvivl om, at jeg skal have cuttet alt det unødvendige CSS væk!

Du kan bare smide et svar.
Avatar billede Slater Ekspert
06. marts 2015 - 08:32 #3
Så gerne.
15. juni 2016 - 09:20 #4
Så lige dette indlæg, så jeg skyndte mig at oprette mig for at kunne svare på det :)

Ikke at det ser så slemt ud for netop din side, men til en anden gang, kan det betale sig for sidens rendering at man putter scripts i burnden, og loader dem async, som man nu kan loade sådan.

Dernæst kan man loade css async også, via javascript. Det er bedre end at putte linktags ned i bunden af sitet.

Den metode du har brugt til både javascript og external css er fin nok, men den gør kun meget lidt for renderingstiden. Du skal helst gøre dem asynkrone, da de så ikke har indflydelse på renderingstiden. Og i realiteten, betyder det at man snyder Google PageSpeed insights til en bedre score ved kun at flytte det ned i bunden.

Alternativt kan du læse mere om netop det på denne side :)
http://kim-tetzlaff.dk/fjern-gengivelsesblokerende-javascript-og-css-fra-indholdet-over-skillelinjen.html
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester