WP Performance: hosting, best practice e miglioramenti nativi per tutti

Esplorare le performance native migliorate di WordPress, i vantaggi di hosting ottimizzati e le best practice per siti performanti.

Transcript

1. preencoded.png WP Performance: hosting, best practice e miglioramenti nativi per tutti Obiettivo: esplorare le performance native migliorate di WordPress, i vantaggi di hosting ottimizzati e le best practice per siti performanti. Francesco Grasso Senior Software Engineer – YITH – Newfold Digital
2. preencoded.png Perchè ”performance matters” Miglioramento del rank ( posizionamento ) sui motori di ricerca Miglioramento delle conversioni Riduzione delle risorse necessarie e carbon footprint
3. preencoded.png Hosting e Cache Server Cache Come funziona: Memorizza pagine statiche per velocizzare il caricamento. Configurazione su hosting comuni: • NGINX: Utilizzare fastcgi_cache e definire percorsi per la cache in nginx.conf. • Apache: Abilitare mod_cache e configurare CacheEnable per directory specifiche. Benefici: riduce il carico sul database e sul server PHP, migliora i tempi di risposta per pagine ad alta frequenza di accesso.
4. preencoded.png Hosting e Cache Object Cache •Come funziona: Le query frequenti vengono salvate in memoria per essere riutilizzate senza bisogno di interrogare nuovamente il database. •Strumenti: Utilizzo di Redis o Memcached per gestire la cache. •Benefici: • Riduzione del carico sul database, specialmente durante picchi di traffico. • Miglioramento dei tempi di risposta per richieste ripetute. •Configurazione: Plugin come Redis Object Cache possono essere utilizzati per integrare facilmente la cache negli ambienti WordPress.
5. preencoded.png Hosting e Cache Cache tramite CDN Accelera la consegna di contenuti statici. •Come funziona: I file statici (immagini, CSS, JS) vengono memorizzati nei server del Content Delivery Network più vicini agli utenti. •Servizi: Cloudflare, AWS CloudFront. •Benefici: • Riduzione della latenza. • Maggiore affidabilità in caso di traffico elevato.
6. preencoded.png Miglioramenti Recenti di WordPress Formati immagine moderni WordPress supporta nativamente WebP e AVIF. Lazy loading di default Le immagini e iframe vengono caricati solo quando sono visibili nell'area di visualizzazione. Traduzioni con file PHP Offrono tempi di caricamento ridotti e maggiore efficienza nei server con opcache attivo. Ottimizzazioni del Core Rimozione di codice legacy e caricamento condizionale delle risorse.
7. preencoded.png Cos'è il Lazy Load? Definizione Tecnica che carica immagini e iframe solo quando sono visibili nel viewport dell'utente. Benefici • Riduce il tempo di caricamento iniziale della pagina. • Minore consumo di banda per contenuti non visualizzati. • Miglioramento del ranking SEO grazie a tempi di caricamento più rapidi. • Aumento dello score in strumenti come Google PageSpeed Insights. Implementazione in WordPress Lazy load è abilitato di default dalla versione 5.5. Personalizzabile tramite filtri per escludere elementi specifici.
8. preencoded.png Traduzioni Performanti in PHP Definizione I file di traduzione in PHP sono caricati direttamente come codice eseguibile, mentre i file .po/.mo richiedono parsing aggiuntivo. Benefici Velocità: Le traduzioni in PHP sono fino al 40% più veloci rispetto ai file .mo. Efficienza server: Sfruttano l'OpCache per migliorare ulteriormente i tempi di risposta. Come attivarle 1. Aggiornare WordPress alla versione 6.1 o successiva. 2. Convertire i file .mo esistenti in file PHP utilizzando il comando WP-CLI. 3. Verificare che il tema/plugin utilizzi i file PHP per le traduzioni.
9. preencoded.png Block Editor e Performance 1 Output HTML ottimizzato Rispetto ai page builder tradizionali 2 Caricamento condizionale delle risorse Per blocchi specifici 3 Compatibilità con tecniche moderne Lazy loading, formati immagine moderni Il Block Editor di WordPress offre significativi miglioramenti delle performance rispetto ai tradizionali page builder, grazie a un output HTML ottimizzato, al caricamento condizionale delle risorse per blocchi specifici e alla compatibilità con tecniche moderne come il lazy loading e i formati immagine avanzati.
10. preencoded.png Risorse Condizionali e Critical CSS Caricamento Risorse Condizionali Tecnica per caricare CSS e JS solo per i blocchi utilizzati nella pagina corrente. Benefici: Riduzione del peso della pagina e miglioramento dei tempi di caricamento. Implementazione Utilizzo del sistema di asset registration nativo di WordPress per caricare file in modo condizionale. Critical CSS Tecnica che inietta gli stili CSS essenziali per il rendering iniziale direttamente nell'header della pagina. Benefici: Migliora il Largest Contentful Paint (LCP) e riduce il tempo percepito di caricamento.
11. preencoded.png Risorse Condizionali e Critical CSS function enqueue_block_specific_assets() { if ( has_block( 'core/gallery' ) ) { wp_enqueue_style( 'gallery-block-styles' ); } } add_action( 'wp_enqueue_scripts', 'enqueue_block_specific_assets' );
12. preencoded.png Ottimizzazioni Aggiuntive Identificare Risorse Non Necessarie Strumenti per l'ottimizzazione: Query Monitor e Asset CleanUp Plugin. function dequeue_unnecessary_scripts() { if (!is_page('contatti')) { wp_dequeue_script('plugin-contact-form-js'); } } add_action('wp_enqueue_scripts', 'dequeue_unnecessary_scripts'); Disabilitare Funzionalità Non Necessarie • Rimozione di filtri Duotone • Script per emoji • Stili Gutenberg • Feed RSS non necessari Conclusione Riepilogo: Hosting e cache come base, Performance Lab e block editor per ottimizzazioni native, tecniche per personalizzare le performance. Grazie per l'attenzione!
13. preencoded.png Ottimizzazioni Aggiuntive remove_filter('render_block', 'wp_render_duotone_support’); remove_action('wp_head', 'print_emoji_detection_script', 7); wp_dequeue_style('wp-block-library’); remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'feed_links', 2); Disabilitare Funzionalità Non Necessarie
14. preencoded.png Performance Lab Plugin Che cos'è? Plugin ufficiale del Performance Team di WordPress, progettato per migliorare le performance native del CMS. Perché usarlo? Supporto a formati immagine moderni (WebP/AVIF) per una migliore compressione, con un miglioramento dei tempi di caricamento fino al 30% rispetto a JPEG e PNG. Funzionalità chiave Ottimizzazione Critical CSS, controlli avanzati sulle immagini, lazy loading ottimizzato, analisi di problemi di performance dalla dashboard. Funzionalità in beta Rilevamento di immagini sovradimensionate, miglioramenti nelle API REST.
15. preencoded.png WP Performance: un futuro più veloce •Hosting e cache come base per una buona infrastruttura. •Performance Lab e block editor per ottimizzazioni native e continue. •Strumenti e tecniche per personalizzare le performance del tuo sito WordPress rimuovendo le risorse non necessarie scenario per scenario. Grazie per l'attenzione!