Vill du komprimera dina CSS-, HTML- och javascript-filer på WordPress?
När du komprimerar webbplatsens CSS-, HTML- och Javascript-filer kan du spara värdefull tid på webbplatsens laddningshastighet. Nu talar vi inte om att halvera din sidhastighetshalva eller något, men när det gäller din webbplatshastighet räknas lite.
Laddningshastigheten på din webbplats är inte bara viktig för nya besökare utan också för sökmotorrankningar.
Uttrycket "minifyI programmeringsspråket beskrivs processen att ta bort onödiga tecken från källkoden. Dessa karaktärer inkluderar mellanslag, radbrytningar, les commentaires och blockera avgränsare som är användbara för oss människor men meningslösa för maskiner.
Vi minifierar en webbplats filer som innehåller CSS, HTML och JavaScript-kod så att din webbläsare kan läsa dem snabbare.
Läs också vår artikel om 10 Wordpress plugins för att förbättra hastigheten på din blogg
Här är ett exempel på CSS-minifiering.
CSS före minifiering
/ * Ett exempel CSS-fil ---------------------------------- * / .user-profil-kort { marginal: 0px; bakgrund: #33E43} .user-profile-description {border: 0; position: absolut; bredd: auto; marginal-topp: 20px; }
CSS efter minifiering
.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}
Uppenbarligen är detta bara ett litet exempel med ett CSS-kodavsnitt, men du kan föreställa dig hur mycket utrymme det skulle spara när du krymper tusentals rader kod.
Hur ökar du tiden på din WordPress-blogg? Ta reda på det genom att läsa den här artikeln.
Så om du vill göra det manuellt kan du tekniskt. Men du kommer att löpa en hög risk för fel och slösa bort din dyrbara tid i onödan!
Följ dessa tips och använd verktygen till ditt förfogande.
Några verktyg för att utföra komprimeringen
Lyckligtvis behöver du inte nödvändigtvis vara utvecklare eller känna till något av programmeringsspråken för att minska dina webbplatsfilsstorlekar. Minifiering har blivit en vanlig praxis i webbdesignvärlden. Så du bör inte bli förvånad över att det finns många underbara (och gratis) verktyg där ute för att göra jobbet åt dig.
Se även vår 6 WordPress-plugins för att blåsa nytt liv i dina artiklar
Här är en lista över användbara verktyg för att komma igång. Eftersom många av dessa kan minimera flera kodtyper har jag inkluderat kodtypsalternativen inom parentes.
-
- cssminifier.com et javascript-minifier.com (CSS och JS) - Dessa två minifiers av Andrew Chilton är lätta att använda. Du behöver bara klistra in din kod och klicka sedan på knappen Minify för att visa den komprimerade koden. Du kan till och med ladda ner utgångskoden som en fil för enkelhets skull.
- htmlcompressor.com (HTML, CSS & JS) - Det här komprimerings- / minifieringsverktyget online stöder HTML-, CSS- och JS-kodtyper. Det stöder även olika kombinationer av kodtyper som CSS + PHP och JavaScript + PHP. Och du kan även kontrollera den komprimerade koden för fel.
-
- csscompressor.net (Endast CSS) - Denna online CSS-kompressor är snabb, enkel och gratis att använda.
-
- jscompress.com (Endast JS) - Detta JavaScript-komprimeringsverktyg låter dig komprimera JavaScript-kod genom att kopiera och klistra in, men du kan också ladda ner flera JavaScript-filer åt gången. Detta är perfekt för att kombinera JavaScript-filer i en enda fil för bättre sidhämtningshastighet.
- Dan's Tools - Dan's Tools föreslå un Minifiera CSS och att begränsa JavaScript . Båda verktygen har ett riktigt rent, lättanvänt användargränssnitt. De erbjuder inga avancerade alternativ, men de är bra för vanliga minifieringsändamål.
-
- refresh-sf.com (HTML, CSS och JS) - Den här kompressorn minskar JavaScript-, CSS- och HTML-kodtyper. Den innehåller också alla komprimeringsalternativ för varje typ av kod om du behöver dem.
- Closure Compiler (Endast JS) - Closure Compiler är en del av Förslutningsverktyg lutnings~~POS=TRUNC , en uppsättning verktyg från Google Developers. Det låter dig förminska ditt JavaScript tillsammans med andra användbara optimeringar. Du kan använda din Javascript-kod genom att ange URL-adressen till js-filplatsen och sedan välja hur du vill att koden ska optimeras och formateras.
Till exempel väljer du att optimera din kod för att bara ta bort de tomma ämnen om du vill. När du har klickat på kompileringsknappen kommer den att minska koden (eller kompilera den) åt dig.
-
- minifycode.com (HTML, CSS och JS) - Denna webbplats erbjuder minifiers för JavaScript , CSS et html med ett enkelt och rent användargränssnitt som komprimerar din kod med ett enda klick. Det erbjuder också ett "skönhetsmedel" -verktyg för att dekomprimera den förminskade koden för att göra den mer läsbar (motsatsen till minifiering).
Om du letar efter offlineverktyg för att minimera din CSS eller JavaScript HTML lokalt, här är några alternativ:
- phpied.com/cssmin-js/ (Endast CSS)
- yui.github.io/yuicompressor (JS och CSS)
Hur du minskar storleken på din HTML, CSS och JavaScript med ett onlineverktyg
Många av dessa onlineverktyg har en liknande process som involverar följande steg:
- Klistra in din källkod eller ladda ner källkodfilen.
- Optimera inställningarna för en specifik utgång (om alternativ är tillgängliga)
- Klicka på en knapp för att komprimera koden.
- Kopiera det minifierade kodresultatet eller ladda ner den minifierade kodfilen.
I det här exemplet kommer jag att använda minify-verktygen från minifycode.com.
Se även: Hur man lägger till en CSS-kod säkert på Wordpress genom att konsultera den här länken.
Sök först CSS-filen (vanligtvis kallad style.css) i dina webbplatsfiler och öppna den med en sidredigerare. Kopiera sedan all CSS-kod till urklippet.
gå till minifycode.com och klicka på fliken CSS minifier. Klistra sedan in CSS-koden i inmatningsrutan och klicka på knappen Minifiera CSS.
När den nya minifierade koden har genererats kopierar du den.
Gå sedan tillbaka till webbplatsens CSS-fil och ersätt koden med den nya förenklade versionen.
Det är allt!
Upprepa samma process för att också minska JavaScript och HTML-fil (er) på din webbplats.
Hur man minimerar HTML, CSS och JavaScript i WordPress med hjälp av plugins
Det enklaste sättet att hålla din HTML, CSS och JavaScript på ett minimum i WordPress är att använda ett plugin. Detta låter dig automatiskt optimera dina WordPress-webbplatsfiler för att minska sidladdningstiden med bara några få knappklick.
Det finns många plugins som kommer att få jobbet gjort, men jag kommer kort att nämna några exempel.
Autoptimera (GRATIS)
Autoptimize är förmodligen Wordpress plugin av de mest populära minifieringarna. Det är populärt eftersom det är lätt att använda och packat med kraftfulla funktioner. Det kan bunta (kombinera skript), förminska och cachelagra din kod. Som en bonus har du ytterligare alternativ för att optimera Google Fonts, bilder etc.
För att använda Autoptimize kan du ladda ner, installera och aktivera plug-in från WordPress-instrumentpanelen under Plugin> Lägg till nytt.
För mer information, se vår guide om: Hur man installerar en plugin i Wordpress
När plugin är aktiverat, gå till Inställningar> Automatisk optimering. Kontrollera sedan koden du vill optimera (HTML, CSS och / eller JavaScript) under fliken Huvudparametrar och klicka på Espara ändringar.
Du kan också klicka på knappen Visa avancerade inställningar högst upp på sidan för att ytterligare anpassa din kodoptimering.
Det är mer eller mindre det! Ganska enkelt och kraftfullt.
W3 Total Cache (GRATIS)
W3 Total Cache är ett utmärkt cache-plugin som erbjuder möjligheten att minimera dina HTML-, JS- och CSS-filer.
WP: s snabbaste cache (GRATIS)
WP Snabbaste Cache - Det här pluginet Wordpress caching är extremt populärt med höga recensioner. Den utför olika prestandaoptimeringar, inklusive att kombinera och reducera din HTML CSS och JavaScript för bättre prestanda.
Läs också vår artikel om 8 Wordpress plugins för att lägga till en chatt på din blogg
När plugin är installerat klickar du bara på fliken WP Snabbaste Cache i WordPress-sidofältet. Under fliken Inställningar, hittar du alternativ för att kombinera och minska HTML- och CSS-filer. Även om minifiering av JavaScript bara är tillgänglig i proversionen.
För att sammanfatta
Om du vill göra din blogg snabbare och ha bättre prestanda måste du minska storleken på dina HTML-, CSS- och JavaScript-filer. Med alla tillgängliga onlineverktyg kan du enkelt dölja koden på vilken webbplats som helst.
9 WordPress plugins för att dölja innehållet i din blogg att upptäcka absolut
För dig som använder WordPress har du till ditt förfogande kraftfulla plugins för att minifiera dessa filer automatiskt med några klick.
Upptäck också några premium WordPress-plugins
Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.
Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.
1. 404 Error Page Omdirigera till hemsida eller anpassad sida
Här är ett av de bästa sätten att enkelt lägga till en 404-felsida som kommer att omdirigera besökaren till hemsidan eller den personliga sidan efter aktiveringen av detta plugin. WordPress premium.
Alla 404-felsidor kommer att omdirigeras till hemsidan eller till en anpassad URL. Genom att använda detta Wordpress plugin, tillåter du Google att minska sidrankningen på din webbplats om den har många 404-felsidor.
Upptäck också Hur man fixar 413-fel på WordPress
Ce Wordpress plugin gör inte bara omdirigering utan det kan också vara en lämplig lösning för att förbättra rankningen av din webbplats i sökmotorernas resultat.
Ladda ner | demo | webbhotell
2. Borlabs Cache
WordPress är en plattform som drivs av en databas som genererar innehåll dynamiskt. Ju mer innehåll och plugins du har, desto fler databasfrågor körs. Detta kan bromsa prestandan på din webbplats, särskilt när din databas finns på en annan server.
WordPress Borlabs Cache-plugin sparar dynamiskt genererat innehåll som en statisk fil i ditt serverminne. När sidan begärs laddas denna statiska fil och skickas till besökaren, vilket är betydligt snabbare än vanliga databasfrågor. Men det är inte allt.
Se även vår 5 Wordpress plugins för att rensa din webbplatsdatabas
Dina sidor innehåller mycket onödigt vitt utrymme eller HTML-kommentarer, vilket ökar den totala sidstorleken. Borlabs Cache tar bort alla och använder GZIP för att komprimera dina sidor.
Upptäck Så här visar alla dina Wordpress publikationer om en enda sida
Många plugins har sina egna JavaScript- och CSS-filer, vilket resulterar i fler förfrågningar på din server. Borlabs Cache kombinerar alla dessa JavaScript- och CSS-filer så att besökaren i bästa fall bara behöver ladda en JavaScript-fil och en CSS-fil.
Ladda ner | demo | webbhotell
3. Flerspråkig Press
Multilingual Press arbetar med en multisite-installation av WordPress och låter dig länka översättningar. Insticksprogrammet kommer med 174 språk inbyggda i språkhanteraren, och det stöder ett obegränsat antal webbplatser, så du kan skapa och länka så många översättningar du vill.
Detta är bra för SEO eftersom detta gör att du kan behålla dina språk på separata inlägg och sidor, och om du någonsin bestämmer dig för att använda en annan översättning av plugin-programmet förblir ditt innehåll intakt (även efter att du har inaktiverat eller tagit bort plugin-programmet Multilingual Press). Dessutom kan du lägga till en översättnings widget för att enkelt växla mellan översättningar.
Upptäck Hur man lägger till ett kodavsnitt med Gutenberg på WordPress
Multilingual Press är ett utmärkt gratis alternativ för att lägga till översättningar till din WordPress-webbplats via multisite. Om du dessutom upptäcker att du behöver fler alternativ kan du välja pro-versionen som kostar 75 $.
Ladda ner | demo | webbhotell
Andra rekommenderade resurser
Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.
- Hur du lägger till en bildtext till en bild på Gutenberg
- 6 Wordpress plugins för att krydda upp dina sidebars
- 10 WordPress-plugins för att lägga till en nedladdningshanterare
- Vad man ska förstå DDoS-attacker på WordPress
È möjlig användning av JS-kompressor https://www.jsonformatting.com/js-minify/