Share
I det første innlegget i denne serien tok vi en titt på noen ting vi kan gjøre for å holde vår WordPress-installasjon sunn. Men det er ikke alt vi kan gjøre.
I dette innlegget skal vi dekke hva du skal gjøre med dine eiendeler som stilark, JavaScript-filer, bilder og mer.
Mindre er mer. Det er ganske mye meldingen jeg prøver å legge frem med hele denne serien. Til dette formål har jeg snakket om hva jeg skal gjøre med over-done HTML i den, referert til et par ressurser som vil hjelpe deg med å komme i gang med å skrive ren temakode, samt finne de riktige pluginene.
Nå er det på tide å fokusere på våre eiendeler: Stylesheets, JavaScripts og bilder.
Vi er alle vant til å skrive CSS, ikke sant? Selv nybegynnere blant oss har rørt en linje med CSS her eller der. Har noen gang brukt a display: none et sted? Der du går, du brukte en stilregel.
I sin grusomme form, er jeg sikker på at vi alle har brukt dem. De mer erfarne menneskene vil vite at det er en god ide å holde stilene dine der de tilhører: I stilarkene dine. Dette handler primært om vedlikehold. Hvis du har inline-stiler over maler du vil gå deg villig til å prøve å finne det rette stedet for å justere noe, og når du justerer den ene tingen, må du likevel finne at fem andre steder som har samme inline-stil som brukes på dem.
Sette stiler i stilarkarkfiler har en annen fordel: Du kan skrive mindre for å gjøre det samme, ved hjelp av generiske stilregler i stedet for fokuserte, men du kan til og med ta det et skritt videre og bruke en forprosessor.
Stylus, LESS og Sass er alle CSS preprosessorer. Du kan bruke dem til å skrive mindre kode og ende opp med et renere sluttresultat. Les det som: Mindre arbeid, mindre kode, lettere å vedlikeholde!
Mens Stylus er unntaket her, har både LESS og SASS WordPress plugins tilgjengelig. Hvis du kan unngå å bruke dem, gjør du det. Det finnes måter å generere et stilark fra en .mindre og .sass filen bare én gang, uten å bruke disse pluginene.
Uten å bli for spesifikk, vil disse forprosessorer tillate deg å skrive mye mindre kode for å ende opp med det samme sluttresultatet. I mange tilfeller vil de til og med kombinere stiler sammen, slik at stilarkene dine blir renere og enklere å vedlikeholde. En rask opplæring om LESS og en på Sass har eksisterende opplæringsprogrammer her på Tuts+.
Hva er bedre, dette er veldig mye basert på personlig preferanse. Alle tre prosessorene vokser og finner veien. Du kan finne en sammenligning på de tre tilgjengelige prosessorene her som vil utdype mer omfattende om hva hver av sine styrker er.
JavaScript har blitt en akseptert del av webutviklingen. For noen år siden antok vi fortsatt at det var normalt at våre besøkende hadde JavaScript deaktivert, men det er nå unntaket, ikke regelen.
Personlig foretrekker jeg fortsatt å bygge mine nettsteder uten det, og deretter legge til skriptene som en forbedring. Dette har fordelen av å la meg holde skriptene nede på deres bare minimum fordi nettstedet allerede fungerer rett utenfor boksen uten det.
Det eneste virkelige alternativet til å skrive mindre JavaScript er å gjøre akkurat det. Skriv mindre; men et godt tips her er å bruke jQuery-biblioteket som kommer pakket med WordPress, da det er designet spesielt for å la deg skrive mindre for å oppnå samme resultat, men fortsatt forbli rask og enkel å bruke.
Husk det første innlegget i denne serien? Jeg nevnte at nettsteder de siste tre årene hadde en absurd økning på 235% i størrelse. Galt, er det ikke? Her er et annet faktum: En stor del av den økningen kommer i form av bilder. Jeg tviler på at noen er overrasket over dette fordi bruk av store bilder har blitt noe av en design trend, men likevel bør vi strebe etter å gjøre det bedre.
Men hvordan?
Pass på at hvis du bruker WordPress til å angi de riktige bildestørrelsene for bildene dine. Ingen mening når du laster et 500x500 bilde hvis du bare bruker en 100x100-versjon i designet. Det neste alternativet er å bruke en tjeneste som smush.it eller kraken.io. Begge har WordPress-plugins tilgjengelige, og begge gjør omtrent det samme: De riper ut ting i bildene du ikke trenger eller vil ha, optimaliserer dem og returnerer minste mulig fil de kan lage fra bildet uten å miste kvalitet. Smush.it er en gratis tjeneste, hvor Kraken har en gratis løsning, samt en betalt løsning som optimaliserer bildene dine i fly.
Nå kan du se at jeg er alt for mindre. Mindre kode, mindre bilder, mindre alt. Slutten av veien skjønt: Rask som min minimalistiske systemer kan være, jeg vil fortsatt ha den ekstra milen av fantastisk. Jeg sørger for at koden min er så vedlikeholdbar som mulig, min stilark så liten som mulig, og mine skript kort. Alt dette er imidlertid først og fremst forberedelse. Tross alt vil jeg fortsatt ha sluttresultatene minifisert. Ved å bruke forprosessoren for stilarkene, kan jeg allerede vise ut en minifisert utgave. For skript finnes det lignende løsninger.
Her er det viktig å sørge for at skript og stilark utføres ved hjelp av wp_enqueue_script og wp_enqueue_style funksjoner. Ikke kast dem bare i hode av malen din, men bruk function.php å kjenne dem og la wp_head funksjon gjør den faktiske utgangen.
Hvorfor er dette viktig? Fordi hvis du skikkelig skiller dine skript og stilark, kan de forskjellige caching- og minifiseringspluggene som er tilgjengelige, ordentlig kombinere dem til ett enkelt stilark og skript.
Caching? Ja, caching. Ved siden av sammenslåing stilark og skript gir disse pluginene et system for å cache utdataene fra databasen eller til og med hele siden som får utdata. Begge vil dramatisk redusere hvor mye tid et nettsted trenger å laste. Det er utenfor omfanget av denne serien å utdype seg mye på tilgjengelige caching-plugins og deres funksjoner, Adam Burucs skrev en artikkel som sammenlignet de to største caching-pluginene som er et godt sted å starte hvis du leter etter noe informasjon om de to.
Eksterne ressurser er litt av en interessant del av det hele. På den ene siden vil en ekstern leverandør avlaste trafikken fra din egen server. Vanligvis blir det raskere på grunn av nettleserbegrensninger på antall forespørsler som kan sendes til en server. Men det er en ulempe. Du kan ikke kontrollere hva som kommer ned fra din eksterne vert, og du må både stole på at dataene forblir de samme, så vel som at verten forblir tilgjengelig. I noen tilfeller kan det være en bedre ide å beholde ressursene dine på ditt eget nettsted.
For å oppsummere: Hold det lert, sørg for at stilarkene og skriptene dine er så små som du kan få dem, og reduser dem enda lenger. Last opp bilder i størrelsen du trenger dem og dra dem gjennom en optimaliserer som smush.it eller kraken.io. Bruk et caching-plugin som et sluttendepunkt for produksjonen din etter at du har minimert alle elementene før du legger inn caching.
Det er enda en avdrag igjen i denne serien, der vi vil dekke flere referanser om emnene vi har diskutert, og forhåpentligvis gi noen ekstra nyttige innsikter.
Accentsconagua