Pulisci la sezione HEAD del tema WordPress e i file JS e CSS non necessari

Pubblicato: 2018-09-04

Gli annunci core di WordPress contengono molto codice nella sezione principale HTML del sito head che tu lo voglia o meno. Quel codice è tutt'altro che inutile e serve a uno scopo sulla maggior parte dei siti. Tuttavia, se sei un fanatico del codice pulito o usi WordPress per alimentare un SaaS, ti consigliamo di ripulire l'HTML. Come per la maggior parte delle cose in WP, si tratta solo di rimuovere alcune azioni e filtri.

#WordPress è un'ottima piattaforma per creare siti #SaaS. Ma prima di farlo richiede un po' di pulizia.

CLICCA PER TWEET

Perché dovrei rimuovere quei tag nei file HEAD, CSS o JS?

Ci sono un paio di ragioni. Ad alcune persone piace mantenere il codice e i siti il più ordinati possibile. Perché avere una riga di codice in HTML se sai di non averne bisogno e sai come rimuoverla. Nessuna ragione che cosa così mai. Lo stesso vale per i file CSS e JS aggiuntivi. Se non stai usando emoji sul tuo sito, perché dovresti includere quel JS in ogni pagina?

Poi c'è la sicurezza. Ci sono alcuni pezzi di HTML che WordPress aggiunge automaticamente per mostrare gli URL che sono stati sfruttati in passato. Devo sottolineare che questi URL (in particolare l'endpoint XML RPC) non sono un segreto. Dovrebbero essere pubblici. Ma cambiarli in qualcosa di personalizzato e nasconderli è una pratica nota. In tal caso, è ovvio che non vuoi quegli URL nel tuo HTML.

La velocità è anche un motivo valido per ripulire l'HTML. Anche se devo dire che non sono sicuro di quanto guadagnerai rimuovendo alcune centinaia di caratteri dall'HTML, è un passo nella giusta direzione. L'eliminazione dei file JS e CSS non necessari ti farà risparmiare alcune richieste HTTP, ed è qualcosa su cui dovresti concentrare la tua ottimizzazione. Tidy Repo ha recentemente testato più di 100 temi WordPress per la velocità e il numero di richieste ha un impatto significativo sulla velocità complessiva del sito.

Avere un codice HTML pulito ti assicura di sapere cosa sta succedendo sul tuo sito ed è un ottimo inizio per ottimizzare la velocità del sito.

Ultimo, ma non meno importante, motivo e motivo per cui abbiamo questo codice a portata di mano sono i SaaSe basati su WordPress. Quando crei un SaaS, vuoi il controllo completo di ciò che è nel tuo HTML e la maggior parte delle cose che WP aggiunge all'HTML da solo non sono qualcosa che utilizzerai. Quindi, per il bene di tutti i motivi sopra indicati, puliamo le cose il più possibile. Questo ci offre un'ottima piattaforma snella su cui creare soluzioni personalizzate, pur mantenendo il 99% delle funzionalità principali di WP utilizzate per alimentare il SaaS.

Posso rimuovere in sicurezza queste cose? Non servono a uno scopo?

Sì, servono a uno scopo, ma solo in determinate situazioni. In un sito Web "medio" alcuni tag di link aggiuntivi nell'intestazione non sono un problema e facilitano tutte determinate operazioni e integrazioni. Ma non sono cruciali per il funzionamento di nessun sito e certamente non per un SaaS.

Puliamo un po' di codice

Puoi testare il codice qui sotto con qualsiasi tema. L'impostazione predefinita 2017 andrà bene. Tuttavia, se stai utilizzando temi WordPress "normali" (e alcuni plug-in in più), non puoi mai sapere chi ha aggiunto il codice: core WP, tema o un plug-in. Ti suggerisco di ripristinare il tuo sito per rimuovere tutti i plug-in e quindi utilizzare un tema che contiene solo wp_head() e wp_footer() . Ecco come appare index.php ed ecco l'intero tema di test che puoi utilizzare per il test.

<!DOCTYPE html>
<html>
<head>
  <?php
    wp_head();
  ?>
</head>
<body>
  <h1>The Most Basic WP Theme</h1>
  <?php
    wp_footer();
  ?>
</body>
</html>

Se attivi il nostro tema di test e apri il sorgente in prima pagina, noterai molto più codice di quanto sia visibile in index.php sopra. Questo è ciò che ripuliremo. Inserisci il codice qui sotto nel functions.php del tema. Se non vuoi rimuovere/disabilitare una funzione, commenta la riga che la menziona.

add_action('after_setup_theme', 'cleanup');

function cleanup() {
  remove_action('wp_head', 'rsd_link');
  remove_action('wp_head', 'wp_generator');
  remove_action('wp_head', 'feed_links', 2); 
  remove_action('wp_head', 'feed_links_extra', 3);
  remove_action('wp_head', 'index_rel_link');
  remove_action('wp_head', 'wlwmanifest_link');
  remove_action('wp_head', 'start_post_rel_link', 10, 0);
  remove_action('wp_head', 'parent_post_rel_link', 10, 0);
  remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);
  remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
  remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_head', 'rel_canonical');
  remove_action('wp_head', 'rel_alternate');
  remove_action('wp_head', 'wp_oembed_add_discovery_links');
  remove_action('wp_head', 'wp_oembed_add_host_js');
  remove_action('wp_head', 'rest_output_link_wp_head');
  
  remove_action('rest_api_init', 'wp_oembed_register_route');
  remove_action('wp_print_styles', 'print_emoji_styles');
  
  remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
  remove_filter('pre_oembed_result', 'wp_filter_pre_oembed_result', 10);
  
  add_filter('embed_oembed_discover', '__return_false');
  add_filter('show_admin_bar', '__return_false');
}

Cosa fa cosa

L'azione rsd_link è responsabile della visualizzazione del collegamento di rilevamento davvero semplice mentre wp_generator mostra la versione WP e viene rimossa praticamente da tutti i plug-in di sicurezza mai scritti per WP. Le due azioni feed_links aggiungono vari collegamenti a diversi feed RSS. Varie azioni _rel_link aggiungono collegamenti ai post in modo che possano essere più accessibili e più facilmente trovabili da vari servizi. A meno che tu non stia usando Windows Live Writer, non hai davvero bisogno dell'azione wlwmanifest_link . Non abbiamo bisogno di amojis, quindi print_emoji_detection_script può andare, e lo stesso vale per vari collegamenti oembed incluso il supporto per oembed nell'API REST. La rimozione dell'azione oembed_dataparse assicurerà che WP non rovini i collegamenti nei tuoi post e non li trasformi in rich media tramite oembed. L'ultimo filtro show_admin_bar impedirà la visualizzazione della barra di amministrazione di WP sul tuo front-end indipendentemente dalle impostazioni per account.

Ci sono solo alcune cose in #WordPress che non possono essere modificate con azioni e filtri. Per fortuna, il controllo dei contenuti HEAD non è uno di questi.

CLICCA PER TWEET

La flessibilità di WordPress è ottima

Molti articoli sono in giro con titoli come "Come rimuovere la posta indesiderata dall'intestazione di WP". Non è spazzatura. È roba che dà un grande potere a WordPress fin da subito. Molte persone lo apprezzano e non devono passare ore a sistemare le cose. D'altra parte, pulire è solo questione di rimuovere alcune azioni. Hai il pieno controllo su ciò che viene inserito nel tuo HTML e puoi facilmente utilizzare WordPress per alimentare siti senza contenuto come SaaSes.