Accentsconagua
Il titolo del post va qui
- Nome della categoria
postato su 28 febbraio 2014 - 14:40 da parte di Bob The Admin
Commento
pubblicare i contenuti qui
Share
Nei precedenti due post di questa serie, abbiamo discusso di come siamo passati da piccoli siti web a enormi app e siti che abbiamo oggi. Abbiamo discusso alcune delle scelte che possiamo fare in relazione al nostro sito Web WordPress, a cosa fare attenzione e perché ogni cosa è importante.
In questo post, darò alcuni esempi reali di ciò di cui sto parlando. Non sarà una guida lineare che si adatta perfettamente a ogni caso d'uso, ma l'intenzione è di fornire alcuni esempi per aiutarti a iniziare a pulire e a eliminare i bit estranei sul tuo blog che non bisogno.
Di seguito, ho preso un pezzo di HTML da un progetto recente. Il sito originale conteneva molte cose di cui non aveva davvero bisogno. Nel corso del tempo la compagnia aveva accumulato plug-in e aggiunte al tema e ora stava sperimentando tempi di caricamento assurdamente lenti.
In questo caso, la soluzione più semplice sarebbe schiaffeggiare uno strato di cache di fronte ad esso ed essere fatto. Ma questo non risolve veramente il problema. Una delle cose che ho finito è stata la rimozione di circa il 50% dell'HTML nel tema, riscrivendolo dove necessario e regolando il CSS di conseguenza per mantenere lo stesso design.
Ecco una parte dell'HTML che era nel tema originale. Ho risolto un po 'la formattazione.
Il titolo del post va qui
- Nome della categoria
postato su 28 febbraio 2014 - 14:40 da parte di Bob The AdminCommento
pubblicare i contenuti qui
Non è l'HTML peggiore che abbia mai visto, e assolutamente nessuna delle parti che ha reso il sito molto più lento, ma è perfetto per quello che sto cercando di mostrare qui: c'è un sacco di pulizia che può essere fatta. C'è una quantità eccessiva di wrapper e clearing div elementi.
Dopo alcune pulizie ho finito con:
Il titolo del post va qui
- Nome della categoria
postato su 28 febbraio 2014 - 14:40 da parte di Bob The AdminCommentopubblicare i contenuti qui
Questo pezzo di codice ha la maggior parte dei suoi wrapper spogliati. Se non ne hai bisogno, non aggiungerli. Un corretto utilizzo del CSS ti consentirà di evitare l'utilizzo della maggior parte, se non di tutti, dei wrapper nel codice originale.
Questo esempio potrebbe sembrare insignificante e di per sé lo è. Ma fai questo ovunque per ogni modello nel tuo tema e finirai con un output significativamente più piccolo.
Durante il rendering del tuo sito, i browser saranno più felici per questo, i visitatori mobili apprezzeranno il tuo sito aprendosi più velocemente sui loro telefoni perché meno dati significano tempi di caricamento più rapidi e sarai più felice quando devi modificare qualcosa nel codice.
C'è molto di più da discutere qui, ma questa serie non è intesa come la guida definitiva per scrivere HTML pulito. Al contrario, lo scopo è renderti consapevole dei potenziali miglioramenti che puoi applicare al tuo sito.
Rachel McCollin ha scritto una guida molto elaborata ed esauriente sulla costruzione di un tema per WordPress. I dettagli della sua serie in dettaglio eccezionale su come costruire un tema e i suoi esempi sono completamente privi di ogni rigonfiamento, posso consigliare a chiunque cerchi alcuni suggerimenti su come ottenere il loro codice HTML ordinato per dare un'occhiata alle sue serie.
Ora che abbiamo dato un'occhiata ai temi, parliamo di plugin.
Molte delle stesse regole si applicano qui. Il programma di pulizia del plug-in è scritto, più facile sarà regolarlo quando è necessario. Ricorda che perderai la compatibilità se modifichi direttamente un plug-in, quindi in genere è meglio cercare di evitarlo.
I plugin sono disponibili in tutte le dimensioni. Questo significa che alcuni fanno ciò che devono fare e nulla più, altri fanno ciò che devono fare e molte altre cose. Il bloat delle feature non è raro e qualcosa che vuoi davvero tenere d'occhio quando stai selezionando i plug-in che vuoi utilizzare. In alcuni casi (ma non tutti), più plug-in hai, più lentamente le cose finiscono per essere.
Naturalmente, questo dipende in gran parte dalla qualità del codice del plugin. Questo è il motivo per cui è importante assicurarsi di eseguire la dovuta diligenza quando si esaminano i plug-in che si sta per installare.
Individualmente, sembra che ogni plugin non stia facendo molto, ma se riunisci un gran numero di plugin mal codificati, vedrai una significativa diminuzione delle prestazioni.
Quando stavo inizialmente scrivendo questo articolo, stavo per toccare un sacco di cose da tenere d'occhio quando selezionavo i tuoi plugin; tuttavia, Barış Ünver ha scritto un'ottima guida su cosa cercare quando si sceglie un plugin e non ho bisogno di ripetere le sue parole qui.
Invece, leggi la sua guida se stai cercando dei suggerimenti su quale plugin usare.
Per prima cosa, riassumiamo: Il pulitore che scrivi il tuo codice - sia esso HTML, PHP, JavaScript, C - più facile sarà mantenere e aggiustare in seguito. Questo post ha tentato di darti un paio di appigli sulla pulizia dei tuoi modelli e fa riferimento a risorse eccellenti per iniziare con questo e trovare i plugin.
Alcuni di voi avranno notato che non sono riuscito a parlare di nulla relativo a CSS, JavaScript, riducendo al minimo gli elementi e altre forme di ottimizzazione. Questo perché il prossimo post riguarderà esattamente questo.
Nel frattempo, fammi sapere nei commenti quali sono i tuoi pensieri dopo aver letto!
