{"id":254076,"date":"2022-04-05T10:28:00","date_gmt":"2022-04-05T07:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=254076"},"modified":"2022-04-27T12:29:48","modified_gmt":"2022-04-27T09:29:48","slug":"hur-man-optimerar-css-leverans-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-optimerar-css-leverans-i-wordpress\/","title":{"rendered":"Hur man optimerar CSS-leverans i WordPress"},"content":{"rendered":"

Om du \u00e4r h\u00e4r \u00e4r det troligtvis f\u00f6r att du fick det h\u00e4r meddelandet i Googles test av PageSpeed \u200b\u200bInsights<\/a> :<\/p>\n

\"Hur<\/a><\/p>\n

\u00c4ven om det kan vara sv\u00e5rt att eliminera alla renderingsblockerande filer, \u00e4r det inte s\u00e5 sv\u00e5rt med r\u00e4tt verktyg.<\/p>\n

I den h\u00e4r guiden visar jag dig tre s\u00e4tt att snabba upp din webbplats<\/a> med optimerad CSS-leverans. Det finns alternativ f\u00f6r b\u00e5de totala WordPress-nyheter och utvecklare som ing\u00e5r h\u00e4r.<\/p>\n

L\u00e5t oss b\u00f6rja fr\u00e5n toppen \u2013 vad exakt inneb\u00e4r det att optimera leveransen av CSS p\u00e5 din WordPress-webbplats?<\/p>\n

Vad betyder "optimera CSS-leverans"?<\/h2>\n

L\u00e5t mig vara riktigt tydlig med vad jag menar f\u00f6rst.<\/p>\n

CSS-filer anv\u00e4nds f\u00f6r att utforma webbsidor<\/a>. Varje WordPress-tema laddar en style.css-fil och du har f\u00f6rmodligen en handfull ytterligare stilmallar (CSS-filer) tillagda av plugins. Till exempel, om du har en plugin som l\u00e4gger till en ny widget, m\u00e5ste den ladda en annan stilmall f\u00f6r att utforma den widgeten.<\/p>\n

Alla CSS-filer laddas innan din webbplats renderas.<\/strong><\/p>\n

Detta inneb\u00e4r att bes\u00f6kare kommer att se en tom vit sk\u00e4rm tills dess. Nu \u00e4r det h\u00e4r…<\/p>\n

Majoriteten av den CSS som laddas beh\u00f6vs inte f\u00f6r vilken sida bes\u00f6karen \u00e4n \u00e4r p\u00e5, och \u00e4nnu mindre av den beh\u00f6vs f\u00f6r vad de omedelbart kan se. Varf\u00f6r f\u00e5 dem till exempel att v\u00e4nta medan du laddar stilar f\u00f6r sidfoten? Det kommer f\u00f6rmodligen att dr\u00f6ja minst n\u00e5gra sekunder innan de ser det (om de n\u00e5gonsin g\u00f6r det).<\/p>\n

Genom att skjuta upp v\u00e5ra CSS-filer eller ladda dem asynkront kan vi till\u00e5ta webbplatsen att dyka upp i bes\u00f6karens webbl\u00e4sare innan stilmallarna laddas klart.<\/p>\n

I den h\u00e4r guiden kommer jag att dela tre olika metoder f\u00f6r att skjuta upp dina stilmallar och optimera din CSS-leverans.<\/p>\n

Optimerade kritiska renderingsv\u00e4gar i aktion<\/h3>\n

Om du bes\u00f6ker Compete Themes-hemsidan<\/a>, h\u00e5ll ett \u00f6ga p\u00e5 laddningsindikatorn p\u00e5 webbl\u00e4sarfliken medan sajten laddas. Du kommer att m\u00e4rka att efter att webbplatsen \u00e4r synlig och ser ut att vara laddad, forts\u00e4tter laddningsindikatorn att snurra bara ett \u00f6gonblick till.<\/p>\n

Det \u00e4r ett exempel p\u00e5 hur optimerad CSS-leverans ser ut i praktiken.<\/p>\n

Om du vill se ett exempel p\u00e5 en mycket optimerad kritisk renderingsv\u00e4g<\/a> bes\u00f6ker du Amazon. Hela sidan laddas inte p\u00e5 en g\u00e5ng. Ist\u00e4llet kommer du under n\u00e5gra sekunder att se olika element visas p\u00e5 sidan tack vare den noggrant optimerade renderingsv\u00e4gen.<\/p>\n

1 WP raket<\/h2>\n

Jag anv\u00e4nder plugin- programmet WP Rocket<\/a> h\u00e4r p\u00e5 Compete Themes och rekommenderar det f\u00f6re alla andra l\u00f6sningar f\u00f6r optimering av kritisk renderingsv\u00e4g.<\/p>\n

Att optimera din CSS-leverans med WP Rocket kunde verkligen inte vara enklare. I menyn Filoptimering finns en kryssruta f\u00f6r att aktivera den h\u00e4r funktionen.<\/p>\n

\"Hur<\/a><\/p>\n

N\u00e4r det \u00e4r markerat kommer WP Rocket automatiskt att skjuta upp alla dina stilmallar s\u00e5 att de inte laddas f\u00f6rr\u00e4n efter att webbplatsen dyker upp i bes\u00f6karens webbl\u00e4sare. Nu, om all CSS skjuts upp, skulle din webbplats se hemsk ut tills den laddades, och WP Rocket-utvecklarna har \u00e5tg\u00e4rdat detta elegant med sin plugin.<\/p>\n

N\u00e4r du aktiverar det h\u00e4r alternativet kommer WP Rocket automatiskt att hitta den CSS som beh\u00f6vs f\u00f6r att utforma de delar av din webbplats som bes\u00f6karna ser n\u00e4r din webbplats laddas, och den koden l\u00e4ggs till i dokumentet.<\/p>\n

Med andra ord, din webbplats dyker upp snabbare i webbl\u00e4saren och ser ut att vara fulladdad medan den uppskjutna CSS-en sedan laddas under n\u00e4sta sekund eller tv\u00e5.<\/p>\n

Enligt min mening \u00e4r detta den \u00f6verl\u00e4gset b\u00e4sta l\u00f6sningen f\u00f6r att optimera CSS-leverans med WordPress.<\/p>\n

WP Rocket \u00e4r ett premiumplugin, men om snabbare laddningstider ger dig mer inkomst fr\u00e5n din webbplats, skulle jag definitivt \u00f6verv\u00e4ga att skaffa det f\u00f6r din webbplats. Jag har en mycket mer detaljerad titt p\u00e5 WP Rocket som<\/a> du kan l\u00e4sa om du vill l\u00e4ra dig mer. Annars kan du kolla in deras sida h\u00e4r<\/a>.<\/p>\n

2 Autooptimera<\/h2>\n

Den andra metoden jag skulle rekommendera \u00e4r Autoptimize-<\/a> plugin.<\/p>\n

\"Hur<\/a><\/p>\n

Detta funktionsrika prestandaplugin ger n\u00e5gra metoder f\u00f6r att optimera CSS-leverans. Det enklaste alternativet \u00e4r att helt enkelt infoga all CSS. Detta tar all CSS som finns i dina stilmallar och l\u00e4gger till den direkt i siddokumentet s\u00e5 att inga stilmallar laddas.<\/p>\n

F\u00f6r att hitta det h\u00e4r alternativet m\u00e5ste du klicka p\u00e5 knappen Visa avancerade inst\u00e4llningar l\u00e4ngst upp.<\/p>\n

\"Hur<\/a><\/p>\n

Du kommer d\u00e5 att se alternativet att infoga all CSS.<\/p>\n

\"Hur<\/a><\/p>\n

\u00c4ven om det h\u00e4r alternativet kan f\u00f6rb\u00e4ttra prestanda, om du har lagt till f\u00f6r mycket CSS i siddokumentet, kan det faktiskt sakta ner din webbplats ist\u00e4llet. Det kan vara v\u00e4rt att experimentera med.<\/p>\n

Annars \u00e4r ett snyggt tillv\u00e4gag\u00e5ngss\u00e4tt att aktivera alternativet att infoga och skjuta upp CSS ist\u00e4llet. Detta kommer att skjuta upp alla stilmallar och bara infoga den kritiska CSS. Det kommer dock inte automatiskt att hitta den kritiska CSS f\u00f6r dig som WP Rocket.<\/p>\n

S\u00e5 hur f\u00e5r du din webbplats kritiska CSS? Till och med f\u00f6r en erfaren WP-utvecklare kan detta vara en slags head-scratcher.<\/p>\n

\u00c4ven om jag inte har testat det h\u00e4r verktyget f\u00f6r tillf\u00f6rlitlighet sj\u00e4lv, skulle detta gratis Critical Path CSS Generator-<\/a> verktyg vara ett h\u00e5llbart tillv\u00e4gag\u00e5ngss\u00e4tt. Ange din webbplats URL och den kommer att returnera den CSS du absolut beh\u00f6ver ladda.<\/p>\n

Du kan sedan kopiera och klistra in den koden i CSS-rutan f\u00f6r kritisk s\u00f6kv\u00e4g i Autoptimize.<\/p>\n

\"Hur<\/a><\/p>\n

Om du anv\u00e4nder detta tillv\u00e4gag\u00e5ngss\u00e4tt kan du beh\u00f6va l\u00e4gga till ytterligare CSS f\u00f6r olika sidor p\u00e5 din webbplats, och det kan kr\u00e4va att du k\u00e4nner till ditt temas CSS mycket v\u00e4l f\u00f6r att s\u00e4kerst\u00e4lla konsekvent stil.<\/p>\n

Ett annat tillv\u00e4gag\u00e5ngss\u00e4tt<\/h3>\n

Det finns ett plugin som heter Autoptimize criticalcss.com power-up<\/a>. Det \u00e4r ganska mycket, men denna extra plugin l\u00e5ter dig automatiskt generera din webbplats kritiska CSS med hj\u00e4lp av criticalcss.com-<\/a> tj\u00e4nsten.<\/p>\n

Du m\u00e5ste registrera dig med CriticalCSS f\u00f6r ett betalkonto f\u00f6r att anv\u00e4nda det h\u00e4r alternativet.<\/p>\n

3 Snabba upp<\/h2>\n

Det sista alternativet \u00e4r mycket snabbt och kommer att vara enkelt f\u00f6r en WordPress-utvecklare att implementera.<\/p>\n

Speed \u200b\u200bUp<\/a> \u00e4r ett l\u00e4tt plugin som l\u00e5ter dig skjuta upp alla icke-kritiska stilmallar.<\/p>\n

\"Hur<\/a><\/p>\n

\u00c4ven om detta inte kommer att optimera din CSS-leverans helt, kommer det att hj\u00e4lpa.<\/p>\n

L\u00e5t oss s\u00e4ga att ditt tema l\u00e4gger till en stilmall och sedan finns det ytterligare fem stilmallar som l\u00e4ggs till av plugins. Om bara temaformatmallen \u00e4r avg\u00f6rande att ladda innan webbplatsen visas, kan du skjuta upp de andra fem.<\/p>\n

Speed \u200b\u200bUp ger dig ett enkelt filter som du kan l\u00e4gga till i ett barntemas functions.php-fil (eller ett plugin) f\u00f6r att skjuta upp alla stilmallar du vill ha. Allt du beh\u00f6ver \u00e4r handtagen p\u00e5 varje stilmall som laddas. Du kan hitta n\u00e5gra enkla funktioner h\u00e4r<\/a> f\u00f6r att skriva ut handtagen f\u00f6r alla registrerade stilmallar p\u00e5 din webbplats.<\/p>\n

\u00c5terigen kommer detta att vara snabbt och enkelt f\u00f6r en utvecklare, men jag skulle inte rekommendera den h\u00e4r l\u00f6sningen om du inte skriver kod.<\/p>\n

Slutsats<\/h2>\n

Jag hoppas att du l\u00e4rde dig en sak eller tv\u00e5 om WordPress prestandaoptimering<\/a> i det h\u00e4r inl\u00e4gget.<\/p>\n

\u00c4ven om var och en av de tre l\u00f6sningarna ovan kan fungera bra, m\u00e5ste jag ge en sista shout-out till WP Rocket-plugin<\/a>. Som b\u00e5de bloggare och WordPress-temautvecklare tycker jag att det \u00e4r s\u00e5 enkelt och sm\u00e4rtfritt att arbeta med.<\/p>\n

Om du vill ha n\u00e5gra fler tips f\u00f6r att snabba upp din webbplats kanske du gillar den h\u00e4r guiden om bildoptimering<\/a> eller min WP Engine-recension<\/a> som Compete Themes f\u00f6rlitar sig p\u00e5 f\u00f6r snabba laddningstider.<\/p>\n

Inspelningsk\u00e4lla: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

L\u00e4r dig hur du snabbar upp din WordPress-webbplats med en av dessa tre metoder f\u00f6r att optimera CSS-leveransen. Nyb\u00f6rjare och avancerade tips inuti.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[667,656,587,614],"tags":[850],"class_list":["post-254076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frilans","category-hur-gora","category-snabba-upp-wordpress","category-uncategorized-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/254076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=254076"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/254076\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=254076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=254076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=254076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}