Minify / Combine WordPress CSS + Javascript Files = Hurtigere websted

En af de bedste ting, vi lærte, mens vi undersøgte vores artikel om hvordan man får Joomla-webstedet til at indlæse hurtigt (1.29 sekunder for at være præcis), opdagede vi en stor perle af et værktøj. 

Som mange mennesker gør, når de stræber efter at få et websted til at indlæse hurtigere, henviser de til Webstedet til Google PageSpeed-anbefalingerog med rette, for hvis Google afgiver en erklæring, er det normalt værd at lytte til. Imidlertid er det nogle gange ret rodet at foretage alle optimeringer, og du har muligvis ikke evnerne til at udføre disse ændringer.

Som du måske ved, er der en masse optimeringer, når du gør dit WordPress-websted hurtigere, du skal gøre. En af dem er at vide, hvordan man bruger browsercaching korrekt i WordPress, noget som CollectiveRay har en god artikel om her.  

Men det er ikke nær nok, hvis CSS- og Javascript-filerne er ret store. Det er, hvad minifikation handler om. 

Hvad er minifikation? (og hvordan det kan gavne dit websted)

Minificering er funktionen ved at tage et stykke kodning og fjerne tegn fra det (såsom mellemrum, linjeskift, faner og andet), der ikke formidler nogen betydning, undtagen for at gøre teksten mere læselig. Minificerede WordPress-filer udfører på samme måde som den originale kode, med den eneste forskel, at de fylder lidt less plads, fordi de fjerner ekstra information. Af denne grund bliver filen mindre at downloade, hvilket resulterer i et generelt hurtigere websted.

Minificering er særlig vigtig og nyttig til scripts (såsom Javascript-filer), CSS-typografiark og andre lignende webstedskomponenter.

Læs mere: Sådan ansættes (GREAT) Javascript-udviklere - Top 5 websteder, klik her - https://www.collectiveray.com/hire-javascript-developer

Den primære årsag til dette og fordelene ved dit websted er:

• Reducer indlæsningstider og gør dit websted generelt hurtigere. I betragtning af at de fleste websteder bruger flere scripts og stylesheet-filer, hvilket resulterer i MASSE ekstra plads. Mens du måske tror, ​​at fjernelse af mellemrum ikke vil resultere i mange ændringer, kan den komplette minificeringsproces af alle filerne i en WordPress-installation tilføje en betydelig fordel.
• Tilsløring af koden fra afslappede læsere. Mens den resulterende minificering ikke skjuler dit websteds kode (dvs. dette er forskelligt fra kodeforblændelse), men det gør det ganske sværere for afslappede brugere at forstå, hvis det er noget, der vedrører dig. 

Mens minifiering af din kode er usandsynligt, at der oprettes en kæmpe forskel på dit websteds indlæsningstider, set som en del af en komplet optimeringsstrategi, ville det være en af ​​de mange ting, du skal gøre. Det kan reducere din side indlæsningstider med et par procentpoint, hvilket gør det til en god taktik at implementere ikke andetless.

Hvad sker der under minify-processen?

I det væsentlige går minify-processen gennem sådanne tekstfiler og fjerner alt, hvad der kun er beregnet til konsum, for når alt kommer til alt, maskinen, der analyserer filen, er ikke filen, der skal læses af mennesker. WordPress minify-processen fjerner alle ting som ekstra hvidt mellemrum (mellemrum, ny linjer, faner), kommentarer eller enhver anden tekst, der øger filens størrelse uden at mindske "semantikken" i filen til browseren. Betydningen er der stadig, filerne er bare mindre.

For eksempel er dette, hvordan en normal CSS-fil vil se ud:

krop {
margen: 30 pixel;
padding: 30px;
farve: #FFFFFF;
baggrund: # f7f7f7;
}
h1 {
font-size: 12px;
farve # 222222;
margin-bottom: 5px;
}

Mens den minificerede version af denne kode ser sådan ud:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Du kan se, at tekstinformation er nøjagtig den samme, den er bare fjernet af ting, der er der for læsbarhedsformål. Det samme koncept gælder for Javascript-filer.

Slutresultatet af at bruge plugins eller midler til at minificere Javascript WordPress ville være, at HTML-output sammen med CSS-filer og JS-filer, der bruges af dit websted, og dets plugins ville se sådan ud:

