I dette indl\u00e6g besvarer vi begge sp\u00f8rgsm\u00e5l til dig. Her er alt, hvad vi vil d\u00e6kke i dette indl\u00e6g:<\/p>\n
- \n
- Hvad render-blokerende ressourcer er, og hvorfor de er et problem<\/a><\/li>\n
- S\u00e5dan rettes render-blokerende ressourcer generelt<\/em><\/a><\/li>\n
- S\u00e5dan bruges gratis eller betalte plugins til at l\u00f8se problemet p\u00e5 WordPress<\/a><\/li>\n<\/ul>\n
Foretr\u00e6kker du at se videoversionen<\/a>?<\/h3>\n
<\/kinsta-video><\/p>\n Hvad betyder \u201dAt eliminere render-blokerende ressourcer\u201d?<\/h2>\n
For at forst\u00e5, hvad render-blokerende ressourcer er, og hvorfor de skader dit websteds belastningstider, er vi n\u00f8dt til at starte med et grundl\u00e6ggende kig p\u00e5, hvordan en webbrowser gengiver en webside.<\/p>\n
N\u00e5r en bes\u00f8gende lander p\u00e5 dit websted, starter deres webbrowser dybest set \u00f8verst p\u00e5 dit websteds kode<\/a> og l\u00e6ses ned af. Fra top til bund, fik du fat i det?<\/p>\n
Hvis den i denne proces m\u00f8der en CSS<\/a>– eller JavaScript-fil, skal den stoppe<\/strong> “l\u00e6sning”, mens den venter p\u00e5 at downloade og behandle denne fil. Den tid, det bruger “pause” til at downloade og analysere disse ressourcer, kunne bruges p\u00e5 noget meget mere produktivt, f.eks. indl\u00e6sning af den del af dit websteds indhold, der er umiddelbart synligt, n\u00e5r nogen lander p\u00e5 siden.<\/p>\n
Lad os se p\u00e5 et ekstremt eksempel for at vise, hvorfor dette kan v\u00e6re et problem.<\/p>\n
Lad os sige, at du har denne seje JavaScript-effekt i sidens sidefod. Det drives af “coolfooter.js”, som er et script, der er henvist til \u00f8verst p\u00e5 dit websteds kode (selvom effekten er i footeren, s\u00e5 bes\u00f8gende ikke kan se det, f\u00f8r de ruller til sidefoden).<\/p>\n
S\u00e5 et meget groft layout til dit websteds kode kan v\u00e6re noget i retning af:<\/p>\n
- \n
- Header meta<\/li>\n
- Coolfooter.js<\/li>\n
- HTML til dit indhold over skillelinjen. Dette er alt det indhold, som en bes\u00f8gende ser med det samme (f\u00f8r de begynder at interagere med siden<\/em>)<\/li>\n<\/ul>\n
Og her er grunden til, at dette er et problem:<\/p>\n
N\u00e5r en bes\u00f8gende lander p\u00e5 dit websted, begynder deres browser at l\u00e6se fra top til bund. S\u00e5 f\u00f8r det kan analysere og gengive HTML-koden til indholdet over skillelinjen p\u00e5 dit websted, skal det vente p\u00e5 at downloade og analysere filen coolfooter.js.<\/p>\n
Slutresultat? Det tager l\u00e6ngere tid at f\u00e5 vist HTML for indholdet over skillelinjen,<\/strong> hvilket betyder, at dine bes\u00f8gende opfatter dit websted som langsommere.<\/p>\n
N\u00e5r Google fort\u00e6ller dig at fjerne render-blokerende ressourcer, siger det i bund og grund: \u201dhej, efterlad ikke un\u00f8dvendige ressourcer \u00f8verst p\u00e5 dit websteds kode, fordi det vil tage det l\u00e6ngere tid for bes\u00f8gende ‘browsere at hente den synlige del af din indhold”.<\/p>\n
Med tipsene i dette indl\u00e6g kan du vente med at indl\u00e6se visse CSS- og JavaScript-ressourcer, indtil den synlige del af din side allerede er indl\u00e6st.<\/p>\n
Hvad er render-blokerende ressourcer?<\/h3>\n
N\u00e5r vi refererer til render-blokerende ressourcer, taler vi normalt om:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
Det er vigtigt at forst\u00e5, at ikke alle CSS- og JavaScript-filer er render-blokerende<\/strong>.<\/p>\n
For eksempel er det vigtigt at indl\u00e6se din kritiske CSS n\u00e6r toppen, ellers kan dine bes\u00f8gende muligvis opleve det, der er kendt som en flash af unstyled indhold<\/a> (FOUC).<\/p>\n
Bliver billeder render-blokerende ressourcer?<\/h3>\n
Nej, billeder blokeres ikke for gengivelse.<\/strong> Det er stadig vigtigt at optimere dine billeder<\/a> for at reducere deres filst\u00f8rrelser, men du beh\u00f8ver ikke at bekymre dig om at optimere leveringsstien til dine billeder.<\/p>\n
S\u00e5dan testes, hvis dit websted har render-blokerende ressourcer<\/h2>\n
For at vurdere, om dit WordPress-websted i \u00f8jeblikket har render-blokerende ressourcer, kan du bruge Google PageSpeed \u200b\u200bInsights<\/a>.<\/p>\n
Alt hvad du g\u00f8r er at indtaste den URL, du vil teste. S\u00e5 hvis du har et problem med render-blokerende ressourcer, viser PageSpeed \u200b\u200bInsights hver enkelt ressource i afsnittet Eliminere render-blokerende ressourcer<\/strong> under Muligheder<\/strong>:<\/p>\n
![\"Meddelelsen](\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/meddelelsen-eliminer-render-blokerende-resourcer.jpg\")
Meddelelsen eliminer render-blokerende resourcer i PageSpeed Insights<\/figcaption><\/figure>\n Hvordan fjerner du render-blokerende rescourcer?<\/h2>\n
Bare rolig, du beh\u00f8ver ikke g\u00f8re dette manuelt. Vi vil tale om WordPress-plugins, der kan hj\u00e6lpe dig med at eliminere render-blokerende ressourcer i det n\u00e6ste afsnit.<\/p>\n
Det er dog nyttigt at forst\u00e5, hvad disse plugins laver bag kulisserne for at eliminere render-blokerende ressourcer.<\/p>\n
S\u00e5dan fjernes render-blokerende JavaScript<\/h3>\n
Der er et par forskellige strategier for at eliminere render-blokerende JavaScript. Vi d\u00e6kker disse detaljeret i vores artikel om, hvordan man uds\u00e6tter parsing af JavaScript<\/a>, men her er de vigtigste metoder:<\/p>\n
- \n
- Async<\/strong> – lader HTML-parseren (f.eks. En bes\u00f8gende browser) downloade JavaScript, mens den stadig analyserer resten af \u200b\u200bHTML-filen. Det vil sige, det stopper ikke helt med at analysere, mens filen downloades. Det s\u00e6tter imidlertid HTML-parseren p\u00e5 pause for at udf\u00f8re scriptet, n\u00e5r det downloades.<\/li>\n
- Udskyd<\/strong> – lader HTML-parseren downloade JavaScript, mens den analyserer resten af \u200b\u200bHTML-filen, og<\/strong> venter p\u00e5 at udf\u00f8re scriptet, indtil HTML-parsing er afsluttet.<\/li>\n<\/ul>\n
Denne illustration fra Growing With the Web<\/a> g\u00f8r et godt stykke arbejde med at vise forskellen:<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/08\/javascript-async-vs-udsaettelse-1.png\")
JavaScript async vs uds\u00e6ttelse<\/figcaption><\/figure>\n Fordelen ved at bruge Uds\u00e6ttelse<\/strong> er, at dine scripts garanteres en udf\u00f8relse i den r\u00e6kkef\u00f8lge, de vises i koden.<\/p>\n
Async<\/strong> bruger ikke denne tilgang, som undertiden kan for\u00e5rsage problemer, hvis du anvender async<\/strong> til alle JavaScript-ressourcer, fordi det ofte kan \u00f8del\u00e6gge ressourcer, der er afh\u00e6ngige af ressourcer, der vises tidligere i dokumentet. Det mest almindelige problem, som async producerer, er \u00f8delagte jQuery<\/a>-ressourcer, der pr\u00f8ver at indl\u00e6se, f\u00f8r jquery.js er f\u00f8jet til dokumentet.<\/p>\n
S\u00e5dan fjernes render-blokerende CSS<\/h3>\n
Fjernelse af render-blokerende CSS kan v\u00e6re lidt vanskeligere, fordi du skal v\u00e6re forsigtig med ikke at uds\u00e6tte CSS, der er n\u00f8dvendigt for at gengive indholdet over skillelinjen. Det ideelle arrangement er at:<\/p>\n
- \n
- Identificer de stilarter, der kr\u00e6ves for at gengive indhold over skillelinjen, og lever disse styles p\u00e5 linje med HTML<\/a>.<\/li>\n
- Brug medieattributten p\u00e5 linkelementerne, der tr\u00e6kker CSS-filer ind for at identificere CSS-ressourcer, der er betingede, dvs. kun n\u00f8dvendige til specifikke enheder eller situationer.<\/li>\n
- Resterende CSS-ressourcer skal indl\u00e6ses asynkron, et tr\u00e6k, der typisk g\u00f8res ved at tilf\u00f8je dem med udskudt eller asynkron JavaScript. For at v\u00e6re \u00e6rlig, bliver det virkelig interessant her, ikke? Dette er bestemt frontend-ingeni\u00f8rens omr\u00e5de. Hvilket er godt, hvis du er frontend-ingeni\u00f8r, men de fleste af os er det ikke. Den gode nyhed er, at dette er en artikel om WordPress, og du kan eliminere eller i det mindste markant reducere antallet af render-blokerende JS- og CSS-ressourcer, der p\u00e5virker dit websted med de rigtige plugin (er).<\/li>\n<\/ul>\n
For en anden hurtig og nem m\u00e5de at booste din overordnede optimering p\u00e5, er det v\u00e6rd at overveje, at formindske din kode. Kinsta har indbygget en kode minifikationsfunktion<\/a> lige ind i MyKinsta-dashboardet<\/a>, s\u00e5 kunderne kan aktivere automatisk CSS- og JavaScript-minifikation med et enkelt klik.<\/p>\n
Hvis du ikke er i stand til at finde funktionen i dit dashboard, skal du blot se vores video, S\u00e5dan aktiverer du minifikation i MyKinsta<\/a>.<\/p>\n
S\u00e5dan fjernes render-blokerende CSS og JavaScript-ressourcer med WordPress Plugins<\/h2>\n
For at demonstrere, hvordan man fjerner render-blokerende ressourcer p\u00e5 WordPress, har vi oprettet et simpelt testsite, der indeholder render-blokerende CSS og JavaScript, og s\u00e5 tager vi dig igennem, hvordan du bruger to forskellige plugin-l\u00f8sninger til at eliminere render-blokerende CSS og JavaScript:<\/p>\n
- \n
- Autoptimize + Async JavaScript (gratis)<\/li>\n
- WP Rocket (betalt)<\/li>\n<\/ul>\n
Som reference ser det her ud som vores testwebsted, f\u00f8r vi optimerer levering af CSS<\/a> og JavaScript:<\/p>\n
Meddelelsen eliminer render-nlokerende resources i PageSpeed Insights<\/figcaption><\/figure>\n Hvis du tester effektiviteten af \u200b\u200bdine \u00e6ndringer med Google PageSpeed \u200b\u200bInsights, skal du v\u00e6re opm\u00e6rksom p\u00e5, at Google cache sine resultater i flere minutter. V\u00e6sentligt betyder det, at hvis du hurtigt …<\/p>\n
- \n
- Test dit ikke-optimerede websted<\/li>\n
- Aktiv\u00e9r et af plugins i dette afsnit<\/li>\n
- Test dit websted igen<\/li>\n<\/ol>\n
… s\u00e5 vil du stadig se resultaterne for dit uoptimerede websted, indtil Google nulstiller sin cache. S\u00e5 s\u00f8rg for at vente et par minutter p\u00e5, at Google rydder dens cache, f\u00f8r du tror, \u200b\u200bat plugin ikke fungerer.<\/p>\n
S\u00e5dan fjernes render-blokerende ressourcer, ved hj\u00e6lp af automatisk optimering + Async JavaScript-plugin<\/h3>\n
Autoptimize<\/a> og Async JavaScript<\/a> er to separate gratis plugins fra den samme udvikler. Sammen hj\u00e6lper de dig med at optimere leveringen af \u200b\u200bb\u00e5de din CSS og JavaScript.<\/p>\n
N\u00e5r du har installeret begge plugins<\/a>, skal du g\u00e5 til Indstillinger \u2192 Async JavaScript<\/strong> og:<\/p>\n
- \n
- Marker afkrydsningsfeltet Aktiver Asynkron JavaScript<\/strong> \u00f8verst.<\/li>\n
- V\u00e6lg mellem Anvend async<\/strong> og Anvend udskydning<\/strong> i boksen Hurtige indstillinger<\/strong>.<\/li>\n<\/ul>\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/sadan-konfigureres-async-javascript-plugin.jpg\")
S\u00e5dan konfigureres Async JavaScript-plugin<\/figcaption><\/figure>\n Hvis Async<\/strong>-indstillingen skaber problemer p\u00e5 dit websted, vil vi anbefale at pr\u00f8ve Uds\u00e6t<\/strong> eller ekskludere jQuery<\/strong>, som plugin giver dig en mulighed for.<\/p>\n
N\u00e5r du har konfigureret Async JavaScript-pluginnet, skal du g\u00e5 til Indstillinger \u2192 Autoptimize <\/strong>og:<\/strong><\/p>\n
- \n
- Marker afkrydsningsfeltet for at optimere JavaScript-kode<\/strong><\/li>\n
- Marker afkrydsningsfeltet for at optimere CSS-kode<\/strong><\/li>\n<\/ul>\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/sadan-konfigureres-plugin-autoptimize.jpg\")
S\u00e5dan konfigureres plugin Autoptimize<\/figcaption><\/figure>\n Hvis du er en avanceret bruger, kan du lege med de ekstra JavaScript- og CSS-optimeringsindstillinger, men de fleste websteder har det godt med standardindstillingerne.<\/p>\n
Efter at have konfigureret Autoptimize<\/a> og Async JavaScript, passerede vores testsite PageSpeed Insights ‘”Fjern render-blokerende ressourcer” -revision:<\/p>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/pagespeed-insights-resultater.jpg\")
PageSpeed Insights-resultater med Autoptimize og Async JavaScript<\/figcaption><\/figure>\n Hvis du \u00f8nskede at fjerne endnu flere af disse filer, kan du yderligere bruge Autoptimize til manuelt at indf\u00f8re din kritiske CSS<\/a>. Dette kr\u00e6ver dog noget kendskab til udvikling, s\u00e5 det er ikke noget, ikke-udviklere skal pr\u00f8ve.<\/p>\n
Du kan ogs\u00e5 bruge plugins separat, hvis det foretr\u00e6kkes. Men i betragtning af at begge plugins kommer fra den samme udvikler og er bygget til at spille p\u00e6nt med hinanden, er den bedste fremgangsm\u00e5de for de fleste steder at kombinere dem.<\/p>\n
S\u00e5dan fjernes render-blokerende ressourcer med WP Rocket<\/h3>\n
WP Rocket<\/a> er en popul\u00e6r premium WordPress-ydeevne og cache-plugin.<\/p>\n
Normalt tillader vi ikke cache-plugins<\/a> p\u00e5 WordPress-websteder, der er hosted hos Kinsta, fordi vi allerede h\u00e5ndterer cache til dig<\/a> p\u00e5 et serverniveau via den hurtige Nginx FastCGI-cache.<\/p>\n
WP Rocket har dog en speciel integration med Kinsta<\/a>, der lader WP Rocket spille godt sammen med din Kinsta-cache. Det er fantastisk, fordi WP Rocket g\u00f8r meget mere for WordPress-ydeevne end blot cache, herunder hj\u00e6lpe dig med at eliminere render-blokerende CSS- og JavaScript-ressourcer p\u00e5 dit WordPress-sted.<\/p>\n\n
N\u00e5r du installerer og aktiverer WP Rocket, skal du g\u00e5 til fanen Filoptimering<\/strong>. Aktiv\u00e9r derefter disse to indstillinger:<\/p>\n
- \n
- Optimer CSS-levering <\/strong>under afsnittet CSS-filer<\/strong><\/li>\n
- Indl\u00e6s uds\u00e6t JavaScript<\/strong> under afsnittet JavaScript-filer<\/strong>. Du kan eksperimentere med at sl\u00e5 Safe Mode til jQuery<\/strong> Men hvis du bem\u00e6rker problemer p\u00e5 frontend af dit websted, vil du genaktivere sikker tilstand for jQuery, da det er det h\u00f8jest sandsynligt er den skyldige.<\/li>\n<\/ul>\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
S\u00e5dan konfigureres WP Rocket<\/figcaption><\/figure>\n Efter aktivering af disse to funktioner passerede vores testsite ogs\u00e5 “eliminer render-blokerende ressourcer” -revisionen i PageSpeed Insights. WP Rocket form\u00e5ede ogs\u00e5 at eliminere flere render-blokerende ressourcer end JavaScript ops\u00e6tningen Autoptimize \/ Async:<\/p>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2019\/12\/pagespeed-insights-resultater-med-wp-rocket.jpg\")
PageSpeed Insights-resultater med WP-Rocket<\/figcaption><\/figure>\n Og s\u00e5dan fjerner du render-blokerende ressourcer p\u00e5 dit WordPress-websted!<\/p>\n\n
Resum\u00e9<\/h2>\n
Render-blokerende ressourcer bremser den oplevede sideindl\u00e6sningstid p\u00e5 dit WordPress-sted ved at tvinge den bes\u00f8gendes browsere til at forsinke gengivelse over indholdet over folden, mens browseren downloader filer, der ikke er n\u00f8dvendige med det samme.<\/p>\n
For at hj\u00e6lpe bes\u00f8gende med at indl\u00e6se den synlige del af din side hurtigere, skal du forsinke indl\u00e6sning af ressourcer, der ikke umiddelbart er p\u00e5kr\u00e6vet.<\/p>\n
For at fjerne render-blokerende ressourcer p\u00e5 WordPress kan du bruge off-the-rack-plugins.<\/p>\n
For en gratis l\u00f8sning kan du bruge kombinationen af \u200b\u200bAutoptimize og Async JavaScript, to plugins fra den samme udvikler.<\/p>\n
Hvis du er villig til at betale, kan du bruge WP Rocket, der tilbyder en speciel integration med Kinsta og kan hj\u00e6lpe med mange andre WordPress-performance tweeks<\/a>.<\/p>\n
Du har ogs\u00e5 mulighed for at bruge Kinsta CDN<\/a>, som introducerer edge caching, muligheden for at cache statiske sider, indbygget kode minificering og meget mere. Dette er indbygget direkte i MyKinsta-dashboardet<\/a> og er let tilg\u00e6ngeligt.<\/p>\n
Har du yderligere sp\u00f8rgsm\u00e5l om, hvordan du fjerner render-blokerende ressourcer i WordPress? Fort\u00e6l os det i kommentarerne!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hvis du nogensinde har k\u00f8rt dit WordPress-sted gennem Google PageSpeed \u200b\u200bInsights, har Google sandsynligvis fortalt dig, at du er n\u00f8dt til at eliminere render-blokerende ressourcer p\u00e5 …<\/p>\n","protected":false},"author":37,"featured_media":36860,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[183,238],"topic":[754,760],"class_list":["post-36848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-pagespeed","tag-performance","topic-wordpress-udvikling","topic-wordpress-ydeevne"],"yoast_head":"\n
S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)<\/title>\n<meta name=\"description\" content=\"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)\" \/>\n<meta property=\"og:description\" content=\"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/jonpenland\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-06T23:56:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T12:40:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jon Penland\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@jonrichpen\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jon Penland\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\"},\"author\":{\"name\":\"Jon Penland\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a\"},\"headline\":\"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)\",\"datePublished\":\"2020-05-06T23:56:07+00:00\",\"dateModified\":\"2023-08-24T12:40:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\"},\"wordCount\":2170,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg\",\"keywords\":[\"pagespeed\",\"performance\"],\"articleSection\":[\"Bedste WordPress Tutorials\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\",\"name\":\"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg\",\"datePublished\":\"2020-05-06T23:56:07+00:00\",\"dateModified\":\"2023-08-24T12:40:05+00:00\",\"description\":\"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg\",\"width\":1460,\"height\":730,\"caption\":\"S\u00e5dan fjernes render-blokerende ressourcer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress udvikling\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/wordpress-udvikling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a\",\"name\":\"Jon Penland\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g\",\"caption\":\"Jon Penland\"},\"description\":\"Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.\",\"sameAs\":[\"http:\/\/www.jonpenland.com\",\"https:\/\/www.facebook.com\/jonpenland\",\"https:\/\/www.linkedin.com\/in\/jonpenland\",\"https:\/\/x.com\/jonrichpen\"],\"url\":\"https:\/\/kinsta.com\/dk\/blog\/author\/jonpenland\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)","description":"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/","og_locale":"da_DK","og_type":"article","og_title":"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)","og_description":"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.","og_url":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_author":"https:\/\/www.facebook.com\/jonpenland","article_published_time":"2020-05-06T23:56:07+00:00","article_modified_time":"2023-08-24T12:40:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg","type":"image\/jpeg"}],"author":"Jon Penland","twitter_card":"summary_large_image","twitter_description":"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg","twitter_creator":"@jonrichpen","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Jon Penland","Estimeret l\u00e6setid":"11 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/"},"author":{"name":"Jon Penland","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a"},"headline":"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)","datePublished":"2020-05-06T23:56:07+00:00","dateModified":"2023-08-24T12:40:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/"},"wordCount":2170,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg","keywords":["pagespeed","performance"],"articleSection":["Bedste WordPress Tutorials"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/","url":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/","name":"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg","datePublished":"2020-05-06T23:56:07+00:00","dateModified":"2023-08-24T12:40:05+00:00","description":"L\u00e6r, hvordan du fjerner Render-Blocking JavaScript & CSS p\u00e5 dit WordPress-websted enten manuelt eller ved hj\u00e6lp af et plugin, s\u00e5som Autoptimize eller WP Rocket.","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2020\/05\/sadan-fjernes-render-blokerende-resourcer.jpg","width":1460,"height":730,"caption":"S\u00e5dan fjernes render-blokerende ressourcer"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/dk\/blog\/renderings-blokerende-javascript-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"WordPress udvikling","item":"https:\/\/kinsta.com\/dk\/emner\/wordpress-udvikling\/"},{"@type":"ListItem","position":3,"name":"S\u00e5dan fjernes render-blokerende ressourcer p\u00e5 WordPress (CSS + JavaScript)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a","name":"Jon Penland","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g","caption":"Jon Penland"},"description":"Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.","sameAs":["http:\/\/www.jonpenland.com","https:\/\/www.facebook.com\/jonpenland","https:\/\/www.linkedin.com\/in\/jonpenland","https:\/\/x.com\/jonrichpen"],"url":"https:\/\/kinsta.com\/dk\/blog\/author\/jonpenland\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/36848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=36848"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/36848\/revisions"}],"predecessor-version":[{"id":46360,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/36848\/revisions\/46360"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/translations\/se"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/36848\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/36860"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=36848"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=36848"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=36848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Indl\u00e6s uds\u00e6t JavaScript<\/strong> under afsnittet JavaScript-filer<\/strong>. Du kan eksperimentere med at sl\u00e5 Safe Mode til jQuery<\/strong> Men hvis du bem\u00e6rker problemer p\u00e5 frontend af dit websted, vil du genaktivere sikker tilstand for jQuery, da det er det h\u00f8jest sandsynligt er den skyldige.<\/li>\n<\/ul>\n
- Marker afkrydsningsfeltet for at optimere CSS-kode<\/strong><\/li>\n<\/ul>\n
- V\u00e6lg mellem Anvend async<\/strong> og Anvend udskydning<\/strong> i boksen Hurtige indstillinger<\/strong>.<\/li>\n<\/ul>\n
- Marker afkrydsningsfeltet Aktiver Asynkron JavaScript<\/strong> \u00f8verst.<\/li>\n
- Udskyd<\/strong> – lader HTML-parseren downloade JavaScript, mens den analyserer resten af \u200b\u200bHTML-filen, og<\/strong> venter p\u00e5 at udf\u00f8re scriptet, indtil HTML-parsing er afsluttet.<\/li>\n<\/ul>\n
- Async<\/strong> – lader HTML-parseren (f.eks. En bes\u00f8gende browser) downloade JavaScript, mens den stadig analyserer resten af \u200b\u200bHTML-filen. Det vil sige, det stopper ikke helt med at analysere, mens filen downloades. Det s\u00e6tter imidlertid HTML-parseren p\u00e5 pause for at udf\u00f8re scriptet, n\u00e5r det downloades.<\/li>\n
- S\u00e5dan rettes render-blokerende ressourcer generelt<\/em><\/a><\/li>\n