Share
I den första delen av denna serie granskade vi caching och databasoptimering. I den här andra delen talar vi om komprimering, minifiering och användning av en CDN.
Låt oss börja!
Det är enkelt matte: Om din sida är 1 MB kan en besökare med en 10Mbit-anslutning ladda den på 800 millisekunder. Så om du kan minska din sidstorlek till 600KB så tar det bara en halv sekund för besökaren att ladda den.
Lyckligtvis finns det många sätt att komprimera och minska dina sidors CSS, JS och HTML-utdata. Låt oss se hur:
HTTP-komprimeringsformat som gzip och deflate används av nästan varje serverplattform (inklusive Apache och Microsoft IIS) och accepteras av nästan alla webbläsare, så HTTP-komprimering kommer sannolikt att köras på varje enhet och varje server. (Din server kan till och med aktivera det som standard. För att kontrollera det, sök efter "http-komprimeringskontroll", klicka på ett av resultaten och skriv in din webbadress.)
Så hur aktiverar vi HTTP-komprimering? Det finns flera sätt att göra det, men jag tror att dessa två kan hjälpa alla:
1. Aktivera komprimering via .htaccess: Om din server inte aktiverade HTTP-komprimering som standard kan du aktivera den genom att klistra in följande kod i din .htaccess fil (taget från HTML5 Boilerplate):
# Kraftkomprimering för manglade rubriker. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Markera vissa resurser som komprimerats för att: # 1) förhindra att Apache återkomprimerar dem # 2) se till att de serveras med rätt # HTTP-replikhuvud SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader lägger till Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding AddEncoding gzip svgz # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Komprimera all produktion märkt med någon av följande typer av medier . # VIKTIGT: För Apache-versioner under 2.3.7 behöver du inte aktivera # 'mod_filter' och kan ta bort ''&' '# linjer som' AddOutputFilterByType 'finns fortfarande i kärndirektiven.AddOutputFilterByType DEFLATE "applikation / atom + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "applikation / manifest + json" \ "application / rss + xml" \ "application / vnd .geo + json "\" application / vnd.ms-fontobject "\" application / x-font-ttf "\" applikation / x-web-app-manifest + json "\" application / xhtml + xml " / xml "\" font / opentype "\" bild / svg + xml "\" bild / x-ikon "\" text / cache-manifest "\" text / css "\" text / html "\" text / slätt "\" text / vtt "\" text / x-komponent "\" text / xml "
2. Aktivera HTTP-komprimering med plugins: Om du inte vet hur du redigerar din .htaccess fil (eller helt enkelt inte vill göra det) kan du aktivera HTTP-komprimering med de två populära cache-plugins: WP Super Cache och W3 Total Cache. Båda erbjuder möjligheten att aktivera HTTP-komprimering via sina inställningssidor.
Minifiering av tillgångar är nästan lika viktigt som att komprimera dem. I PHP-filer är whitespace inte riktigt viktigt eftersom de analyseras och sammanställs. men whitespace i HTML, CSS och JS-filer ökar filstorleken, vilket innebär att besökare kommer ladda ner större filer. För att undvika detta kan du radera alla onödiga tecken i dina HTML-, CSS- och JS-filer.
Förutom att minska dem kan du också kombinera flera CSS- och JS-filer till en CSS- och JS-fil. Om du gör det kommer det att minska antalet DNS-sökning och webbläsare laddar inte ner varje CSS och JS-fil separat.
Minifiera och kombinera dina tillgångar manuellt anses vara dålig praxis och kan i vissa fall vara omöjligt. Lyckligtvis är det dock lätt att uppnå det automatiskt med plugins. Om du använder W3 Total Cache-plugin kan du aktivera minifiering och kombinering av CSS och JavaScript-filer via pluginens inställningssida. Om du inte använder det kan du installera en separat plugin-min favorit är Autoptimize. Autoptimize gör jobbet perfekt och det har några väldigt användbara alternativ som du kan hantera. Jag använder den här med WP Super Cache och jag är väldigt nöjd med resultaten.
Om din blogg är mer visuell än genomsnittet, om dina sidor är fyllda med bilder eller om du är en vanlig bloggare och vill att dina bilder ska laddas snabbare, kan du (och borde) använda innehållsleveransnätverk (som vanligtvis kallas CDN).
Logiken bakom innehållsleveransnätverk är att betjäna innehåll mer effektivt genom att använda "kantservrar" runt om i världen. Dessa servrar kan innehålla ditt nedladdningsbara innehåll (som bilder, CSS-filer och liknande) och när en användare besöker din sida, serverar närmaste kantserver till besökaren filerna. Med låga priser på bandbredd (även gratis, ibland) och flaskande snabba servrar, kommer leveransen av ditt innehåll att bli snabbare än någonsin.
Det finns mer än några plugins där ute som ger synkronisering av dina tillgångar med olika CDN, men jag ska bara nämna några:
I den här andra delen av serien gick vi igenom komprimering och minifiering av tillgångar och använder en CDN i WordPress. I nästa (och sista) artikeln ser vi vikten av bildoptimering, och vi kommer att sluta med några tankar om att använda WordPress med sund förnuft.
Vad tycker du om att påskynda WordPress? Dela dina tankar nedan i kommentarfältet. Och om du gillade artikeln, glöm inte att dela den.
Vi ses i nästa del!
Accentsconagua