Vil du eliminere blokkering av JavaScript og CSS-gjengivelse i WordPress?
Hvis du tester nettstedet ditt med Google PageSpeed-innsikt, vil du sannsynligvis se et forslag om å fjerne skript- og CSS-gjengivelsesblokker. Den gir imidlertid ikke detaljer om hvordan du gjør dette på WordPress-nettstedet ditt.
I denne artikkelen skal vi vise deg hvordan du enkelt kan fikse blokkering av JavaScript og CSS-rendering i WordPress for å forbedre Google PageSpeed-poengsummen din.
Men før, la oss oppdage sammen Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din.
Hva er JavaScript og CSS gjengi-blokkering?
Blokkering av JavaScript- og CSS-gjengivelser er filer som forhindrer at et nettsted viser en webside før du laster dem inn.
Hvert WordPress-nettsted har et tema og plugins som legger til JavaScript- og CSS-filer på fronten av nettstedet ditt. Disse skriptene kan øke sidetiden på nettstedet ditt, og de kan også blokkere gjengivelsen av siden.
En brukers nettleser må laste inn disse skriptene og CSS før du laster inn resten av HTML-koden på siden. Dette betyr at brukere med en tregere forbindelse må vente noen millisekunder til for å se siden.
Disse skriptene og stilarkene kalles blokkering av JavaScript og CSS.
Nettstedseiere som prøver å oppnå en Google PageSpeed-score på 100, må løse dette for å oppnå den perfekte poengsummen.
Hva er Google PageSpeed Score?
Google PageSpeed Insights er et hastighetstestingverktøy laget av Google for å hjelpe eiere av nettstedene med å optimalisere og teste nettstedene sine. Dette verktøyet tester nettstedet ditt i henhold til Googles hastighetsretningslinjer og gir forslag til forbedring av lastetidene på nettstedssiden.
Den viser deg en poengsum basert på antall regler nettstedet ditt passerer. De fleste nettsteder er mellom 50 og 70. Noen eiere av nettstedet føler seg imidlertid presset til å nå 100.
Trenger du virkelig en "100" score på Google PageSpeed?
Formålet med Google PageSpeed-innsikt er å gi deg retningslinjer for å forbedre hastigheten og ytelsen til nettstedet ditt. Du er ikke pålagt å følge disse reglene strengt.
Husk at hastighet bare er en av de mange SEO-beregningene som hjelper Google med å bestemme hvordan du rangerer nettstedet ditt. Grunnen til at hastigheten er så viktig er at den forbedrer seg brukeropplevelsen på nettstedet ditt.
En bedre brukeropplevelse krever mye mer enn hastighet. Du må også tilby nyttig informasjon, bedre brukergrensesnitt og engasjere innhold med tekst, bilder og videoer.
Målet ditt bør være å lage et raskt nettsted som tilbyr en flott brukeropplevelse.
I løpet av den siste BlogPasCher-redesignen holdt vi fokus på hastighet og forbedret brukeropplevelsen.
Vi anbefaler at du bruker Google Pagespeed-regler som et forslag, og hvis du enkelt kan implementere dem uten å ødelegge brukeropplevelsen, er det flott. Hvis ikke, bør du strebe etter å gjøre så mye du kan, og ikke bekymre deg for resten.
Når det er sagt, la oss ta en titt på hva du kan gjøre for å fikse blokkering av JavaScript og CSS-gjengivelse i WordPress.
Vi kommer til å dekke to metoder som kan løse dette problemet. Du kan velge den som fungerer best på nettstedet ditt.
1. Fix renderblokkerende skript og CSS med WP Rocket
For denne metoden bruker vi WP Rocket-plugin. Dette er den beste WordPress-hurtigbufring-plugin i markedet og lar deg raskt forbedre ytelsen til nettstedet ditt uten tekniske eller komplekse ferdigheter.
Først av alt må du installere og aktivere WP Rocket-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin..
WP Rocket aktiverer hurtigbufferen med optimale innstillinger. Som standard aktiverer den ikke JavaScript- og CSS-optimaliseringsalternativer. Disse optimaliseringene kan potensielt påvirkeutseendet til nettstedet ditt eller visse funksjoner, det er derfor plugin-en lar deg aktivere disse innstillingene som et alternativ.
For å gjøre det må du fortsette Innstillinger »WP Rocket, bytt deretter tilFiloptimalisering '. Derfra blar du ned til seksjonen CSS-filer og merk av i boksene Komprimer CSS, Kombiner CSS-filer et Optimaliser CSS-levering.
Note : WP Rocket vil forsøke å forminske alle CSS-filene dine, kombinere dem og bare laste inn nødvendig CSS for den synlige delen av nettstedet ditt. Dette kan påvirkeutseendet til nettstedet ditt, så du bør teste nettstedet ditt grundig på flere enheter og skjermstørrelser.
Så må du bla til seksjonen JavaScript-filer. Herfra kan du krysse av for alle alternativene for maksimal ytelsesforbedring.
Du kan minifisere og kombinere JavaScript-filer akkurat som du gjorde CSS-filer.
Du kan også forhindre at WordPress laster opp filen. jQuery Migrer. Dette er et skript som WordPress laster for å gi kompatibilitet for plugins og temaer som bruker eldre versjoner av jQuery.
De fleste nettsteder trenger ikke denne filen, men det er lurt å sjekke nettstedet ditt for å sikre at fjerningen ikke påvirker temaet eller pluginene.
Rull deretter ned litt lenger og sjekk alternativene 'Last inn utsatt JavaScript'og'Sikker modus for jQuery'.
Disse alternativene forsinker lastingen av ikke-essensiell JavaScript, og jQuery Safe Mode lar deg laste jQuery for temaer som kan bruke den inline.
Husk å klikke på Lagre endringer for å lagre innstillingene.
Etter det kan du også tømme hurtigbufferen i WP Rocket før du tester nettstedet ditt igjen med Google Page Speed Insights.
På testnettstedet vårt var vi i stand til å oppnå 100% poengsum på stasjonære maskiner, og det gjengitte problemet ble løst i både mobil- og stasjonær score.
2. Løs blokkering av JavaScript og CSS med autoptimering
For denne metoden bruker vi en annen plugin som er laget spesielt for å forbedre leveringen av CSS- og JS-filene på nettstedet ditt. Mens denne pluginen får jobben, mangler den de andre kraftige funksjonene som WP Rocket tilbyr.
Det første du trenger å gjøre er å installere og aktivere plugin-modulen Autoptimize. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.
Når du aktiverer, må du gå til siden Innstilling »Optimaliser for å konfigurere plugin-innstillingene.
Først av alt må du sjekke alternativet 'Optimaliser JavaScript-kodenunder blokken Javascript alternativer. Forsikre deg om at alternativet 'Samle alle tilknyttede JS-filer' ikke er merket av.
Bla deretter ned til området CSS-alternativer og sjekk alternativet ' Optimalisere CSS-kode?'. Forsikre deg om at alternativet 'Samle alle koblede CSS-filerer ikke sjekket.
Du kan nå klikke på 'Lagre endringer og tømme cache' -knappen for å lagre innstillingene dine.
Test videre nettstedet ditt med Page Speed Insights. På vår demo-webside kunne vi løse problemet med gjengitt fast med disse grunnleggende innstillingene.
Hvis det fremdeles er gjengivende blokkerende skript, må du gå tilbake til innstillingssiden for plugin og se på alternativene JavaScript og CSS.
For eksempel kan du la plugin-en inkludere JS Inline og fjerne skript som er ekskludert som standard, som seal.js eller jquery.js.
Klikk på knappen "Lagre endringer og tøm cache" for å lagre endringene og tømme plugin-hurtigbufferen.
Når du er ferdig, kan du sjekke ut nettstedet ditt igjen med verktøyet Page Speed Insights.
Hvordan virker det?
Optimaliser pakker alle JavaScript- og CSS-filer automatisk. Etter det skaper han minifiserte CSS- og JavaScripts-filer og serverer hurtigbufrede kopier av nettstedet ditt på synkronisert eller utsatt basis.
Dette lar deg løse blokkeringsproblemet gjengivelser skript og blokkeringsstiler. Vær imidlertid oppmerksom på at dette også kan påvirke ytelsen ellerutseendet til nettstedet ditt.
hjelpe
Avhengig av hvordan plugins og WordPress-temaet bruker JavaScript og CSS, kan det være ganske vanskelig å løse alle problemene med blokkerer des JavaScript- og CSS-gjengivelser.
Selv om verktøyene over kan hjelpe, kan pluginene dine trenge visse skript på et annet prioritert nivå for å fungere ordentlig. I dette tilfellet kan de ovennevnte løsningene ødelegge funksjonaliteten til disse programtilleggene, eller de kan oppføre seg uventet.
Google kan fremdeles vise deg noen problemer som CSS-leveringsoptimalisering. WP Rocket lar deg fikse dette ved å legge til den kritiske CSS som er nødvendig for å vise WordPress-temaet perfekt.
Imidlertid kan det være ganske vanskelig å vite hvilken CSS-kode du trenger å vise.
Oppdag også noen temaer og premium WordPress-plugins
Du kan bruke andre WordPress-plugins for å gi et moderne utseende og optimalisere grepet på bloggen eller nettstedet ditt.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. WordPress Speed Optimization Plugin
Sliter du med å administrere flere plugin-moduler for hastighetsoptimalisering? Er du bekymret for at de hemmer kjøringshastigheten til nettstedet ditt? da vil dette WordPress-pluginet være den ultimate løsningen for alle dine bekymringer.
Dette pluginet er designet for å gi deg funksjonaliteten til nesten 6-8 forskjellige WordPress-plugins. Du må bare installere og konfigurere den for å se en markant forbedring i innlastingen av sidene dine.
Vi vil påpeke at dette ikke er et cache-plugin eller CDN, men resultatet det gir er likevel imponerende. Ikke nøl med å prøve dette WordPress-pluginet for å se hva det er i stand til.
2. Social Share & Locker Pro
Social Share & Locker Pro-utvidelsen er designet for å hjelpe nettstedet ditt å bli mer synlig på sosiale nettverk. Med bare noen få klikk kan du enten angi posisjonen til dine sosiale ikoner eller låse innholdet ditt ved å kreve deling på et av de sosiale nettverkene du tilbyr.
Du har 10 forhåndsdefinerte temaer, og dette skal dekke de vanligste ønsker. Alle temaene hennes er netthinne og arbeid underverker.
Med Social Share & Locker Pro vil du også kunne vise det fulle navnet på sosiale nettverk eller bare ikonet. Det vil avhenge av design, ledig plass eller dine ønsker.
3. WordPress PDF Images Lightbox
WordPress PDF Lightbox er en WordPress-utvidelse som lar deg lage seere av PDF-filer. En PDF-visning er en samling bilder som kan lagres som PDF-er.
Med denne utvidelsen kan du opprette så mange PDF-visere som du vil. For hver seer kan administratoren angi noen alternativer som:
- Omslagsbildet: som legges til som første side i den brukeropprettede PDF-filen
- Maksimalt antall bilder per seer
- Et vannmerkebilde: skal brukes på PDF-sider
- Sending via e-post: hvis denne funksjonen er aktivert, a Kontaktskjema vil bli tilbudt like etter bildegalleriet. Gjennom dette skjemaet vil brukere kunne sende den opprettede PDF-filen til hvem som helst.
Anbefalte ressurser
Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.
- 10 WordPress-plugins for å forbedre SEO på nettstedet ditt
- 5 premium WordPress plugins for å optimalisere kategoriene dine
- 10 WordPress-plugins for å konvertere valuta
- 10 WordPress plugins for å integrere en lydavspiller på en nettside
konklusjonen
Her! Det er det for denne opplæringen. Vi håper denne artikkelen har hjulpet deg med å lære hvordan du løser JavaScript og CSS-gjengivelsesblokkering i WordPress. Du kan også se vår ultimate guide for hvordan du kan øke hastigheten på WordPress for nybegynnere.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.
Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk. Og hvis du har noen forslag eller kommentarer, la dem være i vår seksjon commentaires.
...
