CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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?

Synes godt om

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.

Synes godt om

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.

Synes godt om

Slater Ekspert

06. marts 2015 - 08:32 #3

Så gerne.

Synes godt om

Kim Tetzlaff - Hastighedsekspert og webudvikler Praktikant

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

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS