Share
Nel primo post di questa serie, abbiamo dato un'occhiata ad alcune cose che possiamo fare per mantenere la nostra installazione di WordPress in buona salute. Ma non è tutto ciò che possiamo fare.
In questo post, illustreremo cosa fare con i tuoi asset come fogli di stile, file JavaScript, immagini e altro.
Meno è meglio. Questo è praticamente il messaggio che sto cercando di proporre con questa intera serie. A tal fine, ho parlato di cosa fare con l'HTML sovrascritto in, un paio di risorse di riferimento che ti aiuteranno a iniziare a scrivere codice tema pulito, oltre a trovare i plugin giusti.
Ora è il momento di concentrarsi sulle nostre risorse: fogli di stile, JavaScript e immagini.
Siamo tutti abituati a scrivere CSS, giusto? Anche i principianti tra noi hanno toccato una linea di CSS qui o là. Mai usato a display: none da qualche parte? Ecco, hai applicato una regola di stile.
Nella sua forma più cruda, sono sicuro che li abbiamo tutti usati. Le persone più esperte sapranno che è una buona idea mantenere i tuoi stili a cui appartengono: nei tuoi fogli di stile. Questo è principalmente una questione di manutenibilità. Se hai stili in linea su tutti i tuoi modelli ti perderai cercando di trovare il posto giusto per aggiustare qualcosa, e quando modifichi quell'unica cosa, devi comunque trovare altri cinque posti che hanno lo stesso stile in linea applicato a loro.
Mettere gli stili nei file di fogli di stile ha un altro vantaggio: puoi scrivere meno per fare lo stesso, usando regole di stile generiche invece di quelle focalizzate, ma potresti anche fare un ulteriore passo avanti e usare un pre-processore.
Stylus, LESS e Sass sono tutti pre-processori CSS. Puoi usarli per scrivere meno codice e finire con un risultato finale più pulito. Leggi come: meno lavoro, meno codice, più facile da mantenere!
Mentre Stylus è l'eccezione qui, sia LESS che Sass hanno plugin WordPress disponibili. Se puoi evitare di usarli, fallo. Ci sono modi per generare un foglio di stile da a .Di meno e .insolenza file solo una volta, senza usare quei plugin.
Senza essere troppo specifici, questi pre-processori ti permetteranno di scrivere molto meno codice per finire con lo stesso risultato finale. In molti casi combinano anche gli stili, rendendo i tuoi fogli di stile più puliti e più facili da mantenere. Un breve tutorial su LESS e uno su Sass hanno tutorial già presenti su Tuts+.
Per quanto riguarda ciò che è meglio, questo è molto basato sulle preferenze personali. Tutti e tre i processori stanno crescendo e trovando la loro strada. È possibile trovare un confronto sui tre processori disponibili qui che elaboreranno in modo più approfondito su ciascuno dei loro punti di forza.
JavaScript è diventato una parte accettata dello sviluppo web. Alcuni anni fa, accettavamo ancora che per i nostri visitatori fosse normale disabilitare JavaScript, ma ora è l'eccezione, non la regola.
Personalmente, preferisco ancora costruire i miei siti senza di essi e quindi aggiungere gli script come un miglioramento. Questo ha il vantaggio di farmi mantenere gli script al minimo, perché il sito funziona già subito senza il bisogno.
L'unica vera opzione per scrivere meno JavaScript è fare esattamente questo. Scrivi meno; tuttavia, un buon consiglio qui è quello di utilizzare la libreria jQuery che viene fornita con WordPress poiché è progettata specificamente per consentire di scrivere meno per ottenere lo stesso risultato, ma rimanere sempre veloce e facile da usare.
Ricorda il primo post di questa serie? Ho detto che negli ultimi tre anni i siti Web hanno avuto un aumento assurdo del 235% in termini di dimensioni. Pazzo, non è vero? Ecco un altro fatto: gran parte di questo aumento si presenta sotto forma di immagini. Dubito che qualcuno ne sia sorpreso perché usare immagini di grandi dimensioni è diventato un po 'una tendenza di design, ma anche così, dovremmo sforzarci di fare meglio.
Ma come?
Assicurati che se stai usando WordPress per impostare le giuste dimensioni dell'immagine per le tue immagini. Non ha senso caricare un'immagine 500x500 se stai usando solo una versione 100x100 nel tuo progetto. La prossima opzione è usare un servizio come smush.it o kraken.io. Entrambi hanno plug-in WordPress disponibili ed entrambi fanno più o meno la stessa cosa: strappano le cose nelle immagini che non ti servono o non le vuoi, le ottimizzano e restituiscono il file più piccolo possibile che possono fare dalla tua immagine senza perdere qualità. Smush.it è un servizio gratuito, dove Kraken ha una soluzione gratuita e una soluzione a pagamento che ottimizzerà le tue immagini al volo.
Ormai, puoi vedere che sono tutto per meno. Meno codice, meno immagini, meno tutto. Fine della strada però: veloce come i miei sistemi minimalisti possono essere, voglio ancora quel miglio in più di impressionante. Mi assicurerò che il mio codice sia il più gestibile possibile, i miei fogli di stile il più piccoli possibile e i miei script brevi. Tutto ciò, tuttavia, è principalmente la preparazione. Dopo tutto, avrò ancora i risultati finali miniati. Usando il pre-processore per i miei fogli di stile, sono già in grado di realizzare un'edizione miniata. Per gli script ci sono soluzioni simili disponibili.
Qui è importante assicurarsi che gli script e i fogli di stile vengano riprodotti usando il wp_enqueue_script e wp_enqueue_style funzioni. Non buttarli semplicemente nel capo del tuo modello, ma usa function.php per accodarli e lasciare che il wp_head la funzione esegue l'output effettivo.
Perché questo è importante? Perché se accodasti correttamente i tuoi script e fogli di stile i diversi plugin di cache e minifying che sono disponibili possono combinarli correttamente in un unico foglio di stile e script.
Caching? Sì, il caching. Accanto alla fusione di fogli di stile e script questi plugin forniscono un sistema per memorizzare l'output dal database o anche l'intera pagina che viene esportata. Entrambi ridurranno drasticamente la quantità di tempo che un sito dovrà caricare. È oltre lo scopo di questa serie di elaborare ampiamente i plug-in di cache disponibili e le loro funzionalità, Adam Burucs ha scritto un articolo confrontando i due più grandi plug-in di cache che è un buon punto di partenza se stai cercando alcune informazioni sui due.
Le risorse esterne sono un po 'una parte interessante di tutto ciò. Da un lato, l'utilizzo di un provider esterno consente di scaricare il traffico dal proprio server. Di solito, sarà più veloce a causa delle limitazioni del browser sulla quantità di richieste che possono essere inviate a un server. Ma c'è un rovescio della medaglia. Non puoi controllare ciò che viene dal tuo host esterno e devi avere la piena fiducia che i dati rimarranno gli stessi e che l'host rimarrà disponibile. In alcuni casi potrebbe essere un'idea migliore per mantenere le risorse sul proprio sito.
Per riassumere: mantienili, assicurati che i fogli di stile e gli script siano piccoli come puoi ottenerli, quindi ridimensionali ulteriormente. Carica le immagini alle dimensioni che ti servono e trascinile attraverso un ottimizzatore come smush.it o kraken.io. Utilizza un plug-in di memorizzazione nella cache come endpoint finale per il tuo output dopo aver minimizzato tutti gli elementi prima di introdurre la cache.
C'è ancora un'ultima puntata in questa serie in cui tratteremo ulteriori riferimenti sugli argomenti discussi e, auspicabilmente, forniremo ulteriori utili spunti.
Accentsconagua