Wilt u uw CSS-, HTML- en javascript-bestanden comprimeren op WordPress?

Wanneer u de CSS-, HTML- en Javascript-bestanden van uw website comprimeert, kunt u kostbare tijd besparen op de laadsnelheid van uw website. Nu hebben we het niet over het halveren van de laadsnelheid van uw pagina of zoiets, maar als het gaat om de snelheid van uw website, telt elk klein beetje.

De laadsnelheid van uw website is niet alleen belangrijk voor nieuwe bezoekers, maar ook voor de rankings in zoekmachines.

De termkleinerenIn programmeertaal beschrijft het proces van het verwijderen van onnodige tekens uit de broncode. Deze tekens bevatten spaties, regeleinden, de opmerkingen en blokkeer begrenzers die nuttig zijn voor ons mensen maar nutteloos voor machines.

We verkleinen de bestanden van een website die CSS-, HTML- en Javascript-code bevatten, zodat uw webbrowser ze sneller kan lezen.

Lees ook ons ​​artikel over 10 WordPress plugins om de snelheid van uw blog te verbeteren

Hier is een voorbeeld van CSS-minificatie.

CSS vóór de minificatie

/ * Een voorbeeld CSS-bestand ---------------------------------- * / .user-profile-card { margin: 0px; achtergrond: #33E43}. user-profile-description {border: 0; positie: absoluut; breedte: auto; margin-top: 20px; }

CSS na minificatie

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Dit is natuurlijk maar een klein voorbeeld met een CSS-fragment, maar je kunt je voorstellen hoeveel ruimte het zou besparen als je duizenden regels code verkleint. 

Hoe verhoog je de tijd die je aan je WordPress-blog besteedt? Ontdek het door dit artikel te raadplegen.

Dus als je het handmatig wilt doen, kan dat technisch gezien. Maar u loopt een groot risico op fouten en verspilt uw kostbare tijd onnodig!

Volg deze tips en gebruik de tools die tot uw beschikking staan.

Enkele hulpmiddelen om de compressie uit te voeren

Gelukkig hoeft u niet per se een ontwikkelaar te zijn of een van de programmeertalen te kennen om de bestandsgrootte van uw website te verkleinen. Minificatie is een gangbare praktijk geworden in de wereld van webdesign. Het zou je dus niet moeten verbazen dat er veel geweldige (en gratis) tools zijn om het werk voor je te doen.

Zie ook onze 6 WordPress-plug-ins om uw artikelen nieuw leven in te blazen

Hier is een lijst met handige tools om aan de slag te gaan. Omdat veel hiervan meerdere soorten code kunnen minimaliseren, heb ik de codetype-opties tussen haakjes geplaatst.

    • cssminifier.com et javascript-minifier.com (CSS en JS) - Deze twee minifiers van Andrew Chilton zijn gemakkelijk te gebruiken. U hoeft alleen maar uw code te plakken en vervolgens op de knop te klikken Kleineren om de gecomprimeerde code weer te geven. U kunt voor het gemak zelfs de afsluitcode als een bestand downloaden.
    • htmlcompressor.com (HTML, CSS en JS) - Deze online tool voor compressie / verkleining ondersteunt HTML-, CSS- en JS-codetypes. Het ondersteunt zelfs verschillende combinaties van codetypes zoals CSS + PHP en JavaScript + PHP. En u kunt zelfs de gecomprimeerde code op fouten controleren.
    • csscompressor.net (Alleen CSS) - Deze online CSS-compressor is snel, gemakkelijk en gratis te gebruiken.
    • jscompress.com (Alleen JS) - Met deze JavaScript-compressietool kunt u JavaScript-code comprimeren door te kopiëren en te plakken, maar u kunt ook meerdere JavaScript-bestanden tegelijk downloaden. Dit is ideaal voor het combineren van JavaScript-bestanden in een enkel bestand voor een betere laadsnelheid van pagina's.
    • Dan's Tools - Dan's Tools voorstellen un verklein CSS en verklein JavaScript . Beide tools hebben een echt schone, gebruiksvriendelijke gebruikersinterface. Ze bieden geen geavanceerde opties, maar ze zijn geweldig voor algemene minificatiedoeleinden.
    • refresh-sf.com (HTML, CSS en JS) - Deze compressor vermindert JavaScript-, CSS- en HTML-codetypes. Het bevat ook alle compressie-opties voor elk type code als je ze nodig hebt.
    • Sluiting Compiler (Alleen JS) - Closure Compiler is onderdeel van Sluitingstools , een reeks hulpprogramma's van Google Developers. Hiermee kunt u uw JavaScript verkleinen, samen met andere nuttige optimalisaties. U kunt uw Javascript-code gebruiken door de URL van de js-bestandslocatie in te voeren en vervolgens te kiezen hoe u de code wilt optimaliseren en opmaken. 

U kiest er bijvoorbeeld voor om uw code te optimaliseren om alleen de lege plekken te verwijderen als u dat wilt. Zodra u op de compileerknop heeft geklikt, wordt de code voor u verkleind (of gecompileerd).

    • minifycode.com (HTML, CSS en JS) - Deze website biedt minifiers voor JavaScript , CSS et HTML met een eenvoudige en overzichtelijke gebruikersinterface die uw code met één klik comprimeert. Het biedt ook een "verfraaiingstool" om de verkleinde code te decomprimeren om deze leesbaarder te maken (het tegenovergestelde van verkleining).

Als u op zoek bent naar offline tools om uw CSS of JavaScript HTML lokaal te minimaliseren, zijn hier enkele opties:

Hoe u de grootte van uw HTML, CSS en JavaScript kunt verkleinen met een online tool

Veel van deze online tools hebben een soortgelijk proces dat de volgende stappen omvat:

  • Plak uw broncode of download het broncodebestand. 
  • Instellingen optimaliseren voor een specifieke uitvoer (als opties beschikbaar zijn)
  • Klik op een knop om de code te comprimeren.
  • Kopieer het verkleinde coderesultaat of download het verkleinde codebestand.

Voor dit voorbeeld ga ik de minify-tools gebruiken van minifycode.com.

Zie ook: Hoe maak je een CSS-code veilig toevoegen WordPress door deze link te raadplegen.

Zoek eerst het CSS-bestand (gewoonlijk style.css genoemd) in uw websitebestanden en open het met een pagina-editor. Kopieer vervolgens alle CSS-code naar uw klembord.

comprimeer uw CSS-, HTML- en javascript-bestanden op WordPress

gaan naar minifycode.com en klik op het tabblad CSS-minifier. Plak vervolgens de CSS-code in het invoervak ​​en klik op de knop Verklein CSS.

minification css.jpg

Nadat de nieuwe geminimaliseerde code is gegenereerd, kopieert u deze.

kopieer een gecomprimeerde code.jpg

Ga dan terug naar het CSS-bestand van uw website en vervang de code door de nieuwe vereenvoudigde versie.

Dat is het!

Herhaal hetzelfde proces om ook de JavaScript- en HTML-bestanden van uw website te verkleinen.

Hoe HTML, CSS en JavaScript in WordPress te minimaliseren met behulp van plug-ins

De eenvoudigste manier om uw HTML, CSS en JavaScript in WordPress te minimaliseren, is door een plug-in te gebruiken. Hiermee kunt u uw WordPress-websitebestanden automatisch optimaliseren om de laadtijd van pagina's te verkorten met slechts een paar klikken op de knop.

Er zijn veel plug-ins die de klus zullen klaren, maar ik zal kort een paar voorbeelden noemen.

Automatisch optimaliseren (GRATIS)

autooptimize wp.png
Autoptimize is waarschijnlijk de WordPress Plugin van de meest populaire minify. Het is populair omdat het gemakkelijk te gebruiken is en boordevol krachtige functies zit. Het kan uw code bundelen (combineren), verkleinen en cachen. Als bonus heb je extra opties om Google Fonts, afbeeldingen, etc. te optimaliseren.

Om Autoptimize te gebruiken, kunt u de plug-in downloaden, installeren en activeren vanaf het WordPress-dashboard onder Plugin> Nieuwe toevoegen.

Zie onze gids voor meer informatie over:  Hoe maak je een plugin in WordPress installeren

autoptimize.jpg

Ga naar zodra de plug-in is geactiveerd Instellingen> Automatische optimalisatie. Vink vervolgens onder het tabblad Hoofdparameters de code aan die u wilt optimaliseren (HTML, CSS en / of JavaScript) en klik op Ewijzigingen opslaan.

optimalisatie css.jpg

U kunt ook op de knop klikken Toon geavanceerde instellingen bovenaan de pagina om uw code-optimalisatie verder aan te passen.

css opties advanced.jpg

Het is min of meer dat! Heel eenvoudig en krachtig.

W3 Total Cache (GRATIS)

v3 totale cache.png
W3 Total Cache is een uitstekende caching-plug-in die de mogelijkheid biedt om uw HTML-, JS- en CSS-bestanden te minimaliseren.

comprimeer CSS-, HTML- en javascript-bestanden

WP snelste cache (GRATIS)

wp snelste cache.png
WP Snelste Cache - Deze plug-in WordPress caching is enorm populair bij hoge recensies. Het voert verschillende prestatie-optimalisaties uit, waaronder het combineren en verminderen van uw HTML CSS en JavaScript voor betere prestaties.

Lees ook ons ​​artikel over 8 WordPress plugins om een ​​live chat toe te voegen aan je blog

Zodra de plug-in is geïnstalleerd, klikt u eenvoudig op het tabblad WP Snelste Cache in de zijbalk van het WordPress-dashboard. Onder het tabblad Instellingenvindt u opties voor het combineren en verkleinen van HTML- en CSS-bestanden. Hoewel het verkleinen van JavaScript alleen beschikbaar is in de pro-versie.

comprimeer CSS-, HTML- en javascript-bestanden

Samenvatten

Als u uw blog sneller en beter wilt laten presteren, moet u de grootte van uw HTML-, CSS- en JavaScript-bestanden verkleinen. Met alle beschikbare online tools kunt u eenvoudig de code van elke website verkleinen. 

9 WordPress plug-ins om de inhoud van uw blog te verbergen absoluut te ontdekken

Voor degenen die WordPress gebruiken, heb je krachtige plug-ins tot je beschikking om deze bestanden automatisch met een paar klikken te verkleinen.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. 404 Foutpagina Doorverwijzing naar startpagina of aangepaste pagina

Hier is een van de beste manieren om eenvoudig een 404-foutpagina toe te voegen die de bezoeker na het activeren van deze plug-in naar de startpagina of de gepersonaliseerde pagina zal leiden. WordPress premium.

404-foutpagina omleiden naar startpagina of aangepaste pagina. wordpress plug-in

Alle 404-foutpagina's worden doorgestuurd naar de startpagina of naar een aangepaste URL. Door dit te gebruiken WordPress Plugin, staat u Google toe de pagerank van uw website te verlagen als deze veel 404-foutpagina's heeft.

Ontdek ook Hoe 413 fout op WordPress te repareren

Ce WordPress Plugin doet niet alleen aan omleiding, maar kan ook een geschikte oplossing zijn om de ranking van uw website in de zoekresultaten van zoekmachines te verbeteren.

Downloaden | demonstratie | web hosting

2. Borlabs Cache

WordPress is een platform aangedreven door een database die dynamisch inhoud genereert. Hoe meer inhoud en plug-ins u hebt, hoe meer databasequery's worden uitgevoerd. Dit kan de prestaties van uw website vertragen, vooral wanneer uw database zich op een andere server bevindt.

Borlabs cache WordPress caching plugin

De WordPress Borlabs Cache-plug-in slaat dynamisch gegenereerde inhoud op als een statisch bestand op uw servergeheugen. Wanneer de pagina wordt opgevraagd, wordt dit statische bestand geladen en naar de bezoeker gestuurd, wat aanzienlijk sneller is dan de gebruikelijke databasequery's. Maar dat is nog niet alles.

Zie ook onze 5 WordPress plugins om uw websitedatabase op te schonen

Uw pagina's bevatten veel onnodige witruimte of HTML-opmerkingen, waardoor de algehele paginagrootte toeneemt. Borlabs Cache verwijdert ze allemaal en gebruikt GZIP om je pagina's te comprimeren.

Ontdek Hoe kunt u al uw WordPress publicaties op één pagina weergeven

Veel plug-ins hebben hun eigen JavaScript- en CSS-bestanden, wat resulteert in meer verzoeken op uw server. Borlabs Cache combineert al deze JavaScript- en CSS-bestanden, zodat uw bezoeker in het beste geval slechts één JavaScript-bestand en één CSS-bestand hoeft te laden.

Downloaden demonstratie | web hosting

3. Meertalige pers

Multilingual Press werkt met een multisite-installatie van WordPress en stelt u in staat om vertalingen te koppelen. De plug-in wordt geleverd met 174 talen ingebouwd in de taalmanager en ondersteunt een onbeperkt aantal websites, zodat u zoveel vertalingen kunt maken en koppelen als u wilt.

Meertalige plug-in voor persvertaling, WordPress-plug-in

Dit is goed voor de SEO omdat u hierdoor uw talen op afzonderlijke berichten en pagina's kunt behouden, en als u ooit besluit een andere vertaling van de plug-in te gebruiken, blijft uw inhoud intact (zelfs na het uitschakelen of verwijderen van de plug-in Meertalige pers). Daarnaast kunt u een vertalings widget toevoegen om eenvoudig te vertalen tussen vertalingen.

Ontdek Een codefragment toevoegen met Gutenberg op WordPress

Meertalige pers is een geweldige gratis optie voor het toevoegen van vertalingen aan uw WordPress-site via multisite. Als je bovendien merkt dat je meer opties nodig hebt, kun je kiezen voor de pro-versie die $ 75 kost.

Downloaden demonstratie web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

Conclusie