Si el vostre lloc de WordPress utilitza un tema de WordPress de pagament o un de popular del dipòsit oficial de temes de WordPress, és probable que el tema es desenvolupi per a diversos casos d'ús. I és possible que utilitzeu només un petit conjunt de totes les funcions disponibles al tema.
En aquest cas, el vostre lloc està carregant un munt de CSS no utilitzats que no són necessaris per dissenyar les pàgines del vostre lloc. Per exemple, el tema de WordPress que utilitzeu també pot tenir estils per a pàgines de WooCommerce, però si només esteu executant un bloc al vostre lloc de WordPress, no utilitzeu el CSS inclòs per a pàgines de WooCommerce al vostre lloc i, per tant, no s'utilitza. CSS als usuaris.
Si heu provat el vostre lloc web amb l'eina Google Pagespeed, probablement ja sabeu que el vostre lloc té problemes de CSS no utilitzats. En aquesta guia, us mostrarem com comprovar primer els CSS no utilitzats i, a continuació, utilitzar una eina gratuïta per eliminar els CSS no utilitzats del vostre lloc de WordPress.
Com comprovar els CSS no utilitzats
Les eines de desenvolupament de Google Chrome (la que veieu quan feu clic a l'opció "Inspeccionar" al menú contextual) té una funció de cobertura a la pestanya Fonts. Podeu utilitzar l'opció Cobertura per trobar CSS i JS no utilitzats que carregui el vostre lloc web.
- Obriu el vostre lloc web a Chrome a l'escriptori.
- Feu clic amb el botó dret a un espai buit del vostre lloc i seleccioneu Inspeccionar des del menú contextual.
- Feu clic a Fonts pestanya, premeu Ctrl + Maj + P per obrir una finestra d'ordres i, a continuació, escriviu cobertura i seleccioneu Comença a instrumentar la cobertura i torna a carregar la pàgina de les ordres disponibles.
- A la pestanya Cobertura, feu clic a Filtre d'URL camp i introduïu aquí el domini arrel del vostre lloc per mostrar només fitxers CSS/JS interns.
└ Comproveu el Bytes no utilitzats columna per veure el percentatge de dades que es carreguen en un fitxer CSS/JS del vostre tema.
- Feu clic a un fitxer CSS per veure el CSS no utilitzat (marcat amb barres vermelles) carregat pel vostre lloc. El CSS que s'està utilitzant a la pàgina actual es mostrarà amb barres verdes.
Un cop hàgiu analitzat tots els CSS no utilitzats que es carreguen al vostre lloc web, és hora d'eliminar-lo. Hi ha diverses eines gratuïtes disponibles per eliminar els CSS no utilitzats de les pàgines web. A continuació es mostra una de les eines populars que he provat i utilitzat en els meus propis projectes.
Utilitzeu PurifyCSS en línia per eliminar els CSS no utilitzats
Normalment, podeu trobar un complement per a gairebé tot a WordPress. Però per eliminar els CSS no utilitzats, malauradament, no hi ha cap connector disponible. Per tant, farem servir eines manuals no específiques de Wordpress per eliminar els CSS no utilitzats del vostre lloc.
PurifyCSS és el més eina amigable per a no desenvolupadors podeu trobar per fer front a CSS no utilitzat. L'eina té una interfície d'usuari senzilla per permetre als usuaris proporcionar l'URL del lloc web O el codi HTML i CSS. Per a WordPress, farem servir l'opció d'URL i proporcionarem enllaços a tot tipus de pàgines del vostre lloc per permetre que l'eina agafi CSS de tots i optimitzeu el CSS no utilitzat.
Aquí teniu una llista ràpida de pàgines que hauríeu d'introduir a l'eina:
- URL de la pàgina d'inici
- Diversos URL de pàgines de publicació de cada categoria del vostre lloc
└ Això és per garantir que s'inclou CSS per a tots els elements de publicació.
- Contacte, Sobre, Privadesa i tot tipus de pàgines diferents que podeu tenir al vostre lloc.
- Pàgina d'arxiu, pàgina de cerca, pàgines d'autor
- Pàgines de tipus de publicació personalitzades
Consell calent: Creeu una publicació o pàgina de "funcions" amb tots els elements temàtics que utilitzeu o pugueu utilitzar en el futur, com ara una taula, una galeria d'imatges, un codi, una llista prèvia, ordenades, desordenades, formularis, pestanyes, acordions, blocs de Gutenberg que utilitzeu generalment. , etc.
Utilitzeu aquesta URL de publicació de "funcions" a l'eina en línia PurifyCSS per assegurar-vos que s'inclogui CSS per als elements d'ús habitual.
Premeu el Neteja CSS un cop hàgiu afegit tots els tipus d'URL rellevants del vostre lloc a l'eina PurifyCSS Online.
Copieu el nou CSS generat per l'eina i utilitzeu-lo al vostre lloc. Assegura't còpia de seguretat del style.css original i altres fitxers CSS del vostre tema abans de substituir el nou CSS generat per PurifyCSS.
Consell: Podeu utilitzar l'editor de temes de WordPress integrat per editar els fitxers CSS del vostre tema, o bé podeu utilitzar un programa FTP/SFTP per connectar-vos al servidor i editar fitxers còmodament mitjançant un editor de bloc de notes.