Selvom dette kan se ud som en flok affald, er faktisk hele betydningen der stadig - det er netop blevet "minificeret" for at fjerne unødvendige ting, der er oppustet i størrelsen.

Der er masser af plugins, der kan hjælpe dig med at opnå denne proces, som nævnes nedenfor.

Miniser Javascript WordPress

Processen til at minificere Javascript WordPress er ret ligetil. Du skal blot installere et af nedenstående plugins. Det kan også være en god idé at bemærke, at de vigtigste WordPress Javascript-filer allerede er minificeret som standard.

Faktisk, hvis du kigger på kildekoden på dit WordPress-websted, ser du .min.js-udvidelsen, der viser, at de faktiske filer allerede er minimeret.

Dette er ikke nødvendigvis tilfældet for tredjeparts plugins og temaer.

Det kan også være en god idé at tage det ekstra trin med at fjerne eventuelle ekstra plugins og generere scripts, som du muligvis ikke har brug for.

Hvis du er absolut fikseret med hensyn til ydeevne, kan du også vælge at oprette versioner af Javascript-filer, der KUN inkluderer det script, der bruges af dit websted. Se som standard, de fleste script-filer har ekstra kode, der er inkluderet "bare i tilfælde" det er nødvendigt.

Du ønsker måske at lære om hvordan man gør dette her.

Minimer CSS WordPress

Igen er processen med Minify CSS WordPress ligetil. Du kan bare installere et plugin, og dette udfører automatisk minificeringen af ​​dine CSS-filer. Mens de fleste af de centrale WordPress-filer har en minificeret version af CSS-filerne, gælder dette ikke nødvendigvis for alle plugins og temaer.

Endnu en gang vil vi også anbefale at udføre en CSS-kodedækningsøvelse for at fjerne overflødig CSS-kode, der simpelthen er dødvægt.

Vi nævner et antal plugins, der minimerer CSS WordPress i næste afsnit nedenfor. 

5 bedste WordPress Minify-plugins

Vi diskuterer både generiske produkter, der generelt bruges til at gøre dit websted hurtigere gennem minificering, og specifikke plugins, hvis eneste funktion er minify-processen.

1. WP Rocket

Dette er langt vores yndlings plugin.

Årsagen er enkel, dette er langt det bedste produkt, der kan udføre flere hastighedsoptimeringsopgaver på en virkelig enkel måde, men med et fremragende resultat af at gøre dit websted hurtigere, herunder udføre en minify af CSS- og Javascript WordPress-filer.

Virkelig og sandt er det bare en af ​​de ting, som dette plugin gør, men når du først har installeret det, vil du opdage, at du ikke behøver at gøre noget andet.

Som du kan se nedenfor, er denne minificering en af ​​de grundlæggende muligheder for optimering. Med det ser du, at der er sammenkædning, dette er en sekundær optimeringsproces, der opretter en fil ud af alle CSS- og JS-filerne (fordi dette også gør det hurtigere at downloade filerne)

Pluginet er ikke gratis, men prisen er meget billig til kun $ 49. I betragtning af den tid det sparer dig og resultatet af at få dit websted til at indlæse hurtigere, bogstaveligt talt på få minutter, vil vi varmt anbefale at vælge dette.

Vi installerer dette plugin på alle WordPress-websteder, vi opretter, simpelthen fordi det sparer os så meget optimeringstid.

Klik her for den laveste pris på WP Rocket

2. JCH Optimer

Her er et lille trick til at hjælpe dig rigtig meget - brug JCH Optimize - dette er et værktøj, der fungerer på flere platforme som WordPress, Joomla, Drupal og Magento.

Det fantastiske ved JCH Optimize er, at det implementerer et stort antal Google Page Speed og andre anbefalinger for at få dit websted til at indlæses så hurtigt som muligt.

Det er fantastisk, fordi det har brug for næsten nul konfiguration og intervention fra en bruger.

Hvis du leder efter en hurtig hostingtjeneste, skal du kigge på vores vært, vi har gennemgået dem fuldt ud her: https://www.collectiveray.com/inmotion-hosting-review

Og du behøver ikke at rode rundt med nogen kode, alt dette sker ved hjælp af pluginet - det bevarer al din originale kodning, så du vil ikke bryde noget ved at rode rundt. Normalt gør det også de optimeringer, der normalt er de sværeste at udføre. For at nævne nogle få er det dem, der gøres godt

