Come velocizzare una directory o un sito Web di mercato creato con HivePress

Al giorno d'oggi, la velocità di caricamento del sito Web e le prestazioni complessive sono fondamentali per una buona esperienza utente e per il posizionamento sui motori di ricerca. Di recente Google ha annunciato che inizierà a misurare i Core Web Vitals, come i punteggi di stabilità visiva e i tempi di caricamento delle pagine, per i siti Web per determinare se si qualificheranno per un aumento del segnale di ranking. Inoltre, le pagine con un tempo di caricamento più lungo tendono ad avere frequenze di rimbalzo più elevate e un tempo medio sulla pagina inferiore.

In questo tutorial, spiegheremo come aumentare alle stelle le prestazioni del tuo sito web impostando la memorizzazione nella cache, ottimizzando stili e script e ottimizzando il contenuto multimediale. Utilizzeremo il plug-in LiteSpeed ​​Cache, una soluzione all-in-one per l'accelerazione del sito Web con tonnellate di strumenti e funzionalità per rendere il tuo sito Web incredibilmente veloce.

A scopo di test, utilizzeremo un sito Web di directory WordPress creato con HivePress e alcune estensioni insieme al suo tema ListingHive predefinito. Tuttavia, se il tuo sito Web non è stato creato con il plug-in HivePress, puoi seguire gli stessi passaggi per qualsiasi altro sito Web basato su WordPress.

Quindi, iniziamo con l'installazione di LiteSpeed ​​Cache.

Installazione della cache LiteSpeed

Prima di tutto, devi installare il plugin LiteSpeed ​​Cache. Puoi farlo facilmente direttamente dalla dashboard di WordPress andando nella sezione Plugin > Aggiungi nuovo . Trovalo tramite la barra di ricerca e procedi installandolo. Al termine dell'installazione, è sufficiente fare clic sul pulsante "Attiva" per abilitare il plug-in.

Una volta installato e attivato, puoi iniziare a ottimizzare il tuo sito web. Esaminiamo prima le impostazioni di base della cache.

Ottimizzazione della cache

Per regolare le impostazioni di base della cache, vai alla pagina LiteSpeed ​​Cache > Cache . Ci sono molte sezioni diverse all'interno di questa pagina, ma esamineremo solo le impostazioni più importanti.

Impostazioni della cache

In questo caso, consigliamo vivamente di disabilitare la cache per gli utenti che hanno effettuato l'accesso e le richieste API REST. Ciò è necessario per il corretto funzionamento del plug-in HivePress. Dopo aver abilitato o disabilitato qualsiasi opzione, non dimenticare di salvare le modifiche.

Cache oggetti

Quindi, abilitiamo Object Cache . Passa alla sezione Oggetto e controlla se la cache degli oggetti è disponibile sul tuo sito. Il test di connessione dovrebbe essere visualizzato come "superato". In tal caso, puoi abilitare la cache degli oggetti e ciò migliorerà drasticamente le prestazioni del sito Web memorizzando nella cache le query del database duplicate.

Non dovrebbero esserci problemi a superare il test di connessione se il tuo sito web è basato sul server OpenLiteSpeed ​​o se il tuo provider di hosting supporta la memorizzazione nella cache degli oggetti.

Cache del browser

Infine, vai alla sezione Cache del browser e assicurati che sia abilitata. Questo memorizzerà nella cache tutto il contenuto statico come stili, script e immagini nel browser dell'utente.

Ottimizzazione della pagina

Il passaggio successivo è accedere alla sezione LiteSpeed ​​Cache > Ottimizzazione pagina per ottimizzare stili, script e caratteri.

Ottimizzazione CSS

Iniziamo con la sezione Impostazioni CSS . Qui ti consigliamo di attivare le impostazioni Minimizza CSS e Combina CSS .

• Minimizza CSS : se abiliti questa opzione, tutti i caratteri di spazio vuoto extra, i caratteri di nuova riga e altri dati non necessari o ridondanti verranno automaticamente rimossi dai file CSS senza influire sugli stili del sito Web.
• Combina CSS : abilitando questo, tutti i singoli file CSS verranno uniti in un unico file CSS. In questo modo, il browser invia una singola richiesta di file invece di richiedere ogni file CSS separatamente, riducendo il numero di richieste HTTP.

