Hvordan kombinere ekstern CSS i WordPress

Et nettsted som laster sakte, er ganske skadelig for virksomheten din og merkevaren din generelt, da det kan avskrekke besøkende. Heldigvis er det mange ting du kan gjøre for å forbedre lastehastigheten til nettstedet ditt. Til å begynne med bør nettstedeiere teste nettsidene sine i GTmetrix, Pingdom, eller Google PageSpeed ​​Insights og bruke resultatene de får som forslag til forbedringer. Vi dekket også noen problemer som bremser nettstedet, for eksempel fjerning av gjengivelsesblokkerende ressurser og minifisering av Javascript- og CSS-filer. Nå skal vi se på hvordan du kombinerer ekstern CSS i WordPress og forklare årsakene til at du må gjøre det.

Hvorfor du trenger å kombinere ekstern CSS i WordPress

Før et nettsted fullfører gjengivelsen, er det mange eiendeler som må lastes inn, inkludert bilder, CSS- og JS-filer og videoer. Selv om det å ha et CDN (innholdsleveringsnettverk) for å laste disse eiendelene kan bidra til å øke hastigheten på nettstedet ditt generelt, kan det ha motsatt effekt med CSS-filer. Å ha mange CSS-filer som ligger på CDN kan øke lastetiden betraktelig, siden de må lastes separat. For å overvinne dette lastetidsproblemet, må du kombinere alle dine eksterne CSS-filer til én for å redusere antallet HTTP-forespørsler.

Vær oppmerksom på at disse problemene oppstår for brukere hvis hosting kun støtter HTTP/1.1-protokollen. De som bruker HTTP/2-protokollen opplever ikke det samme problemet, siden HTTP/2 tillater lasting av flere CSS-filer parallelt. Når det er sagt, la oss forklare hvordan ekstern CSS kan kombineres.

Hvordan kombinere ekstern CSS i WordPress

Den enkleste måten å kombinere ekstern CSS i WordPress er å bruke en WordPress-plugin. De mest nyttige er cache-plugins og/eller plugins for å forbedre nettstedets ytelse. Et eksempel som faller inn i begge kategoriene og som kan kombinere, dvs. samle, CSS-filer er Autoptimize-plugin.

Autooptimaliser

Autooptimaliser er en flott plugin for å optimalisere nettstedet ditt generelt. Det er ekstremt nyttig for å samle og forminske JS- og CSS-filer, utsette CSS eller synkronisere ikke-aggregert JS, optimalisere bilder og Google-fonter og mye mer. Siden aggregering ganske enkelt er et annet begrep for å kombinere, er denne plugin-en en perfekt løsning for å kombinere ekstern CSS.

For å kombinere ekstern CSS ved hjelp av Autoptimize, må du først installere og aktivere plugin. Deretter, naviger til Innstillinger > Autooptimaliser og bla ned til CSS-alternativer underseksjon. Ganske enkelt huk av i boksen ved siden av Optimalisere CSS-koden? alternativ. Ved å gjøre det, vil et helt undersett av alternativer bli tilgjengelig for deg. Av disse alternativene vil de to første – Samle CSS-filer og Samle inline CSS – bli sjekket.

Hold disse alternativene merket, og fortsett for å lagre endringene. Rull ned under Diverse alternativer og trykk Lagre endringer og tøm buffer knapp. Og plugin-en vil gjøre resten. Når den er ferdig, vil CSS-filene dine bli kombinert og lastetiden på HTTP/1.1 forbedres.

Siste tanker

Å ha et stort antall CSS-filer på CDN kan ha en negativ innvirkning på et nettsteds lastetid. Heldigvis er det veldig enkelt å løse dette problemet – du trenger bare å kombinere din eksterne CSS. Og hvis du følger anbefalingen vår og installerer Autoptimize-plugin, vil løsningen være et øyeblikks arbeid. Sørg for å justere alternativene vi nevnte og fortsett for å nyte de nye, raskere, lastetidene.