Share
I det första inlägget i denna serie tittade vi på några saker som vi kan göra för att hålla vår WordPress-installation frisk. Men det är inte allt vi kan göra.
I det här inlägget kommer vi att täcka vad du ska göra med dina tillgångar som stylesheets, JavaScript-filer, bilder och mer.
Mindre är mer. Det är ganska mycket det budskap jag försöker lägga fram med hela serien. För det ändamålet har jag pratat om vad jag ska göra med överdriven HTML i den, hänvisade till ett par resurser som hjälper dig att komma igång med att skriva ren temakod, samt hitta rätt plugin.
Nu är det dags att fokusera på våra tillgångar: Stylesheets, JavaScripts och bilder.
Vi är vana vid att skriva CSS, eller hur? Även nybörjare bland oss har berört en rad CSS här eller där. Har någonsin använt a display: none någonstans? Där gick du, du tillämpade en stilregel.
I sin oförskämdaste form är jag säker på att vi alla har använt dem. De mer erfarna personerna kommer att veta att det är en bra idé att behålla dina stilar där de tillhör: i dina stylesheets. Detta handlar främst om underhållsförmåga. Om du har inline-stilar över dina mallar kommer du att gå vilse för att försöka hitta rätt ställe för att justera någonting, och när du justerar den ena saken måste du fortfarande hitta fem andra ställen som har samma inline-stil som tillämpas på dem.
Att lägga stilar i stylesheet-filer har en annan fördel: Du kan skriva mindre för att göra detsamma, med hjälp av generiska stilregler istället för fokuserade, men du kan till och med ta det ett steg längre och använda en förbehandlare.
Stylus, LESS och Sass är alla CSS-förbehandlare. Du kan använda dem för att skriva mindre kod och sluta med ett renare slutresultat. Läs det som: Mindre arbete, mindre kod, lättare att underhålla!
Medan Stylus är undantaget här, har både LESS och Sass WordPress plugins tillgängliga. Om du kan undvika att använda dem, gör så. Det finns sätt att skapa ett stylesheet från en .mindre och .sass filen bara en gång, utan att använda dessa plugins.
Utan att bli för specifika kan dessa förbehandlare tillåta dig att skriva mycket mindre kod för att sluta med samma slutresultat. I många fall kommer de även att kombinera stilar tillsammans, vilket gör dina stylesheets renare och enklare att underhålla. En snabb handledning på LESS och en på Sass har existerande handledning här på Tuts+.
När det gäller vilket som är bättre är det mycket baserat på personliga preferenser. Alla tre processorerna växer och hittar sin väg. Du kan hitta en jämförelse på de tre tillgängliga processorerna här, som kommer att fördjupa sig mer i vad varje styrka är.
JavaScript har blivit en accepterad del av webbutveckling. För några år sedan accepterade vi fortfarande att det var normalt för våra besökare att ha JavaScript inaktiverat, men det är nu undantaget, inte regeln.
Personligen föredrar jag fortfarande att bygga mina webbplatser utan den och sedan lägga till skript som en förbättring. Detta har fördelen att jag ska behålla skripten till ett minimalt minimum eftersom webbplatsen redan fungerar rätt utan att det inte är.
Det enda riktiga alternativet att skriva mindre JavaScript är att göra exakt det. Skriv mindre; men ett bra tips här är att använda jQuery-biblioteket som kommer förpackat med WordPress, eftersom det är utformat speciellt för att låta dig skriva mindre för att uppnå samma resultat men ändå vara snabb och enkel att använda.
Kom ihåg det första inlägget i den här serien? Jag nämnde att webbplatser under de senaste tre åren hade en absurd ökning med 235% i storlek. Galen är det inte? Här är ett annat faktum: en stor del av den ökningen kommer i form av bilder. Jag tvivlar på att någon är förvånad över det här eftersom att använda stora bilder har blivit något av en designtendens, men ändå bör vi sträva efter att göra det bättre.
Men hur?
Se till att om du använder WordPress för att ställa in rätt bildstorlek för dina bilder. Ingen mening när du laddar en 500x500 bild om du bara använder en 100x100-version i din design. Nästa alternativ är att använda en tjänst som smush.it eller kraken.io. Båda har WordPress-plugins tillgängliga och båda gör ungefär samma: De ritar ut sakerna i bilderna som du inte behöver eller vill ha, optimera dem och returnera den minsta möjliga filen som de kan göra från din bild utan att förlora någon kvalitet. Smush.it är en gratis tjänst där Kraken har en fri lösning samt en betald lösning som optimerar dina bilder på flyg.
Nu kan du se att jag är allt för mindre. Mindre kod, mindre bilder, mindre allt. Slut på vägen men: Snabbt som mina minimalistiska system kan vara, jag vill fortfarande ha den extra milen av fantastisk. Jag ska se till att min kod är så underhållbar som möjligt, mina formatblanketter är så små som möjligt och mina skript är korta. Allt detta är dock främst förberedelse. När allt kommer omkring har jag fortfarande slutresultatet minifierat. Genom att använda förprocessorn för min stylesheets kan jag redan utgå från en minifierad upplaga. För skript finns liknande lösningar tillgängliga.
Här är det viktigt att se till att dina skript och stilark utmatas med hjälp av wp_enqueue_script och wp_enqueue_style funktioner. Släng inte bara dem i huvud av din mall, men använd function.php att klandra dem och låt wp_head funktion gör den faktiska utgången.
Varför är detta viktigt? För att om du skämmer in dina skript och stylesheets ordentligt kan de olika cache- och minifieringsprogrammen som finns tillgängliga kombinera dem ordentligt till ett enda stilark och skript.
Caching? Ja, caching. Bredvid sammanslagning av stylesheets och scripts tillhandahåller dessa plugins ett system för att cache utmatningen från databasen eller till och med hela sidan som får produktionen. Båda kommer dramatiskt minska mängden tid en webbplats behöver ladda. Det ligger utanför omfattningen av denna serie för att utarbeta omfattande information om de tillgängliga cachepluggarna och deras egenskaper. Adam Burucs skrev en artikel som jämförde de två största cachepluggarna som är ett bra ställe att börja om du letar efter lite information om de två.
Externa resurser är lite av en intressant del av allt. Å ena sidan kommer en extern leverantör att avlasta trafiken från din egen server. Vanligtvis blir det snabbare på grund av webbläsarbegränsningar på antalet begäranden som kan skickas till en server. Men det finns en nackdel. Du kan inte kontrollera vad som kommer från din externa värd och du måste båda lita på att uppgifterna kommer att förbli desamma som att värden förblir tillgänglig. I vissa fall kan det vara en bättre idé att behålla dina resurser på din egen webbplats.
För att sammanfatta: håll det lutet, se till att dina stylesheets och scripts är så små som du kan få dem, och minska dem ytterligare. Ladda upp bilder i den storlek du behöver dem och dra dem genom en optimeringsfunktion som smush.it eller kraken.io. Använd ett cacheplugin som en slutlig slutpunkt för din produktion när du har minimerat alla element innan du lägger in någon cachning.
Det finns ytterligare en avdelning kvar i denna serie där vi kommer att täcka ytterligare referenser om de ämnen vi diskuterat och förhoppningsvis ge några ytterligare användbara insikter.
Accentsconagua