Come Elementor dà priorità e migliora le prestazioni dei siti web
Pubblicato: 2021-04-26Parliamo della Roadmap dei prodotti di Elementor per il 2021, in particolare dell'ottimizzazione delle prestazioni. Mentre continuiamo a pianificare e sviluppare nuove fantastiche funzionalità richieste dalla nostra community, quest'anno abbiamo deciso di migliorare le prestazioni dei siti Web dei nostri utenti come missione. In questo post, vorrei condividere con voi alcune delle azioni che abbiamo già intrapreso per raggiungere questo obiettivo e parlare un po' di cosa accadrà nel prossimo anno.
Le prestazioni del sito Web sono state un problema per i creatori di siti Web sin dagli albori di Internet. Essendo io stesso un creatore di siti web, farei sempre domande come:
- “Il mio sito è troppo lento? Sta causando l'abbandono degli utenti o danneggiando le mie classifiche di Google?"
- "Devo lasciare andare una certa funzionalità per migliorare la velocità del sito?"
- E ovviamente: “Cosa diavolo sta ancora causando i miei problemi di prestazioni? Pensavo di aver coperto tutte le basi qui!”
Quindi sì, ottenere prestazioni eccezionali da un sito Web è sempre stata una sfida per i creatori di siti Web, indipendentemente dalla piattaforma o dagli strumenti che abbiamo utilizzato. Con così tanti fattori rilevanti che influenzano le prestazioni, non è sempre facile isolare il vero problema, figuriamoci trovare una soluzione. Questo è esattamente il motivo per cui abbiamo creato questo corso video in cinque parti sulla performance . In questa serie, approfondiamo ogni fattore importante che potrebbe influenzare le prestazioni del tuo sito, indipendentemente dal fatto che sia correlato a Elementor o meno, e ti spieghiamo come ottimizzarlo.
Per rendere le cose davvero interessanti, Google ha recentemente annunciato che le prestazioni del sito web ora giocheranno ufficialmente un ruolo nel suo algoritmo di ranking. Ciò pone la questione delle prestazioni sotto i riflettori, sollevando preoccupazioni tra i proprietari di siti Web in tutto il mondo. Ecco perché negli ultimi sei mesi, i nostri team di ricerca e sviluppo e SEO hanno lavorato instancabilmente per assicurarsi che i siti Web di Elementor superino questo aggiornamento e passino a pieni voti.
Quando si tratta del misterioso algoritmo di Google, sappiamo che ci vorrebbe molto più della nostra parola per farti sentire al sicuro. Pertanto, come servizio per i nostri utenti e la comunità di creatori di siti Web, organizzeremo un webinar gratuito sulle prestazioni web con i principali esperti SEO per discutere del cambiamento imminente. Questo non solo coprirà l'aggiornamento stesso, ma spiegherà anche in che modo questa modifica potrebbe influire sul tuo sito Web e cosa puoi fare per prepararti. Il webinar si terrà il 28 aprile, quindi assicurati di salvare il tuo posto .
Tuttavia, mettendo da parte tutti i corsi e i webinar, il nostro obiettivo principale è assicurarci che il nostro prodotto non influisca negativamente sulle prestazioni del tuo sito. Questa è stata, e continuerà ad essere, una priorità assoluta per noi. Quindi, senza ulteriori indugi, tuffiamoci negli sforzi di ottimizzazione delle prestazioni di Elementor, come stabilito nella nostra Roadmap del prodotto 2021.
Sommario
- Il nostro piano a cinque tracce per migliorare ulteriormente le prestazioni
- Traccia 1: "Carica solo ciò di cui hai bisogno"
- Traccia 2: Riduci l'uso di librerie JavaScript/CSS e sfrutta il supporto del browser nativo
- Traccia 3: Migliora e ottimizza JavaScript e CSS interni esistenti
- Traccia 4: Ottimizza i processi di backend e rendering
- Traccia 5: Output del codice migliorato, più snello e migliore
- Risorse gratuite di Elementor sulle prestazioni
Il nostro piano a cinque tracce per migliorare ulteriormente le prestazioni
Oltre all'ottimizzazione del nostro ciclo di sviluppo del prodotto, la nostra visione per migliorare le prestazioni di Elementor consiste in un approccio a cinque tracce. Abbiamo già apportato alcuni miglioramenti significativi in alcune di queste aree, mentre altre verranno affrontate nelle prossime versioni di Elementor.
Siamo inoltre orgogliosi di dire che le prestazioni sono diventate parte integrante della nostra pipeline di sviluppo e rilascio. Ogni versione di Elementor è ora convalidata rispetto a una varietà di metriche sulle prestazioni per garantire che nessuna nuova funzionalità, modifica o correzione abbia alcun effetto negativo sui siti Web esistenti creati con Elementor.
Ora esaminiamo le nostre tracce una per una:
Traccia 1: "Carica solo ciò di cui hai bisogno"
Stiamo migliorando il modo in cui Elementor carica le risorse per garantire che carichi solo ciò di cui ha bisogno su ogni pagina. Nelle ultime versioni di Elementor ed Elementor Pro, abbiamo introdotto l'esperimento di caricamento delle risorse ottimizzato per migliorare le prestazioni front-end di un sito Web, velocizzando ogni pagina caricando solo le funzionalità necessarie. Puoi saperne di più qui.
Abbiamo anche aggiunto opzioni di caricamento lento ad alcuni widget e continueremo a farlo in futuro. Ad esempio, il widget Video include un'opzione di caricamento lento, che ti dà la possibilità di sostituire il lettore video completo incorporato con una miniatura dell'immagine statica. L'immagine tornerà quindi al video completo una volta che un visitatore interagirà con esso.
Utilizzando queste tecniche di caricamento lento, puoi ridurre notevolmente le dimensioni della pagina e il numero di richieste HTTP durante il caricamento iniziale della pagina, il che porterà a un'esperienza molto più rapida per i tuoi visitatori.
Traccia 2: Riduci l'uso di librerie JavaScript/CSS e sfrutta il supporto del browser nativo
Da quando abbiamo lanciato Elementor quasi cinque anni fa, i browser web si sono evoluti molto. Ora, alcune funzionalità che richiedevano librerie esterne cinque anni fa possono essere implementate utilizzando il supporto del browser nativo. Ciò rende l'implementazione molto più efficiente e può, in alcuni casi, ridurre notevolmente il tempo di esecuzione di JavaScript.
Un esempio di ciò è la libreria Waypoints che, in alcuni casi, è stata sostituita con l'API nativa di Intersection Observer.
Il nostro obiettivo è ridurre l'uso di questi tipi di librerie CSS e JavaScript e sostituirle con il supporto browser nativo ove possibile.
Traccia 3: Migliora e ottimizza JavaScript e CSS interni esistenti
Abbiamo in programma di continuare a migliorare e ottimizzare JavaScript e CSS interni esistenti di Elementor.
Esempi di ciò includono la possibilità di configurare il metodo di caricamento di Google Fonts e la proprietà font-display aggiunta alla libreria Font Awesome. Questi miglioramenti dovrebbero ridurre i processi di blocco del rendering per questi file e fornire un'ulteriore ottimizzazione dei file CSS e JS esistenti.
Traccia 4: Ottimizza i processi di backend e rendering
In Elementor 3.0, abbiamo migliorato il caricamento dinamico dei CSS e il meccanismo di rendering. Elementor era utilizzato per scansionare le pagine alla ricerca di elementi con valori dinamici ad ogni caricamento di pagina. A partire da Elementor 3.0, quando una pagina viene creata e visitata per la prima volta, Elementor crea una cache di tutti gli elementi con valori dinamici. Quindi, invece di scansionare la pagina alla ricerca di elementi dinamici ogni volta che viene visitata una pagina, l'elenco viene recuperato dalla cache e visualizzato immediatamente. Ciò migliora significativamente i tempi di rendering lato server e porta a notevoli miglioramenti. Abbiamo in programma di implementare ulteriori miglioramenti di analisi su Elementor in futuro. Puoi saperne di più in questo post del blog.
Traccia 5: Output del codice migliorato, più snello e migliore
Infine, abbiamo in programma di continuare a migliorare e ridurre l'output del codice generato da Elementor per ridurre le dimensioni del DOM.
Abbiamo già iniziato ad apportare questi miglioramenti in Elementor 3.0, dove abbiamo rimosso tre elementi wrapper per creare un DOM più piccolo e semplificare l'output del codice.
In Elementor 3.2, abbiamo rimosso altri due elementi per ottenere riduzioni ancora maggiori delle dimensioni del DOM. Ulteriori riduzioni sono previste nel prossimo futuro.
Come puoi vedere, ci si possono aspettare nuove funzionalità, miglioramenti e revisioni nel 2021 e oltre. Tutto questo viene fatto nel tentativo di aiutarti a continuare a creare siti Web straordinari con prestazioni migliori. Se non hai ancora eseguito l'aggiornamento all'ultima versione, assicurati di farlo per goderti questi e altri miglioramenti.
Risorse gratuite di Elementor sulle prestazioni
Come forse saprai, ci sono molti fattori non correlati a Elementor che influenzano le prestazioni del tuo sito Web WordPress. Questi includono ottimizzazione delle immagini, web hosting, provider di server, CDN e altro. Poiché miriamo a consentire ai nostri utenti di implementare l'ottimizzazione completa di WordPress, abbiamo creato una vasta banca di risorse di tutorial, webinar e articoli gratuiti per aiutarti a saperne di più sulle prestazioni.
- Abbiamo creato un corso video sulle prestazioni : in questa serie di cinque parti , esaminiamo tutti i fattori importanti che possono influire sulle prestazioni e come puoi ottimizzarle.
- Il 28 aprile organizzeremo un webinar su Core Web Vitals con i principali esperti SEO per discutere dell'imminente modifica dell'algoritmo di Google e del suo impatto sui tuoi siti web. Salva il tuo posto qui.
- Abbiamo anche pubblicato un post dettagliato sul blog su come velocizzare i siti Web WordPress, insieme ad altri articoli incentrati sulle prestazioni su argomenti come la scelta dell'hosting web, la memorizzazione nella cache dei plug-in, l'esecuzione di test di velocità, l'utilizzo di WP Rocket e altro ancora.
Continueremo a creare webinar, post di blog e video gratuiti per affrontare altri aspetti delle prestazioni di WordPress al fine di continuare a supportare la comunità dei creatori di siti web.