Vil du fjerne blokeringen af JavaScript- og CSS-gengivelse i WordPress?
Hvis du tester dit websted med Google PageSpeed-indsigt, vil du sandsynligvis se et forslag om at fjerne script- og CSS-gengivelsesblokke. Det giver dog ikke detaljer om, hvordan du gør dette på dit WordPress-websted.
I denne artikel viser vi dig, hvordan du let fikserer blokering af JavaScript og CSS-rendering i WordPress for at forbedre din Google PageSpeed-score.
Men før, lad os opdage sammen Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog.
Hvad er JavaScript og CSS gengivelsesblokering?
Blokering af JavaScript- og CSS-gengivelser er filer, der forhindrer et websted i at vise en webside, før de indlæses.
Hvert WordPress-websted har et tema og plugins, der tilføjer JavaScript- og CSS-filer til fronten på dit websted. Disse scripts kan øge dit websteds indlæsningstid, og de kan også blokere gengivelsen af siderne.
En brugers browser skal indlæse disse scripts og CSS før indlæsning af resten af HTML-koden på siden. Dette betyder, at brugere med en langsommere forbindelse skal vente et par millisekunder mere for at se siden.
Disse scripts og stilark kaldes JavaScript- og CSS-gengivelsesblokere.
Webstedsejere, der prøver at opnå en Google PageSpeed-score på 100, bliver nødt til at løse dette for at opnå den perfekte score.
Hvad er Google PageSpeed Score?
Google PageSpeed Insights er et hastighedstestværktøj oprettet af Google til at hjælpe webstedsejere med at optimere og teste deres websteder. Dette værktøj tester dit websted i forhold til Googles hastighedsretningslinjer og giver forslag til forbedring af belastningstiderne på din webside.
Det viser dig en score baseret på antallet af regler, som dit websted vedtager. De fleste websteder er mellem 50 og 70. Nogle webstedsejere føler sig imidlertid presset til at nå 100.
Har du virkelig brug for en "100" score på Google PageSpeed?
Formålet med Google PageSpeed-indsigt er at give dig retningslinjer for at forbedre dit websteds hastighed og ydeevne. Du skal ikke nøje følge disse regler.
Husk, hastighed er kun en af de mange SEO-metrics, der hjælper Google med at bestemme, hvordan du rangerer dit websted. Årsagen til hastighed er så vigtig, at den forbedres brugeroplevelsen på din hjemmeside.
En bedre brugeroplevelse kræver meget mere end hastighed. Du skal også tilbyde nyttige oplysninger, bedre brugergrænseflade og engagere indhold med tekst, billeder og videoer.
Dit mål skal være at oprette et hurtigt websted, der tilbyder en god brugeroplevelse.
Under den seneste BlogPasCher-redesign holdt vi fokus på hastighed såvel som forbedring af brugeroplevelsen.
Vi anbefaler, at du bruger Google Pagespeed-regler som et forslag, og hvis du let kan implementere dem uden at ødelægge brugeroplevelsen, er det godt. Hvis ikke, skal du stræbe efter at gøre så meget som du kan, og så ikke bekymre dig om resten.
Med det sagt, lad os se på, hvad du kan gøre for at rette JavaScript og CSS-gengivelsesblokering i WordPress.
Vi vil dække to metoder, der kan løse dette problem. Du kan vælge den, der fungerer bedst på dit websted.
1. Fix render-blokerende scripts og CSS med WP Rocket
Til denne metode bruger vi WP Rocket-plugin. Dette er det bedste WordPress-cache-plugin på markedet og giver dig mulighed for hurtigt at forbedre ydelsen på dit websted uden tekniske eller komplekse kvalifikationer.
Først og fremmest skal du installere og aktivere WP Rocket-plugin. Yderligere oplysninger finder du i vores trin for trin-guide til, hvordan du installerer et WordPress-plugin..
WP Rocket aktiverer sin cache med optimale indstillinger. Som standard aktiverer den ikke JavaScript- og CSS-optimeringsmuligheder. Disse optimeringer kan potentielt påvirkeudseendet af din hjemmeside eller visse funktioner, det er derfor, plugin'et lader dig aktivere disse indstillinger som en mulighed.
For at gøre det skal du fortsætte Indstillinger »WP Rocket, skift derefter til 'Filoptimering '. Derefter skal du rulle ned til sektionen CSS-filer og marker krydsene Minimer CSS, Kombiner CSS-filer et Optimer CSS-levering.
Remarque : WP Rocket vil forsøge at minificere alle dine CSS-filer, kombinere dem og kun indlæse den nødvendige CSS for den synlige del af dit websted. Dette kan påvirkeudseendet af din hjemmeside, så du bør teste din hjemmeside grundigt på flere enheder og skærmstørrelser.
Derefter skal du rulle til sektionen JavaScript-filer. Herfra kan du markere alle mulighederne for maksimal forbedring af ydelsen.
Du kan minimere og kombinere JavaScript-filer, ligesom du gjorde CSS-filer.
Du kan også forhindre WordPress i at uploade filen. jQuery Migrer. Dette er et script, som WordPress indlæser for at give kompatibilitet til plugins og temaer, der bruger ældre versioner af jQuery.
De fleste websteder har ikke brug for denne fil, men det er en god ide at tjekke dit websted for at sikre, at dets fjernelse ikke påvirker dit tema eller plugins.
Rul derefter lidt længere ned og kontroller indstillingerne 'Indlæs JavaScript udsat'og'Safe Mode til jQuery«.
Disse indstillinger forsinker indlæsningen af ikke-essentiel JavaScript, og jQuery Safe Mode giver dig mulighed for at indlæse jQuery til temaer, der kan bruge det inline.
Husk at klikke på knappen Gem ændringer for at gemme dine indstillinger.
Derefter kan du også rydde cachen i WP Rocket, før du tester dit websted igen med Google Page Speed Insights.
På vores testwebsted var vi i stand til at opnå 100% score på desktops, og problemet med render-fast blev løst i både mobil- og desktop-scoringer.
2. Fix blokering af JavaScript og CSS med autoptimering
Til denne metode bruger vi et andet plugin, der er lavet specifikt for at forbedre leveringen af dit websteds CSS- og JS-filer. Mens dette plugin får jobbet gjort, mangler det de andre kraftfulde funktioner, som WP Rocket tilbyder.
Den første ting, du skal gøre, er at installere og aktivere plugin Autoptimize. Yderligere oplysninger finder du i vores trin-for-trin-guide til, hvordan du installerer et WordPress-plugin.
Når du aktiverer, skal du besøge siden Indstilling »Automatisk optimering for at konfigurere plugin-indstillingerne.
Først og fremmest skal du kontrollere indstillingen 'Optimer JavaScript-kodeunder blokken JavaScript Indstillinger. Sørg for, at indstillingen 'Saml alle sammenkædede JS-filer' ikke er markeret.
Rul derefter ned til området CSS-indstillinger og tjek indstillingen ' Optimer CSS-kode?'. Sørg for, at indstillingen 'Saml alle sammenkoblede CSS-filerer ikke markeret.
Du kan nu klikke på knappen 'Gem ændringer og ryd cache' for at gemme dine indstillinger.
Gå videre og test dit websted med Page Speed Insights. På vores demonstrationswebsted var vi i stand til at løse problemet med render fast med disse grundlæggende indstillinger.
Hvis der stadig findes blokerende scripts, skal du gå tilbage til plugins indstillingsside og se på indstillingerne JavaScript og CSS.
For eksempel kan du tillade, at plugin inkluderer JS Inline og fjerner scripts, der som standard er ekskluderet som seal.js eller jquery.js.
Klik på knappen 'Gem ændringer og ryd cache' for at gemme dine ændringer og rydde plugin-cachen.
Når du er færdig, skal du fortsætte og tjekke dit websted igen med værktøjet til sidehastighed.
Hvordan virker det?
Optimér pakker alle JavaScript- og CSS-filer automatisk. Derefter skaber han minificerede CSS- og JavaScripts-filer og serverer cache-kopier af dit websted på en synkroniseret eller udsat basis.
Dette giver dig mulighed for at løse blokeringsproblemet renderinger scripts og blokeringsstile. Vær dog opmærksom på, at dette også kan påvirke ydeevnen ellerudseendet af din hjemmeside.
hjælpe
Afhængig af hvordan plugins og dit WordPress-tema bruger JavaScript og CSS, kan det være ganske vanskeligt at løse alle problemer med blokering af JavaScript- og CSS-gengivelser.
Mens værktøjerne ovenfor kan hjælpe, har dine plugins muligvis brug for visse scripts på et andet prioritetsniveau for at fungere korrekt. I dette tilfælde kan ovennævnte løsninger muligvis ødelægge funktionaliteten af disse plugins, eller de kan opføre sig uventet.
Google kan stadig vise dig nogle problemer som CSS-leveringsoptimering. WP Rocket giver dig mulighed for at løse dette ved manuelt at tilføje den kritiske CSS, der er nødvendig for at få vist dit WordPress-tema perfekt.
Det kan dog være ret vanskeligt at vide, hvilken CSS-kode du har brug for at vise.
Oplev også nogle temaer og premium WordPress-plugins
Du kan bruge andre WordPress-plugins til at give et moderne look og optimere grebet på din blog eller dit websted.
Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.
1. WordPress Speed Optimization Plugin
Kæmper du med at administrere flere plugins til optimering af hastighed på hjemmesiden? Er du bekymret for, at de hæmmer eksekveringshastigheden på dit websted? så vil dette WordPress-plugin være den ultimative løsning til alle dine bekymringer.
Dette plugin er designet til at give dig funktionaliteten af næsten 6-8 forskellige WordPress-plugins. Du skal bare installere og konfigurere det for at se en markant forbedring af indlæsningen af dine sider.
Vi vil gerne påpege, at dette ikke er et cache-plugin eller CDN, men resultatet, det giver, er ikke desto mindre imponerende. Tøv ikke med at prøve dette WordPress-plugin for at se, hvad det er i stand til.
Downloade | demo | Web-hosting
2. Social Share & Locker Pro
Social Share & Locker Pro-udvidelsen er designet til at hjælpe dit websted med at blive mere synligt på sociale netværk. Med blot et par klik kan du enten indstille placeringen af dine sociale ikoner eller låse dit indhold ved at kræve deling på et af de sociale netværk, du tilbyder.
Du har 10 foruddefinerede temaer, og dette skal dække de mest almindelige ønsker. Alle hendes temaer er nethinde og arbejder vidundere.
Også med Social Share & Locker Pro kan du vise det fulde navn på sociale netværk eller bare ikonet. Det afhænger af dit design, den ledige plads eller dine ønsker.
Downloade | demo | Web-hosting
3. WordPress PDF Billeder Lightbox
WordPress PDF Lightbox er en WordPress plugin som giver dig mulighed for at oprette seere af PDF-filer. En PDF-fremviser er en samling af fotos, der kan gemmes som PDF-filer.
Med denne udvidelse kan du oprette så mange PDF-seere, som du vil. For hver seer kan administratoren indstille nogle indstillinger som:
- Forsidebillede: der tilføjes som den første side i den brugeroprettede PDF
- Maksimale billeder pr. Seer
- Et vandmærkebillede: skal anvendes på PDF-sider
- Afsendelse via e-mail: hvis denne funktion er aktiveret, a Kontaktformular vil blive tilbudt lige efter billedgalleriet. Gennem denne formular vil brugere være i stand til at sende den oprettede PDF til enhver.
Downloade | demo | Web-hosting
Anbefalede ressourcer
Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.
- 10 WordPress-plugins for at forbedre SEO på dit websted
- 5 premium WordPress plugins til optimering af dine kategorier
- 10 WordPress-plugins til konvertering af valuta
- 10 WordPress plugins til at integrere en lydafspiller i en hjemmeside
Konklusion
Her ! Det er det til denne tutorial. Vi håber, at denne artikel har hjulpet dig med at lære at rette JavaScript og CSS-gengivelsesblokering i WordPress. Du kan også se vores ultimativ guide til, hvordan man fremskynder WordPress-ydeevne for begyndere.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.
Tøv ikke med at del med dine venner på dine foretrukne sociale netværk. Og hvis du har forslag eller bemærkninger, skal du lade dem være i vores afsnit kommentarer.
...
