Come ridurre le richieste HTTP in WordPress senza utilizzare plugin
Come ridurre le richieste HTTP in WordPress senza utilizzare plugin
Ogni volta che un visitatore apre una pagina del tuo sito, il browser deve scaricare decine di risorse: fogli di stile, file JavaScript, immagini, font e altri elementi.
Ogni risorsa rappresenta una richiesta HTTP. Più richieste vengono effettuate, maggiore sarà il lavoro del browser e del server, con un possibile impatto sui tempi di caricamento della pagina.
Ridurre il numero delle richieste HTTP è uno degli interventi più efficaci per migliorare le prestazioni di un sito WordPress, soprattutto se sviluppato con molti plugin o con temi commerciali.
In questa guida vediamo alcune tecniche che utilizzo abitualmente durante lo sviluppo di siti WordPress custom.
1. Caricare CSS e JavaScript solo dove servono
Uno degli errori più comuni consiste nel caricare gli stessi file in tutte le pagine del sito, anche quando non vengono utilizzati.
Ad esempio, se una landing page utilizza un file CSS dedicato, è inutile scaricarlo anche nella pagina Contatti.
function custom_enqueue_assets() {
if ( is_page('landing-page') ) {
wp_enqueue_style(
'landing-style',
get_template_directory_uri() . '/css/landing.css',
array(),
'1.0'
);
}
}
add_action('wp_enqueue_scripts', 'custom_enqueue_assets');Lo stesso principio vale anche per JavaScript.
2. Eliminare CSS e JavaScript caricati dai plugin
Molti plugin caricano automaticamente i propri file in ogni pagina del sito.
Se utilizzi Contact Form 7 soltanto nella pagina Contatti, puoi evitare che venga caricato ovunque.
function remove_cf7_assets() {
if ( ! is_page('contatti') ) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'remove_cf7_assets', 99);Questa semplice modifica può eliminare due richieste HTTP da ogni pagina.
3. Utilizzare immagini SVG per le icone
Ogni icona caricata come immagine separata genera una richiesta HTTP.
Quando possibile conviene utilizzare:
- SVG inline
- Sprite SVG
- Bootstrap Icons
- icone in formato SVG incorporate direttamente nell’HTML
In questo modo il browser non dovrà scaricare decine di piccoli file.
4. Evitare librerie non utilizzate
Molti temi includono automaticamente:
- Font Awesome completo
- Animate.css
- Slick Slider
- Owl Carousel
- librerie JavaScript inutilizzate
Se il progetto utilizza soltanto poche icone o un solo slider, conviene caricare esclusivamente ciò che serve.
Nel tempo questa scelta riduce sensibilmente il numero delle richieste HTTP.
5. Ospitare i Google Fonts in locale
Richiamare i font direttamente dai server Google significa aggiungere ulteriori richieste esterne.
Una soluzione migliore consiste nello scaricare i file .woff2 e servirli direttamente dal proprio hosting.
@font-face {
font-family: "Inter";
src: url("../fonts/inter-regular.woff2") format("woff2");
font-display: swap;
}In questo modo si riducono le connessioni verso domini esterni e si migliora anche la privacy.
6. Eliminare gli script inutilizzati di WordPress
WordPress carica automaticamente alcune funzionalità che non sempre risultano necessarie.
Tra queste troviamo:
- Emoji
- Embeds
- Dashicons nel frontend
- jQuery Migrate (quando possibile)
Ad esempio, per rimuovere le Emoji:
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');Sono piccoli interventi, ma contribuiscono a ridurre il numero di file caricati.
7. Unire i file CSS quando ha senso
Molti temi generano numerosi file CSS:
- style.css
- responsive.css
- animations.css
- typography.css
- buttons.css
- forms.css
In alcuni casi è preferibile raggruppare questi file in un unico foglio di stile.
Con HTTP/2 e HTTP/3 questo aspetto è meno determinante rispetto al passato, ma evitare decine di file molto piccoli continua ad essere una buona pratica.
8. Ottimizzare le immagini
Ogni immagine rappresenta una richiesta HTTP.
Per questo motivo è consigliabile:
- eliminare immagini decorative inutili;
- utilizzare immagini responsive (
srcset); - preferire il formato WebP o AVIF;
- definire sempre
widtheheight; - applicare il lazy loading alle immagini fuori dallo schermo.
9. Evitare plugin che duplicano funzionalità
Non è raro trovare siti WordPress con plugin differenti che svolgono compiti molto simili.
Ad esempio:
- due plugin per gli slider;
- due plugin SEO;
- più plugin per popup;
- diversi plugin dedicati alla cache.
Ogni plugin aggiunge generalmente nuovi file CSS e JavaScript, aumentando il numero complessivo delle richieste HTTP.
Come verificare il numero di richieste HTTP
Per controllare quante richieste effettua una pagina puoi utilizzare gli strumenti integrati del browser:
- Apri la pagina da analizzare.
- Premi F12 e accedi agli Strumenti per sviluppatori.
- Vai nella scheda Network.
- Ricarica la pagina.
Troverai l’elenco completo delle richieste HTTP, con informazioni sul tipo di risorsa, il tempo di caricamento e il peso di ogni file. Questo è uno dei metodi più efficaci per individuare script, fogli di stile o immagini che possono essere ottimizzati.
Conclusione
Ridurre le richieste HTTP non significa semplicemente ottenere un punteggio migliore su PageSpeed Insights. Significa soprattutto realizzare un sito WordPress più efficiente, con meno codice superfluo e un caricamento più rapido per gli utenti.
Nella mia attività di sviluppo preferisco creare temi WordPress custom, caricando solo le risorse realmente necessarie in ogni pagina. Questo approccio permette di mantenere il codice pulito, migliorare le prestazioni e semplificare la manutenzione nel tempo.