Ottimizzazione dei caratteri

Se il tuo sito utilizza Google Fonts, ci sono alcune opzioni per ottimizzare il caricamento dei caratteri. Nella stessa sezione Impostazioni CSS , puoi scorrere verso il basso e impostare l'opzione Ottimizzazione della visualizzazione del carattere su Scambia in modo che il carattere di fallback venga utilizzato per visualizzare il testo fino a quando il carattere personalizzato non è stato completamente scaricato.

Dopo aver impostato l'opzione Scambia , vai alla sezione Ottimizzazione all'interno della stessa pagina e attiva l'opzione Carica caratteri Google in modo asincrono per caricare i caratteri Google in background durante il rendering della pagina.

Ottimizzazione JS

Ora andiamo alla sezione Impostazioni JS per ottimizzare i file JavaScript. Qui ti consigliamo di seguire gli stessi passaggi delle impostazioni CSS. Abilita semplicemente le opzioni JS Minify e JS Combine in modo che anche i file JS vengano minimizzati e uniti in un unico file.

C'è anche l'opzione Load JS Deferred che può davvero fare la differenza. Dopo aver abilitato questa impostazione, gli script verranno caricati in background mentre il browser esegue il rendering del layout e degli stili della pagina. Gli script sono spesso "più pesanti" dell'HTML, quindi il caricamento e l'esecuzione di script che non sono necessari per il rendering della pagina iniziale possono essere posticipati e caricati in un secondo momento. Consente ai visitatori di utilizzare il sito Web quasi immediatamente.

Dopo aver selezionato questa opzione, assicurati che il front-end del sito Web non sia danneggiato perché alcuni script potrebbero richiedere il caricamento prima del rendering della pagina.

Ottimizzazione multimediale

Infine, devi ottimizzare i tuoi contenuti multimediali. Poiché le immagini spesso rappresentano circa la metà delle dimensioni del contenuto di una pagina Web, la conversione di tutte le immagini nel formato WebP (che è in media il 30% più piccolo rispetto ad altri formati) può migliorare notevolmente la velocità di caricamento della pagina.

Nella sezione LiteSpeed ​​Cache > Ottimizzazione immagine > Impostazioni , puoi convertire le immagini del tuo sito Web nel formato WebP abilitando le impostazioni Crea versioni WebP e Sostituzione immagine WebP .

Dopo aver verificato queste opzioni, vai alla sezione Riepilogo ottimizzazione immagine per ottenere la chiave di dominio e ottimizzare le immagini facendo clic sul pulsante "Invia richiesta di ottimizzazione" fino a quando il punteggio di ottimizzazione dell'immagine raggiunge il 100%.

Inoltre, se sono presenti incorporamenti sul tuo sito Web (ad esempio video di YouTube, post di Instagram o Tweet), è meglio caricare il contenuto incorporato solo quando gli utenti lo scorrono verso il basso, non durante il rendering della pagina iniziale. Renderà la prima pagina molto più veloce e ridurrà l'utilizzo della memoria del browser.

Passare alla sezione LiteSpeed ​​Cache > Ottimizzazione pagina > Impostazioni multimediali e abilitare l'opzione Lazy Load Iframes .

Avvolgendo

Di seguito è riportato lo screenshot dei risultati di Google PageSpeed ​​su dispositivi mobili e desktop dopo aver ottimizzato le prestazioni del sito Web seguendo i passaggi di questo tutorial.

Questo è tutto! Se hai creato la tua directory o il sito Web del mercato con HivePress (o qualsiasi altra soluzione basata su WordPress) , puoi seguire gli stessi passaggi per impostare la memorizzazione nella cache, ottimizzare gli stili, gli script e i caratteri, nonché i contenuti multimediali come immagini o incorporamenti. Di conseguenza, otterrai un punteggio elevato su Google PageSpeed ​​(aumentando così il tuo posizionamento SEO) e migliorerai l'esperienza utente complessiva del tuo sito web.

Inoltre, sentiti libero di controllare i seguenti articoli:

• I migliori plugin per directory di WordPress
• Temi di directory WordPress popolari
• Errori durante la creazione di un sito Web di elenchi di WordPress