Share
In het eerste deel van deze serie hebben we caching en database-optimalisatie besproken. In dit tweede deel zullen we het hebben over compressie, verkleining en het gebruik van een CDN.
Laten we beginnen!
Het is een eenvoudige berekening: als de grootte van je pagina 1 MB is, kan een bezoeker met een 10Mbit-verbinding het in 800 milliseconden laden. Dus, als u uw paginagrootte kunt reduceren tot bijvoorbeeld 600KB, zou het voor de bezoeker slechts een halve seconde duren om het te laden.
Gelukkig zijn er veel manieren om de CSS-, JS- en HTML-uitvoer van uw pagina's te comprimeren en te verkleinen. Laten we eens kijken hoe:
HTTP-compressie-indelingen zoals gzip en deflate worden door bijna elk serverplatform (inclusief Apache en Microsoft IIS) gebruikt en door vrijwel elke browser geaccepteerd, dus HTTP-compressie is het meest waarschijnlijk op elk apparaat en op elke server. (Uw server kan het zelfs standaard inschakelen. Om dit te controleren, zoekt u naar "http-compressiecontrole", klikt u op een van de resultaten en typt u uw websiteadres in.)
Dus hoe schakelen we HTTP-compressie in? Er zijn verschillende manieren om dit te doen, maar ik denk dat deze twee iedereen kunnen helpen:
1. Schakel compressie in via .htaccess: Als uw server standaard geen HTTP-compressie heeft ingeschakeld, kunt u dit inschakelen door de volgende code in uw te plakken .htaccess bestand (overgenomen van de HTML5 Boilerplate):
# Forceer compressie voor verminkte headers. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html # - - - - - - - - - - - - - - - - - - - - - Markeer bepaalde bronnen als gecomprimeerd om: # # 1) voorkomen dat Apache hen opnieuw comprimeert # 2) zorg ervoor dat ze worden aangeboden met de juiste # 'Content-Encoding' HTTP response header SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding AddEncoding gzip svgz # - - - - - - - - - - - - - - - - - - - - - Comprimeer alle uitvoer gelabeld met een van de volgende mediatypes . # BELANGRIJK: voor Apache-versies onder 2.3.7 hoeft u # 'mod_filter' niet in te schakelen en kunt u de ''&' '# regels als' AddOutputFilterByType 'staat nog steeds in de kernrichtlijnen.AddOutputFilterByType DEFLATE "application / atom + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "application / manifest + json" \ "application / rss + xml" \ "application / vnd .geo + json "\" toepassing / vnd.ms-fontobject "\" toepassing / x-font-ttf "\" toepassing / x-web-app-manifest + json "\" toepassing / xhtml + xml "\" applicatie / xml "\" font / openingsype "\" image / svg + xml "\" afbeelding / x-pictogram "\" tekst / cache-manifest "\" text / css "\" text / html "\" text / plain "\" text / vtt "\" text / x-component "\" text / xml "
2. Schakel HTTP-compressie met plug-ins in: Als je niet weet hoe je je kunt bewerken .htaccess bestand (of gewoon niet willen), kunt u HTTP-compressie inschakelen met behulp van de twee populaire cacheplug-ins: WP Super Cache en W3 Total Cache. Beide bieden de mogelijkheid om HTTP-compressie in te schakelen via hun instellingenpagina's.
Het verkleinen van assets is bijna net zo belangrijk als het comprimeren ervan. In PHP-bestanden is witruimte niet echt belangrijk omdat ze worden geparseerd en gecompileerd; maar witruimte in HTML-, CSS- en JS-bestanden verhoogt de bestandsgrootte, wat betekent dat bezoekers grotere bestanden zullen downloaden. Om dit te voorkomen, kunt u alle onnodige tekens in uw HTML-, CSS- en JS-bestanden verwijderen.
Naast het verkleinen ervan, kunt u ook meerdere CSS- en JS-bestanden combineren in één CSS- en JS-bestand. Als u dit doet, wordt het aantal DNS-zoekopdrachten verkleind en zullen browsers elk CSS- en JS-bestand niet afzonderlijk downloaden.
Je bezittingen verkleinen en combineren handmatig wordt beschouwd als slechte praktijk en kan in sommige gevallen onmogelijk zijn. Gelukkig is het echter heel eenvoudig om het automatisch met plug-ins te bereiken. Als u de W3 Total Cache-plug-in gebruikt, kunt u het verkleinen en combineren van uw CSS- en JavaScript-bestanden inschakelen via de pagina Instellingen van de plug-in. Als u het niet gebruikt, kunt u een afzonderlijke plug-in installeren - mijn favoriete is Autoptimize. Autoptimize doet het werk perfect en heeft enkele zeer nuttige opties die u kunt beheren. Ik gebruik deze met WP Super Cache en ik ben erg blij met de resultaten.
Als je blog meer is zichtbaar dan gemiddeld, als uw pagina's vol staan met afbeeldingen, of als u een gewone blogger bent en u wilt dat uw afbeeldingen sneller worden geladen, kunt u netwerken voor het leveren van inhoud (die gewoonlijk CDN's worden genoemd) gebruiken (en zouden moeten)..
De logica achter netwerken voor het leveren van inhoud is om inhoud efficiënter te gebruiken door 'Edge-servers' over de hele wereld te gebruiken. Deze servers kunnen uw downloadbare inhoud bevatten (zoals afbeeldingen, CSS-bestanden en dergelijke) en wanneer een gebruiker uw pagina bezoekt, worden de bestanden door de dichtstbijzijnde server aan de bezoeker bediend. Met lage prijzen voor bandbreedte (zelfs gratis, soms) en razendsnelle servers, zal de levering van uw inhoud sneller dan ooit zijn.
Er zijn meer dan een paar plug-ins die zorgen voor de synchronisatie van uw assets met verschillende CDN's, maar ik noem er maar een paar:
In dit tweede deel van de serie hebben we compressie en verkleining van activa doorgenomen en een CDN in WordPress gebruikt. In het volgende (en laatste) artikel zullen we het belang van beeldoptimalisatie zien, en we zullen enkele opmerkingen maken over het gebruik van WordPress met gezond verstand.
Wat denk je over het versnellen van WordPress? Deel uw mening hieronder in de commentarensectie. En als je het artikel leuk vond, vergeet dan niet om het te delen.
Zie je in het volgende deel!
Accentsconagua