Introduksjon
Hvis du har fått sidecaching og bildeoptimalisering på plass, lastes nettstedet ditt allerede raskere enn det gjorde i standardoppsettet. Nå skal vi vise deg neste trinn i arbeidet med ytelsesoptimalisering: hvordan nettleseren din håndterer CSS- og JavaScript-filene som styrer nettstedets utseende og funksjonalitet.
Hver WordPress-side laster inn flere CSS-filer (som bestemmer sidens utseende) og JavaScript-filer (som tilfører interaktivitet). Et nettsted som bruker ti utvidelser kan fort sende et dusin CSS-filer og like mange JavaScript-filer til nettleseren før brukeren ser noe som helst. Hver av disse filene øker nedlastingstiden og belastningen på systemet.
Med AccelerateWP på STW WordPress-hosting får du direkte kontroll over optimalisering av CSS og JS direkte fra WordPress-kontrollpanelet.
Slik påvirker CSS og JS sidens lastetid
Når en nettleser laster inn siden din, leser den HTML-koden fra topp til bunn. Hver gang den støter på en CSS-fil setter den visningen på pause inntil filen er fullstendig lastet ned og behandlet. Nettleseren viser ikke noe på skjermen før den vet hvordan hvert element skal se ut.
JavaScript forårsaker en enda lengre pause. Når nettleseren støter på en <script>-tag stopper den opp, laster ned filen, analyserer den og kjører koden før den fortsetter med resten av siden. En enkelt stor JavaScript-fil fra et slider-utvidelse eller en analysetracker kan fryse den synlige siden i flere hundre millisekunder.
Dette er grunnen til at en nettside med en rask server og bilder i riktig størrelse likevel kan føles treg. Ved å komprimere disse filene (fjerne unødvendige tegn), utsette innlasting av skript (laste dem inn etter at siden vises) og optimalisere leveringen av CSS, kan du redusere ventetiden for leserne.
Filoptimalisering i AccelerateWP
På STW WordPress-hosting inneholder AccelerateWP en side for Optimalisering av filer som gir deg detaljert kontroll over håndteringen av CSS og JavaScript. Du finner den ved å gå til AccelerateWP → Optimalisering av filer i kontrollpanelet i WordPress.
I enkelte hostingkonfigurasjoner kan denne siden se tom ut, med kun en Lagre endringer-knapp. Det betyr at filoptimaliseringen håndteres på servernivå, og at du ikke trenger å konfigurere noe her.
Siden for optimalisering av filer er delt inn i to seksjoner: CSS-filer og JavaScript-filer. Vi skal gå gjennom hver enkelt innstilling.
CSS-innstillinger
Minify CSS-filer fjerner mellomrom, kommentarer og unødvendig formatering fra CSS-filene dine. En minifisert fil gir samme visuelle resultat, men med mindre filstørrelse. Et stilark på 120 KB kan bli redusert til 85 KB etter minifisering, uten at det blir noen synlige endringer. Denne funksjonen er aktivert som standard, og du bør la den være på.
Under avkryssingboksen kan du unnta bestemte filer fra minifisering i feltet Ekskluderte CSS-filer, for eksempel hvis CSS-filen til et bestemt utvidelse slutter å fungere når den minifiseres. Dette er sjeldent, men mulig. Skriv inn filstien (én per linje) med det samme mønsteret som i eksempelet, for eksempel /wp-content/utvidelser/min-utvidelse/(.*).css. Mest sannsynlig kan du la dette feltet stå tomt.
Optimize CSS delivery eliminierer blokkering av visningen ved å laste inn stiler asynkront og legge inn nødvendig CSS direkte i koden. Denne funksjonen er ofte deaktivert, noe som indikerer at den håndteres på servernivå.
Fallback for Critical CSS er et tekstfelt der du kan legge inn nødvendig CSS manuelt dersom den automatisk genererte versjonen er ufullstendig. Nødvendig CSS er den minimale formateringen som trengs for å vise den synlige delen av siden din før hele stilarket er lastet inn. Hvis innholdet øverst på skjermen vises uten formatering i et kort øyeblikk ved innlasting når du tester, kan du lime inn reserve-CSS her. De fleste nettsteder trenger ingenting i dette feltet.
Aggressive mobile CSS optimization innebærer en mer offensiv asynkron innlasting av CSS på mobile enheter. Dette kan forbedre PageSpeed-resultatene på mobil, men bør testes grundig. La denne boksen være uavkrysset med mindre du har bekreftet at mobiloppsettet ditt håndterer asynkron innlasting av CSS uten at det oppstår visuelle feil.
JavaScript-innstillinger
Skroll nedover forbi CSS-delen for å finne JavaScript-innstillingene.
Minifiser JavaScript-filer fungerer på samme måte som minifisering av CSS. Dette fjerner mellomrom og kommentarer for å redusere filstørrelsen uten å endre funksjonaliteten. Denne funksjonen er aktivert som standard. La den være på.
Kombiner JavaScript-filer slår sammen nettstedets interne JavaScript-filer, tredjepartsfiler og innebygd JavaScript til færre filer. STWs servere bruker HTTP/2 (og HTTP/3) som håndterer flere samtidige filnedlastinger effektivt, så det gir nesten ingen gevinst å slå sammen filene. Sammenslåing øker også risikoen for konflikter når skript fra ulike utvidelser kombineres. Vi anbefaler å la denne boksen være uavkrysset.
Ekskluderte JavaScript-filer fungerer på samme måte som feltet for CSS-ekskludering. Hvis JavaScript-koden til en bestemt utvidelse slutter å fungere etter minifisering, kan du legge til filstien her for å ekskludere den. Eksempelet angir mønsteret: /wp-content/temaer/mitt-tema/(.*).js.
Last inn JavaScript utsatt ber nettleseren om å laste ned skript i bakgrunnen og kjøre dem først når siden allerede er lastet. Innholdet vises først, og deretter aktiveres de interaktive elementene når skriptene deres kjører. Det er lurt å aktivere denne funksjonen, men sørg for å teste nettstedet ditt etterpå. Skript som styrer utformingen av toppteksten, oppførselen til mobilmenyen eller animasjoner øverst på siden kan forårsake et kortvarig glimt eller et hopp i utformingen når lastingen er utsatt.
Delay JavaScript-kjøring går et skritt lenger. Denne funksjonen forhindrer at JavaScript-filer lastes inn i det hele tatt før leseren handler på siden (skroller eller trykker). Dette gir de raskeste innledende lastetidene, siden nettleseren nesten ikke laster ned noenting før leseren utfører en handling. Ulempen er at skript som er avhengige av at siden lastes inn (analysesporing, chat-moduler som åpnes automatisk, slider-animasjoner) ikke aktiveres før den første interaksjonen. Test nøye hvis du aktiverer denne funksjonen, og vurder å bruke den i kombinasjon med ekskluderingsfeltet for eventuelle skript som må kjøres umiddelbart.
Når du har justert innstillingene, klikker du Lagre endringer nederst på siden.
Anbefalt startkonfigurasjon
| Innstilling | Standard | Anbefaling |
|---|---|---|
| Minify CSS-filer | På | På |
| Optimize CSS delivery | Håndteres av serveren | La være som det er |
| Fallback for Critical CSS | Tomt | La stå tomt med mindre det er nødvendig |
| Aggressive mobile CSS optimization | Av | La være tomt inntil det er testet |
| Minifiser JavaScript-filer | På | På |
| Kombiner JavaScript-filer | Av | Av |
| Last inn JavaScript utsatt | Av | Aktiver og test |
| Delay JavaScript-kjøring | Av | Aktiver bare hvis du er komfortabel med å teste |
Heartbeat API
Med AccelerateWP kan du også styre WordPress’ Heartbeat API, en bakgrunnsfunksjon som sender regelmessige forespørsler fra nettleseren din til serveren. Heartbeat ligger til grunn for funksjoner som automatisk lagring mens du redigerer, varsler i sanntid og låsing av innlegg (som hindrer at to brukere overskriver hverandres arbeid). Som standard utløses den hvert 15. til 60. sekund, avhengig av konteksten.
Gå til AccelerateWP → Heartbeat i sidemenyen.
Kontroller Heartbeat bør være krysset av (det er det som standard). I de tre radene kan du justere frekvensen i ulike deler av WordPress:
- Atferd i backend bestemmer hvor ofte Heartbeat kjører i WordPress-kontrollpanelet. “Reduser aktivitet” endrer intervallet fra én gang i minuttet til én gang hvert annet minutt. Dette halverer antallet bakgrunnsforespørsler, men automatisk lagring og varslinger fungerer fortsatt.
- Atferd i innleggsredigereren styrer tidsintervallet mellom forespørsler mens du redigerer innlegg eller sider. Å redusere her sparer serverressurser og fungerer fint for de fleste arbeidsflyter, selv om automatisk lagring vil skje litt sjeldnere.
- Atferd i frontend styrer bruken av Heartbeat på det synlige nettstedet. De fleste nettsteder bruker ikke Heartbeat i frontend i det hele tatt, med det resultat at leserne genererer unødvendige serverforespørsler. Hvis du ikke benytter utvidelser med sanntidsfunksjoner i frontend, som live chat eller samredigering, kan du deaktivere denne innstillingen.
Standardinnstillingen “Reduser aktivitet” er et trygt utgangspunkt for alle tre.
CDN-integrasjon
AccelerateWP inneholder en CDN-side som lar deg koble nettstedet ditt til et innholdsleveringsnettverk. Et CDN lagrer kopier av de statiske filene dine (CSS, JavaScript, bilder) på servere spredt over hele verden, og leverer dem fra den serveren som ligger nærmest den enkelte brukeren. Dette reduserer lastetiden for brukere som befinner seg langt unna serveren din.
Gå til AccelerateWP → CDN i sidemenyen.
Avkryssingsboksen Aktivere Content Delivery Network tillater CDN-omskriving. Når funksjonen er aktivert omskriver AccelerateWP URL-adressene til dine statiske filer (CSS, JS, bilder) slik at de peker til det CDN-domenet du angir.
CDN CNAME(r) er feltet der du skriver inn CDN-underdomenet du har fått av CDN-leverandøren din, for eksempel cdn.dittdomene.com. I nedtrekksmenyen “reservert for” kan du angi om dette CNAME-navnet skal håndtere alle filer eller bare bestemte filtyper.
I feltet Ekskluder filer fra CDN kan du angi filer som alltid skal hentes fra din egen server. Hvis for eksempel CSS- eller JavaScript-filer fra en gitt utvidelse skaper problemer når de hentes via CDN, kan du ekskludere dem her.
De fleste små WordPress-nettsteder trenger ikke et CDN. Hvis leserne hovedsakelig befinner seg i samme region som serveren din, vil et CDN bare komplisere nettstedet ditt uten å gi noen nevneverdig forbedring i hastigheten. Et CDN lønner seg når du har et geografisk spredt publikum eller mye statisk innhold. Hvis du har registrert deg for en CDN-tjeneste som Cloudflare eller BunnyCDN og har en CNAME-oppføring klar, er det her du kobler den til.
Hvis du bruker delt hosting
Hvis webhotell-abonnementet ditt ikke inkluderer AccelerateWP trenger du en WordPress-utvidelse for å håndtere optimalisering av CSS og JavaScript.
Autoptimize
Autoptimize (gratis) er en utvidelse som er utviklet spesifikt for optimalisering. Etter at du har installert og aktivert den via Utvidelser → Legg til utvidelse, går du til Innstillinger → Autoptimize.
Hovedsiden for innstillinger har tre avkryssingsbokser øverst:
- Optimize JavaScript Code aktiverer minifisering av JavaScript. Kryss av i denne boksen.
- Optimize CSS Code aktiverer minifisering av CSS. Kryss av i denne boksen.
- Optimize HTML Code komprimerer sidens HTML-kode. Plassbesparelsen er liten sammenlignet med CSS og JS, men du kan trygt aktivere denne funksjonen også.
Under de viktigste avkryssingsboksene tilbyr Autoptimize alternativene Aggregate JS Files og Aggregate CSS Files. La begge være uavkrysset. Aggregering (sammenslåing) av filer tilsvarer AccelerateWPs “Kombiner”-alternativ, og de samme risikoene gjelder på HTTP/2-servere.
Under JavaScript-innstillingene ser du etter Also defer eller Defer render-blocking JS. Aktiver denne funksjonen for å utsette kjøringen av JavaScript; det gir deg de samme fordelene som AccelerateWPs alternativ for utsatt lasting.
Klikk Save Changes and Empty Cache etter at du har justert innstillingene.
WP-Optimize
WP-Optimize (gratis, med en premium-versjon) kombinerer caching, bildekomprimering, databaseopprydding og CSS/JS-optimalisering i en og samme utvidelse. Etter at du har installert den går du til WP-Optimize → Minify i sidemenyen.
Slå på minifisering, og konfigurer deretter innstillingene for CSS og JavaScript hver for seg. Aktiver minifisering for begge deler. Med WP-Optimize kan du ekskludere bestemte filer fra minifisering. Dette er nyttig hvis CSS- eller JS-filer fra en bestemt utvidelse slutter å fungere etter at de er behandlet.
WP-Optimize har også en innstilling for utsatt JavaScript under de avanserte innstillingene. Aktiver den og test nettstedet ditt.
Hvis du allerede bruker et cache-utvidelse, for eksempel en av de vi omtalte i veiledningen om caching og nettstedshastighet, bør du sjekke om det kan ha oppstått overlapping. WP Super Cache er utelukkende en utvidelse for sidecaching og inkluderer ikke minifisering, så det er trygt å bruke den sammen med Autoptimize eller WP-Optimize. W3 Total Cache har sin egen Minify-seksjon for CSS, JS og HTML (deaktivert som standard, men du kan ha aktivert disse funksjonene). Hvis du slår på minifisering i W3 Total Cache bør du ikke kjøre en separat minifiserings-utvidelse i tillegg. To verktøy som minifiserer de samme filene forårsaker konflikter.
Test etter endringer
Innstillinger for optimalisering av CSS og JavaScript kan påvirke utseendet eller funksjonaliteten til nettstedet ditt. Mobilmenyen din er kanskje styrt av et utsatt skript, eller en komprimert fil kan slutte å fungere på grunn av et syntaksproblem som optimaliseringsverktøyet ikke klarer å håndtere. Testing er en viktig del av prosessen før du går videre.
Åpne et privat nettleservindu (Ctrl+Shift+N i Chrome, Ctrl+Shift+P i Firefox) og last inn hjemmesiden din. I privat modus lastes siden inn uten filer fra hurtigbufferen eller en pålogget økt, slik at du ser det samme som en ny bruker ville sett. Sjekk at oppsettet ser riktig ut, at menyene åpnes som de skal, og at alle interaktive elementer (slidere, skjemaer, nedtrekksmenyer) fortsatt fungerer.
Gå deretter videre fra hjemmesiden. Åpne et blogginnlegg, kontaktsiden din og en side med skjemaer eller innebygd innhold. Ulike sider henter inn skript fra forskjellige utvidelser, så et problem som ikke vises på hjemmesiden kan dukke opp i kontaktskjemaet eller på en WooCommerce-produktside.
Sjekk også på mobil, enten på telefonen eller i responsivt modus i nettleseren (F12, og bytt deretter enhet i verktøylinjen). Mobilmenyer og berøringsfunksjoner oppfører seg noen ganger annerledes enn på desktop, fordi de er avhengige av JavaScript som nå kan bli utsatt.
Hvis noe ser feil ut, gå tilbake og deaktiver den siste innstillingen du endret. Sjekk at nettstedet fungerer som det skal igjen, og undersøk deretter saken nærmere. Det kan hende du må legge den aktuelle filen til listen over ekskluderte filer og aktivere innstillingen på nytt. Målet er å ende opp med at minifisering og utsatt lasting er aktivert for alt, bortsett fra de spesifikke filene som ikke tåler det.
Konklusjon
Optimalisering av CSS og JavaScript reduserer sidens lastetid ved å redusere filstørrelsene og endre tidspunktet for når nettleseren behandler skript. På STW WordPress-hosting gir AccelerateWP deg kontroll over minifisering, CSS-levering, utsatt JavaScript-innlasting og ekskluderte filer. På delt hosting tilbyr Autoptimize eller WP-Optimize de samme funksjonene via en utvidelse.
Begynn med minifisering (lav risiko, aktivert som standard i AccelerateWP), aktiver deretter utsatt innlasting av JavaScript og test nettstedet ditt. La filsammenslåing være deaktivert. Innstillingene for Heartbeat API og CDN-integrasjon fullfører optimaliseringsalternativene som er tilgjengelige i AccelerateWP.
Den neste veiledningen tar for seg den siste oppgaven i arbeidet med å sikre god ytelse: å holde WordPress-databasen ryddig.
Neste trinn: