Come bilanciare le elevate velocità di caricamento delle pagine Web con contenuti avanzati

Pubblicato: 2021-07-19

Tempi di caricamento della pagina rapidi e contenuti ricchi e interattivi sono entrambi fondamentali per il successo di un sito Web, ma trovare un equilibrio tra i due può essere difficile.

Non è un grande segreto che i tempi di caricamento delle pagine siano estremamente importanti per il successo di un sito web. Gli algoritmi di ricerca di Google favoriscono tempi di caricamento rapidi e ci sono anche molte ricerche che mostrano che un piccolo aumento del tempo di caricamento della pagina può avere un impatto negativo sulle conversioni. Tom Whiley, responsabile del marketing digitale di Hallam, ha scritto un eccellente post sul blog su come migliorare la velocità di caricamento della pagina l'anno scorso. Mentre i nostri partner di hosting, WP Engine, hanno prodotto un'ottima infografica sulla velocità di caricamento della pagina.

I siti web devono anche essere ricchi di contenuti, immagini e interattività per incoraggiare le conversioni. Questo porta inevitabilmente a pagine più grandi, che naturalmente rallentano il tempo di caricamento della pagina.

Il conflitto tra la necessità di velocità e la richiesta di contenuti ricchi può portare a un punto morto i progetti di design. Quindi è fondamentale trovare un equilibrio che soddisfi entrambi i requisiti.

In questo blog, condividerò con voi un approccio che vi aiuterà a bilanciare queste due sfide contraddittorie.

Collega la velocità di una pagina al suo scopo

Non è possibile prevedere i tempi di caricamento finché un sito web non è stato sviluppato a uno stadio ragionevolmente maturo, quindi è meglio adottare un approccio iterativo per misurare e migliorare la velocità.

Il punto di partenza fondamentale è identificare le pagine di destinazione SEO del sito e le sue pagine ricche di contenuti. Puoi quindi concentrarti sulla riduzione il più possibile delle dimensioni della pagina e sulla velocità di caricamento delle pagine SEO.

Allo stesso modo, alle pagine di destinazione avanzate può essere concesso un po' più di spazio per l'interazione dell'utente.

Ecco un processo approssimativo che può essere applicato:

Identificare le pagine di destinazione chiave che saranno l'obiettivo per velocità di caricamento ridotte.
Progettare intorno alle migliori pratiche per tempi di caricamento ridotti.
Decidi le funzionalità relative alle best practice per i tempi di caricamento ridotti.
Sviluppa la/e pagina/e.
Misura e cerca opportunità per risparmiare tempo di caricamento.
Ripeti 4-5 come appropriato.

Questo copre solo la prima parte della storia. Le pagine SEO chiave devono quindi essere continuamente monitorate per i tempi di caricamento delle pagine per assicurarsi che funzionino ancora come previsto, soprattutto quando si utilizza un sistema di gestione dei contenuti che consente a chiunque di modificare le pagine.

Quindi, dopo aver avviato il sito web ci sono due semplici passaggi che possono essere seguiti:

Imposta un controllo mensile delle principali pagine chiave di destinazione per assicurarti che funzionino ancora.
Utilizza uno strumento di monitoraggio della velocità della pagina che si attiva quando la pagina ha prestazioni inferiori a un livello concordato.

Considerazioni di progettazione per l'ottimizzazione delle velocità di carico

Il design del sito gioca un ruolo fondamentale nel determinare quanto sia possibile ottimizzare i tempi di caricamento della pagina. Quando si tratta di pagine web, le dimensioni contano davvero. L'obiettivo è mantenere il tempo di caricamento della pagina idealmente inferiore a 500k, ma sicuramente inferiore a 1 MB al massimo.

Di seguito sono riportati alcuni passaggi da eseguire per ridurre al minimo i tempi di caricamento:

Riduci al minimo possibile l'uso di immagini sulle pagine di destinazione chiave. È troppo facile usare le immagini per far sembrare una pagina ricca quando un uso sottile dell'iconografia e del design può avere lo stesso effetto.
Laddove vengono utilizzate immagini, queste dovrebbero essere ottimizzate garantendo al tempo stesso che non vi sia un degrado inaccettabile della qualità.
Utilizza pagine di destinazione snelle ottimizzate per la ricerca organica e mantieni qualsiasi contenuto ricco su pagine più profonde che non sono mirate per la ricerca organica.
Evita molti layout unici e complessi su più modelli. Più semplice è il markup HTML, più piccoli saranno i file.
Evita elementi interattivi complessi che si basano su pesanti librerie Javascript. Potrebbe sembrare bello vedere qualcosa muoversi sullo schermo, ma è davvero necessario?

Considerazioni tecniche durante l'implementazione

E infine, possiamo entrare in alcuni degli aspetti più tecnici della velocità di caricamento della pagina che devono essere considerati come parte della scelta dell'hosting:

Rimuovere la dipendenza da script di terze parti ove possibile. Questi causano problemi perché non solo fai affidamento su quegli script che si caricano prima che la pagina venga caricata, ma a volte sono anche sotto carico elevato e si caricano più lentamente del solito. Questo può portare a tempi di caricamento "grumosi".
Utilizza tecniche di caricamento lento per assicurarti che le immagini che non appaiono above the fold vengano caricate quando l'utente scorre nella visualizzazione.
Fai un uso migliore delle immagini reattive. Ci sono stati alcuni progressi nel modo in cui le immagini reattive vengono gestite dai browser, il che significa che non è necessario fornire un'unica immagine grande che funzioni su tutte le porte di visualizzazione e può offrire un'immagine migliore per risoluzioni specifiche.
Assicurati che i video incorporati vengano caricati dopo che la pagina è stata caricata, piuttosto che come parte del caricamento della pagina. Ciò significa che gli utenti vedranno un'immagine di anteprima per un video e quindi vedranno il video effettivo dopo aver fatto clic sul collegamento.
Evita file htaccess di grandi dimensioni per i reindirizzamenti 301 e combina le regole in reindirizzamenti di categorie in blocco, anziché reindirizzamenti da pagina a pagina individuali.
Usa un CDN per le immagini. Ciò dovrà essere misurato poiché i CDN possono essere dannosi per le prestazioni, se la base di utenti del sito è particolarmente localizzata.
Riduci al minimo i file CSS e Javascript. Dovresti già farlo nella maggior parte dei casi, ma potrebbero esserci ulteriori opportunità per ridurre alcuni file nelle pagine chiave. Questa è una parte centrale per prendere la decisione sull'installazione di nuovi plugin.
Elimina il supporto per i browser meno recenti. I browser più vecchi richiedono la creazione e il caricamento di file CSS e JS specifici nel sito in modo condizionale. Se riusciamo a rimuoverli completamente, sarà una richiesta in meno da fare.
Riduci al minimo il numero di plugin utilizzati sul tuo sito. Ereditiamo regolarmente siti Web che soffrono di plug-in gonfiati. Non è un problema nuovo quando si lavora con un CMS, ma è comunque un grosso problema.
Rimuovi qualsiasi dipendenza da requisiti di hosting non essenziali, come l'hosting di immagini per le firme e-mail
Eseguire query di ottimizzazione del database. Se il tuo sito web è in circolazione da un po', esistono diverse tecniche di database che possono essere utilizzate per ottimizzare il tempo di esecuzione delle query.

In sintesi, la creazione di un sito altamente ottimizzato è un equilibrio tra specifica, progettazione e implementazione. Il fattore chiave per me è differenziare le pagine SEO altamente ottimizzate da altre pagine, ove possibile, e concentrarmi sull'ottimizzazione di queste il più possibile.

Se hai bisogno di aiuto con il tuo sviluppo web non esitare a contattarci.