Share
Quando desideri ottimizzare le prestazioni di un sito web manualmente, senza utilizzare un approccio già pronto come AMP, quali sono i passaggi chiave che devi seguire?
In questo video del mio corso Ottimizza il tuo sito web senza AMP, scoprirai una semplice lista di controllo che puoi utilizzare per garantire che il tuo sito venga caricato con la stessa rapidità con cui verrebbe eseguito con AMP, se non più velocemente.
Ecco la checklist di ottimizzazione di base con cui lavoreremo:
Come puoi vedere, questa checklist è parte dei compiti che dobbiamo completare, i principi di parte che dobbiamo seguire, e anche gli obiettivi parziali che vogliamo raggiungere. Diamo un'occhiata a ciascuno di essi in modo più dettagliato.
La prima cosa sulla nostra lista è un obiettivo, e cioè, vogliamo che il nostro sito si carichi più velocemente o più velocemente rispetto alla versione AMP dello stesso sito. È una buona idea continuare a controllare il tempo di caricamento durante il processo di sviluppo, quindi è quello che faremo mentre lavoriamo a tutto.
Entriamo ora nelle cose tecniche che dobbiamo fare. La prima considerazione è che vogliamo ottenere tutti i font web che utilizzeremo caricati il più velocemente possibile.
I caratteri Web sono spesso file relativamente grandi e non è possibile mostrare correttamente i contenuti finché questi tipi di carattere Web non vengono caricati. Quindi faremo in modo di ottenere quei caratteri web caricati molto presto nella foto, probabilmente come la prima cosa che inizia a caricare.
La prossima cosa che faremo è assicurarsi che il nostro CSS sia molto efficiente e di dimensioni molto ridotte.
A volte puoi essere tentato di prendere una scorciatoia e includere una massiccia libreria di CSS nei tuoi siti per velocizzare il processo di sviluppo, anche se la maggior parte di questi non è necessaria.
Lanciare un enorme file CSS può aiutare a velocizzare il tuo sviluppo, ma probabilmente rallenterà il tuo sito web e diminuirà le prestazioni dei tuoi siti nei motori di ricerca. Lo dico perché la velocità di caricamento è ora un fattore di ranking. Quindi è importante che il tuo CSS sia il più piccolo ed efficiente possibile.
Stai anche andando a prendere quel CSS e caricarlo in linea nella sezione principale del sito. Questa è una tecnica utilizzata da AMP ed è un'eccellente tecnica di ottimizzazione. Questo è ciò che sicuramente terremo in sospeso con il nostro processo di ottimizzazione.
Anche se il nostro CSS sarà in linea nella sezione head, continueremo a lavorare sul nostro CSS in file separati. Cercare di scrivere CSS direttamente nella sezione head di un file HTML non è molto pratico. Quindi avremo tutto configurato in modo che possiamo lavorare esternamente sui nostri file CSS, quindi in futuro inserirli nei file HTML, in modo da ottenere il meglio da entrambi i mondi.
La prossima cosa che faremo è fare in modo che il javascript che utilizziamo sia il più possibile abbinato e minimizzato.
Uno dei lati negativi del lavorare con AMP è che hai più file JavaScript che devi portare e ognuno di essi deve essere inserito separatamente. Ma nella massima misura possibile, prenderemo il nostro JavaScript e lo combineremo in un singolo file, in modo da avere il numero minimo assoluto di richieste del browser.
Per far sì che entrambe le cose accadano - lavorando esternamente sui CSS e combinando e minimizzando JavaScript - configureremo un processo di compilazione che farà sì che entrambe queste cose accadano automaticamente.
Useremo Gulp per farlo. Ciò significa che avrai bisogno di avere il Nodo installato sul tuo sistema, e dovrai anche usare un po 'il terminale. Ma durante il corso ti guiderò su cosa fare, quindi anche se non hai lavorato con il terminale, dovresti stare bene.
Il prossimo passo è che useremo solo JavaScript asincrono (asincrono). Ciò significa che il modo in cui caricare il nostro JavaScript non impedirà il caricamento di altri elementi nella pagina contemporaneamente.
Un'altra cosa che faremo con il nostro JavaScript è che lo rimanderemo. Ciò significa che stiamo andando a spingere il nostro JavaScript fino alla fine del processo di rendering. Ci assicureremo che tutto il resto del nostro sito sia completamente caricato prima di fare qualsiasi cosa con JavaScript.
Ci assicureremo inoltre che ogni bit di JavaScript che utilizziamo sia vanilla JavaScript, e lo stiamo facendo per assicurarci che non abbiamo dipendenze. Se usiamo, diciamo, un lightbox che dipende da jQuery, ora dobbiamo caricare jQuery nel nostro sito, e questo è più dimensioni del file e più elaborazione per il browser da gestire.
Spesso non è necessario utilizzare più librerie JavaScript. Spesso puoi ottenere la funzionalità che desideri anche con JavaScript vaniglia.
Preferiremo anche JavaScript semplice. Quindi proveremo a ridurre al minimo le dimensioni del file del nostro JavaScript. Non vogliamo molte campane e fischietti; vogliamo mantenere tutto il più stretto ed efficiente possibile.
E l'ultimo punto su JavaScript è che vogliamo essere sicuri che al massimo grado possiamo, ci rivolgiamo alle persone che hanno disattivato JavaScript.
Con la versione AMP del sito che stiamo per creare, se disattiviamo JavaScript, puoi vedere che non abbiamo molti contenuti da guardare.
C'è un po 'di più che potremmo fare con questo sito per renderlo un po' più amichevole. Ma per la maggior parte, AMP dipende completamente da JavaScript per offrirti qualsiasi tipo di contenuto.
Con la nostra versione non AMP, abbiamo ancora la nostra immagine di sfondo che mostra bene, e stiamo anche inserendo un po 'di fallback per le icone dei font anche qui, perché spesso chi blocca anche JavaScript blocca i caratteri.
Abbiamo un messaggio che consente alle persone di sapere perché il video di YouTube non può apparire, e la stessa cosa sotto la quale il nostro CodePen sarebbe.
La nostra galleria si presenta ancora la stessa, e poi in basso, abbiamo solo la versione di testo dei nostri tweets che mostra come fallback nel caso in cui non ci sia JavaScript.
Ci assicureremo inoltre di utilizzare il caricamento pigro su entrambe le immagini e gli iframe. Se hai un sito abbastanza lungo, la persona in genere guarderà prima quello che è in cima a quel sito, poi scorrerà verso il basso e darà un'occhiata al resto del contenuto.
Ma non vuoi farli aspettare che il resto del contenuto venga caricato prima di poter iniziare a guardare ciò che è in cima al contenuto. Quindi, con il caricamento pigro, si carica solo ciò che è in cima prima, e poi si carica gradualmente il resto del contenuto mentre la persona scorre verso il basso.
Infine, faremo in modo che evitiamo il reflow. Qualcosa che vedrai spesso, soprattutto sui dispositivi mobili, è il caricamento di elementi più lenti, ad esempio le immagini, mentre il resto del layout della pagina deve riadattarsi all'immagine appena caricata.
Questo è male per un paio di motivi:
Nel corso completo, Ottimizza il tuo sito web senza AMP, metti in pratica questo elenco di controllo. Imparerai esattamente come prendere un sito basato su AMP esistente e convertirlo per utilizzare equivalenti non AMP. In altre parole, imparerai come far funzionare velocemente i tuoi siti, con tecniche di ottimizzazione che decidi tu stesso.
Puoi seguire questo corso subito con un abbonamento a Envato Elements. Con una sola tariffa mensile bassa, puoi accedere non solo a questo corso, ma anche alla nostra libreria in crescita di oltre 1.000 corsi video e eBook leader del settore su Envato Tuts+.
Inoltre ora ottieni download illimitati dall'enorme libreria Envato Elements di oltre 400.000 risorse creative. Crea con caratteri, foto, grafica e modelli univoci e realizza progetti migliori più velocemente.
Accentsconagua