• Kombinerer CSS-filer fra al din skabelon, moduler og plugins til en enkelt fil, hvilket reducerer antallet af anmodninger sendt til dit websted
• Kombinerer Javascript-filer, som normalt er meget svære at kombinere uden at bryde webstedet
• Lynlåser CSS og Javascript, så de bliver mindre, og overførselstiden reduceres
• Minimerer Javascript og CSS for at gøre det mere kompakt og reducere dets størrelse yderligere (reducerer ekstra hvidt mellemrum, kommentarer osv.)
• Tilføjer et DEFER-tag, således at din side indlæses først, og udfører Javascript, efter at siden er indlæst, hvilket gør webstedet hurtigere at indlæse. I betragtning af at denne specifikke implementering er afgørende for et hurtigt websted, har vi dækket dette udførligt her: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
• Opretter IMAGE Sprites - dette reducerer også antallet af anmodninger sendt til dit websted med et meget stort beløb og er en af ​​de sværeste optimeringer at opnå manuelt

Det giver dig også mulighed for at tilpasse nogle avancerede indstillinger, såsom at ekskludere bestemte filer for at sikre, at hvis nogen udvidelse ikke fungerer efter at have kørt den gennem JCH Optimize, fungerer dette alligevel.

PRO version, som fås til en sølle $ 29, giver dig adgang til flere andre optimeringsmuligheder såsom at inkludere inline CSS og Javascript og indlæse Javascript asynkront for ikke at blokere indlæsning af webstedet.

Tag mit ord for det, installer pluginet, aktiver det og tjek dine resultater før og efter. Hvis du ikke får en forbedring med et godt beløb, kom tilbage her og klag, men jeg er ret sikker på at du ikke kommer tilbage :)

Klik her for at downloade JCH Optimize

3. W3 Total Cache

Dette er et andet plugin, som du vil se, er et generisk stykke software, der laver en masse ting, der er relateret til at gøre WordPress hurtig, herunder minify af CSS-, JS- og HTML-filer.

Mens du finder ud af, at dette nævnes meget ofte, når det kommer til sådanne plugins, skal det bemærkes, at dette produkt absolut ikke er en god ide for folk, der ikke er tekniske.

Det har været kendt at skabe betydelige problemer, med nogle fejl tilbage, selv efter at softwaren er afinstalleret og slettet fra webstedet.

Selv kl CollectiveRay har prøvet at bruge dette plugin flere gange, men på dette tidspunkt og i den nuværende tilstand anbefaler vi ikke længere, at dette bruges til formindskelse eller til at gøre websteder hurtigere, unless du ved præcis, hvad du laver.

4. WP Super Minify

Dette plugin bruger Minimer PHP Framework og ved hjælp af det kombineres, formindskes og caches indbyggede JavaScript- og CSS-filer efter behov for at fremskynde sideindlæsning.

Ved at aktivere dette plugin, kilden til din HTML, integreret JavaScript og CSS er nu fjernet fra ekstra ting, hvilket resulterer i, at deres størrelse bliver mindre.

Hvad der adskiller sig fra andre plugins nævnt her er, at dette plugin KUN udfører minificeringsprocessen og ingen andre optimeringer, hvilket er et godt valg for dem, der kun ønsker at udføre denne funktion og intet andet af en eller anden grund.

5. Hurtig hastighedsminificering 

Mens der er mange andre WordPress minify-plugins, som vi kan anbefale, vil dette være den sidste, som vi nævner her. 

Fast Velocity-pluginet kombinerer alle CSS- og JavaScript-filer, så webserveren skal håndtere færre anmodninger. Samtidig minimerer den også filerne og opretter cachelagrede kopier for hurtigere indlæsningstider.

Dette plugin giver automatisk mulighed for at minimere din HTML, JavaScript og CSS, men dig kan deaktivere en eller flere af dem manuelt ved at gå ind i Indstillinger → Hurtig hastighedsmin fane.

Du kan vælge at ekskludere specifikke filer fra at blive minificeret, hvis et af dine plugins går i stykker, efter at du har aktiveret dette.

Indpakning op 

Mens minificeringsprocessen ikke er banebrydende, skal den implementeres som en af ​​flere opgaver for at gøre din WordPress hurtigere, og vi anbefaler stærkt, at du implementerer et af de ovennævnte produkter.

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/

David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.