Share
I den første delen av denne serien har vi gjennomgått caching og databaseoptimalisering. I denne andre delen snakker vi om komprimering, minifisering og bruk av CDN.
La oss begynne!
Det er enkelt matte: Hvis sidens størrelse er 1MB, kan en besøkende med en 10Mbit-tilkobling laste den på 800 millisekunder. Så, hvis du kan redusere sidestørrelsen til, si 600KB, vil det ta bare et halvt sekund for den besøkende å laste den.
Heldigvis er det mange måter å komprimere og redusere sidens CSS, JS og HTML-utgang. La oss se hvordan:
HTTP-komprimeringsformater som gzip og deflate brukes av nesten hver serverplattform (inkludert Apache og Microsoft IIS) og aksepteres av nesten alle nettlesere, slik at HTTP-komprimering mest sannsynlig vil kjøre på hver enhet og hver server. (Serveren din kan til og med aktivere den som standard. For å sjekke det, søk etter "http-komprimeringskontroll", klikk et av resultatene og skriv inn webadressen din.)
Så hvordan aktiverer vi HTTP-komprimering? Det er flere måter å gjøre det på, men jeg tror disse to kan hjelpe alle:
1. Aktiver komprimering via .htaccess: Hvis serveren din ikke aktiverte HTTP-komprimering som standard, kan du aktivere den ved å lime inn følgende kode i din .htaccess fil (hentet fra HTML5 Boilerplate):
# Kraftkomprimering for manglede overskrifter. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Mark visse ressurser som blitt komprimert for å: # 1) hindre Apache fra å komprimere dem # 2) sørge for at de blir servert med riktig HTTP-responsheader SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader legger til Godta-Koding "gzip, deflate" env = HAVE_Accept-Encoding AddEncoding gzip svgz # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Komprimer alle utdataene merket med en av følgende medietyper . # VIKTIG: For Apache-versjoner under 2.3.7 trenger du ikke å aktivere # 'mod_filter' og kan fjerne ''&' '# linjer som' AddOutputFilterByType 'er fortsatt i kjernedirektiver.AddOutputFilterByType DEFLATE "applikasjon / atom + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "applikasjon / manifest + json" \ "application / rss + xml" \ "application / vnd .geo + json "\" applikasjon / vnd.ms-fontobject "\" application / x-font-ttf "\" applikasjon / x-web-app-manifest + json "\" application / xhtml + xml "\" / xml "\" font / opentype "\" image / svg + xml "\" bilde / x-ikon "\" tekst / cache-manifest "\" text / css "\" tekst / html "\" tekst / vanlig "\" tekst / vtt "\" tekst / x-komponent "\" text / xml "
2. Aktiver HTTP-komprimering med programtillegg: Hvis du ikke vet hvordan du redigerer .htaccess fil (eller bare ikke vil gjøre det), kan du aktivere HTTP-komprimering ved hjelp av de to populære caching-pluginene: WP Super Cache og W3 Total Cache. Begge tilbyr muligheten til å aktivere HTTP-komprimering via deres innstillingssider.
Minifiserende eiendeler er nesten like viktig som å komprimere dem. I PHP-filer er hvite rom ikke veldig viktig siden de blir analysert og sammensatt; men whitespace i HTML, CSS og JS filer øker filstørrelsen, noe som betyr at besøkende vil laste ned større filer. For å unngå dette kan du slette alle unødvendige tegn i HTML-, CSS- og JS-filene.
I tillegg til å redusere dem, kan du også kombinere flere CSS- og JS-filer til en CSS- og JS-fil. Å gjøre dette vil redusere antall DNS-oppslag, og nettlesere vil ikke laste ned hver CSS og JS-fil separat.
Minifisere og kombinere dine eiendeler manuelt regnes som dårlig praksis og kan være umulig i noen tilfeller. Heldigvis er det imidlertid veldig enkelt å oppnå det automatisk med plugins. Hvis du bruker W3 Total Cache-plugin, kan du aktivere å bekrefte og kombinere CSS og JavaScript-filer via pluginens Innstillinger-side. Hvis du ikke bruker det, kan du installere et eget plugin-min favoritt er Autoptimize. Autoptimize gjør jobben perfekt, og den har noen veldig nyttige alternativer som du kan klare. Jeg bruker denne med WP Super Cache, og jeg er veldig fornøyd med resultatene.
Hvis bloggen din er mer visuell enn gjennomsnittet, hvis sidene dine er fylt med bilder, eller om du er en vanlig blogger og vil at bildene dine skal lastes raskere, kan du (og bør) bruke innholdsleveringsnettverk (som ofte kalles CDN-er).
Logikken bak innholdsleveringsnettverk er å betjene innhold mer effektivt ved å bruke "kantservere" over hele verden. Disse serverne kan inneholde nedlastbart innhold (som bilder, CSS-filer og lignende) og når en bruker besøker siden din, serverer nærmeste kantserver til den besøkende filene. Med lave priser på båndbredde (selv gratis, noen ganger) og lynrask raske servere, vil levering av innholdet bli raskere enn noensinne.
Det er mer enn noen få plugins der ute som gir synkronisering av dine eiendeler med forskjellige CDN, men jeg skal bare nevne noen:
I denne andre delen av serien gikk vi gjennom komprimering og reduksjon av eiendeler, og ved hjelp av en CDN i WordPress. I den neste (og siste) artikkelen ser vi betydningen av bildeoptimalisering, og vi vil lukke opp med noen tanker om å bruke WordPress med sunn fornuft.
Hva synes du om å øke hastigheten på WordPress? Del dine tanker nedenfor i kommentarfeltet. Og hvis du likte artikkelen, ikke glem å dele den.
Se deg i neste del!
Accentsconagua