Mens du kørte en hastighedstest, har du måske bemærket PageSpeed Insights- advarsel om fjernelse af ubrugt CSS. Vil du fjerne ubrugt CSS fra dit WordPress-websted for at få det til at indlæse hurtigere og få bedre præstationskarakterer?
Der er en masse CSS-kode, der tilføjes af WordPress-temaer og plugins, som du ikke har brug for. WordPress' ydeevne og brugeroplevelsen kan forbedres ved at fjerne ubrugt CSS-kode. I denne artikel demonstrerer vi, hvordan du nemt kan fjerne ubrugt CSS fra dit WordPress-websted uden at det går i stykker.
Fjern ubrugt CSS i WordPress ved hjælp af forskellige måder
Hvis du vil reducere mængden af ubrugt CSS på dit WordPress-websted, er der et par forskellige metoder, du kan prøve.
Selvom det ville være muligt at fjerne al unødvendig CSS i WordPress, ville det være en ret vanskelig opgave. Derudover kan det, som følge af den måde WordPress fungerer bag kulisserne, være svært for nogle brugere at finde og fjerne unødvendig CSS.
I så fald viser vi dig forskellige måder at fjerne ubrugt CSS på, og du kan vælge den metode, der passer bedst til dine behov.
Find dine største CSS-filer
For at se dine mest omfattende CSS-filer skal du sortere din dækningsrapport efter " brugsvisualisering" i Chrome Dev Tools . URL'er indeholder typisk navnet på det plugin, tema eller den tredjepartskode, der genererede filen. Som et resultat bliver det nu nemmere for dig at bestemme, hvad der skal optimeres.
Fjern ubrugt CSS med brugt CSS i en separat fil
Det er hurtigere at oprette en separat fil, da HTML-størrelsen ikke øges, og filen kan caches, i modsætning til inlining. Den indlæses også i en separat fil af LiteSpeed Caches CSS og FlyingPress. Derudover WP Rocket til scorer i stedet for besøgende, i modsætning til de fleste andre plugins, som bruger forskellige filer, fordi de er hurtigere.
Undgå plugins, der tilføjer CSS
Værktøjer som Query Monitor og WP Hive er gode, men de viser ikke altid, om et plugin tilføjer ekstra CSS/JS til frontend. Som følge heraf kan pluginets fulde effekt først observeres efter en ny test af dit websted efter tilføjelse af indhold til frontend. De mest almindelige syndere er gallerier, sliders, kontaktformularer, kommentarer, chat, kalendere og sidebygger-plugins relateret til design.
Brug et let tema + sidebygger.
Frontend'en er overbelastet med CSS, JavaScript og skrifttyper. Som et resultat er en langsom hjemmeside garanteret, når den kombineres med ekstra sidebygger-plugins som Elementor Pro og Ultimate Addons.
Aktivér CSS-optimeringer i sidebyggere
Blandt disse indstillinger er Elementors eksperimenter og Divis ydeevneindstillinger, som inkluderer flere muligheder for at reducere CSS-størrelsen (f.eks. forbedret indlæsning af aktiver og CSS i Elementor og dynamisk CSS i Divi). Generelt får du bedre resultater, hvis du aktiverer mere ydeevne.
Deaktiver ikoner, hvis du ikke bruger dem
Hvis du ikke bruger Elementor-ikoner, skal du slå dem fra. For Google Fonts + Font Awesome kan du gøre dette i Perfmatters eller Elementors dokumentation.
Fjern CSS i Asset Unloading-plugins
Med Perfmatters kan du deaktivere CSS/JS (eller hele plugins), hvor de ikke er nødvendige, fjerne ubrugt CSS og erstatte YouTube iframes med forhåndsvisningsbilleder. Den resterende ubrugte CSS kan gøres mere tilgængelig ved hjælp af alle disse metoder. CSS/JS-filer kan også deaktiveres med Asset CleanUp Plugin.
Lazy Load-baggrundsbilleder fundet i CSS
De fleste cache-plugins vil ikke lazyloade baggrundsbilleder, hvis de er pakket i en separat CSS-fil.
Hvis du derfor ønsker at lazy-loade baggrundsbilleder, skal du se dokumentationen til dit cache-plugin. FlyingPress leveres med en lazy-bg-hjælpeklasse, som du kan tilføje til den ekstra CSS-klasse, i modsætning til WP Rocket, som kræver inline HTML. En lazy-bg-hjælpeklasse kan tilføjes manuelt, eller Optimole har en løsning ved hjælp af CSS-selektorer.
Fjern Gutenberg CSS
Antag, at du kan fjerne Gutenberg-blokbiblioteket fra køen, hvis du ikke bruger Gutenberg-blokke. Brug kodestykker eller functions.php til at tilføje dette.
Kombinér CSS (eller ej)
CSS/JS-størrelsen bør ikke overstige 10 KB, hvis du kombinerer dem. I de fleste tilfælde bør CSS og JavaScript ikke kombineres, da det er næsten umuligt.
Deaktiver WooCommerce-stile
Som standard indlæser WooCommerce stilarter på tværs af dit websted. Hvis du kun bruger disse stilarter på e-handelssider, kan du deaktivere dem overalt. WooCommerce har dokumentation, men vi anbefaler at deaktivere WooCommerce Bloat, som har mange flere indstillinger til fjernelse af bloat.
Find flere lignende artikler på Seahawk Media .
