Rilasciato Breeze v1.2: uno sguardo alle nuove funzionalità offerte da questo importante aggiornamento
Pubblicato: 2021-05-11
Cloudways ha rilasciato Breeze v1.2 con l'obiettivo di migliorare la compatibilità di Core Web Vitals e, in definitiva, fornire un punteggio PageSpeed Insights migliore per i tuoi siti web.
Se ancora non l'hai sentito, Google lancerà il suo nuovo aggiornamento dell'esperienza di pagina questo mese. Di recente abbiamo lanciato un Google Page Experience Checker gratuito per aiutarti a misurare le prestazioni del tuo sito e altri fattori relativi all'esperienza di pagina rispetto all'aggiornamento. In effetti, dall'inizio del 2021, ci siamo concentrati molto sul miglioramento del nostro prodotto e sull'implementazione di aggiornamenti che offrano la migliore esperienza con le pagine di Google.
Prima di aggiornare Breeze all'ultima versione, tuttavia, è altamente consigliato eseguire il backup dell'intero sito WordPress o testare la nuova versione su un ambiente di staging. L'incompatibilità delle versioni più recenti con altri plugin può causare problemi ed errori casuali a volte, quindi se hai un backup pronto, puoi ripristinare rapidamente il tuo sito WordPress.
Cosa c'è di nuovo in Breeze v1.2?
Ora, diamo una breve occhiata a quali nuove entusiasmanti funzionalità Breeze porta nella versione 1.2.
Link sicuri cross-origine
Se hai familiarità con le pratiche SEO, capirai l'importanza degli attributi "noopener noreferrer". Questa volta, Breeze è dotato di una nuova funzionalità che aggiungerà automaticamente un attributo "noopener noreferrer" ai collegamenti che hanno un valore target "_blank".
Nota: non aggiungerli nell'editor di WordPress poiché l'editor aggiunge automaticamente noopener noreferrer; aggiungi i collegamenti nei file del tema. Dopo aver aggiunto i collegamenti, torna su wp-admin e salva le impostazioni di Breeze o Svuota la cache.
– Link sicuri cross-origine in Breeze
Alcuni casi d'uso
- _blank valore target e nessun attributo rel , la funzione aggiungerà direttamente il rel=“ noopener noreferrer ”.
- _blank, ma l'attributo rel contiene solo il valore noopener , quindi verrà aggiunto noreferrer . Ad esempio, il collegamento contiene solo l'attributo noopener : noreferrer La funzione aggiunge anche l'attributo noreferrer: <a href =”https://example.com” target =”_blank” rel=”noopener noreferrer _blank, ma il rel contiene il valore noreferrer , quindi verrà aggiunto anche noopener .
- _blank target value e il rel contiene sia noopener noreferrer , non ci sarà alcun cambiamento.
- href contiene # link (ID), verrebbe ignorato, il che significa nessuna modifica.
Codice di ingresso:
– Inserisci il codice nell'editor del tema
Uscita del codice:
– Uscita del Codice
Il carattere rimane visibile durante il caricamento
I caratteri vengono caricati quando visiti un sito e il testo non è visibile durante il tempo di caricamento. Per migliorare l'esperienza dell'utente, dovresti utilizzare una tecnica che visualizzi il contenuto del tuo testo (carattere di riserva) durante il download del carattere (durata del caricamento del carattere). Breeze ha ora una nuova funzionalità che ti aiuterà a farlo.
Questa funzione sarà visibile quando selezioni la minimizzazione CSS e funziona solo per le opzioni di minimizzazione CSS e Gruppo CSS. Per aggiungere l'attributo font-display:swap alle classi CSS, dobbiamo modificare il contenuto.
– Minificazione in Brezza
Per testare questa funzione, puoi controllare i file .css nell'origine della pagina di visualizzazione e cercare @font-face . Verrà aggiunto l'attributo font-display . Se quella definizione di font ha già un attributo font-display, non verrà modificato nulla.
– Visualizzazione dei caratteri in CSS
Caricamento pigro di immagini
Il caricamento lento è una tecnica di ottimizzazione della velocità che carica solo le immagini visibili sullo schermo invece di caricare le immagini dell'intera pagina tutte in una volta. Ciò può migliorare significativamente i tempi di caricamento e l'esperienza dell'utente.
La nuova versione di Breeze offre la funzione Lazy Load Images nelle Advanced Options. Se abiliti questa opzione, le immagini vengono sostituite da immagini trasparenti fittizie come segnaposto e, quando è il momento di visualizzare, verrà caricata l'immagine originale.
– Caricamento pigro di immagini in Breeze
Il codice riconosce le dimensioni dei dati e gli attributi data-srcset utilizzati per visualizzare la dimensione dell'immagine corretta in base alla risoluzione. I seguenti attributi sostituiscono gli attributi originali:
data-breeze= src
data-brsrcset= data-srcset
data-brsizes= data-dimensioni
Se vuoi verificare se le immagini a caricamento lento funzionano o meno, premi "CTRL + Maiusc + I" → Rete → seleziona img → scorri verso il basso l'intera pagina.
– Controlla il caricamento lento nel tuo browser
Precarica link
I collegamenti di precaricamento sono un'altra nuova funzionalità che abbiamo aggiunto al menu Opzioni avanzate per accelerare le prestazioni del tuo sito e migliorare i risultati della velocità della pagina. Quando passi il mouse su un link, questa funzione creerà una cache e la pagina si caricherà più velocemente quando apri o visiti di nuovo quel link.
Quando l'opzione è abilitata nel back-end, un file JavaScript viene caricato nel front-end, che non dipende da altre librerie.
Quando un utente passa il mouse su un collegamento per più di 150 ms, viene abilitata una prelettura per quel collegamento e verrà creata la cache della pagina. Quindi, quando l'utente fa clic sul collegamento, la pagina è pronta per visualizzare immediatamente il contenuto.
– Precarica collegamenti in Breeze
Questa funzione non memorizza nella cache l'intera pagina successiva al passaggio del mouse. Invece, memorizza nella cache la richiesta per fornire un piccolo aumento della velocità del sito.
Nota: per impostazione predefinita, il tempo di ritardo del passaggio del mouse sul collegamento è impostato su 150 ms. Gli URL inclusi in Never Cache questi URL verranno esclusi dal caricamento di precaricamento.
Precarica i tuoi caratteri web
La funzione Precarica i tuoi caratteri Web è disponibile nelle Opzioni avanzate ed è semplice da usare. Tutto quello che devi fare è fornire l'URL del carattere locale o il file CSS (URL) che carica solo i caratteri . Molto spesso, i caratteri web rallentano la velocità del tuo sito web e causano ritardi, quindi si consiglia di scegliere una soluzione migliore che ti aiuti ad affrontare questo problema.
Con questo aggiornamento, portiamo la funzione Precarica i tuoi caratteri Web che ti aiuterà a migliorare le prestazioni del tuo sito e a rimuovere il problema delle richieste di precaricamento delle chiavi.
– Precarica i tuoi caratteri web in Breeze
Questa funzione caricherà i caratteri specifici (aggiunti nel campo) all'inizio invece di caricare i caratteri alla fine, in modo da poter sperimentare migliori prestazioni del sito e buoni punteggi Web Vital.
Ritarda gli script in linea JS
Gli script in linea Delay JS sono una nuova funzionalità disponibile nelle Opzioni avanzate. Questo è progettato per caricare il tuo JS in linea alla fine, in modo che l'utente e il tester di velocità del sito non vedranno alcun tempo di caricamento.
Il concetto alla base di questo è il caricamento lento, in cui il tuo script js in linea apparirà quando interagisci (scorri verso il basso, muovi il cursore, ecc.) Con il tuo sito web. Questa è un'ottima tecnica per migliorare le prestazioni del tuo sito e i punteggi di Web Vital.
– Ritarda gli script in linea JS in Breeze
Qui, devi fornire la parola chiave chiave per il tuo script js in linea come Google Ads e alla fine caricherà automaticamente uno script specifico.
Riepilogo!
Il team di Cloudways sta lavorando 24 ore su 24 per rendere Breeze il tuo plug-in di cache preferito. Questa è la prima major release che offre sei nuove interessanti funzionalità che ti aiuteranno a migliorare la velocità della tua pagina e i punteggi di Web Vital.
Quando Google lancerà il suo aggiornamento Page Experience questo mese, si spera che il tuo sito web sarà pronto per sfruttare il nuovo aggiornamento.
Se hai domande o feedback su Breeze v1.2, faccelo sapere nella sezione commenti.