Sådan minimeres HTML, CSS og JavaScript ved hjælp af autoptimering af plugin

04.06.2020
HVORDAN 'Sådan minimeres HTML, CSS og JavaScript ved hjælp af autoptimering af plugin
0 6 мин.

Google og andre søgemaskiner giver værdi til dit websted, hvis det indlæses så hurtigt. Fordi ingen af ​​seerne har mange patienter til at vente længe med at se dit indhold, og du har bare 1,5 sekunder til at få deres opmærksomhed. Hvis dit websted tager for lang tid at åbne, mister du normalt dine seere. Så dette er vigtigt for at fremskynde dit websted. Der er flere måder, du kan optimere dit websted på. Men en af ​​de vigtigste dele er at Komprimer HTML, CSS og JavaScript.


Hvis du nogensinde har lavet en hastighedstest på Google PageSpeed eller GTmetrix, du ser sandsynligvis den mulighed.

Hvert websted, der indlæses med en masse filer, indeholder HTML, CSS og JavaScript. Og de fleste af filerne inkluderer en masse plads, kommentarer, blokeringsafgrænsere osv. Så det tager betydeligt ekstra tid at indlæse korrekt.

Dette afhænger også af temakvaliteten. For eksempel er en premium-temakvalitet altid bedre end et gratis tema. Premium-temaer er godt kodet og bygget af meget dygtige udviklere. Men alle temaer er ikke ens og har forskellige typer funktioner. Så ved at komprimere disse HTML-, CSS- og JavaScript-filer, kan du strategisk øge dit webstedshastighed og gøre dine besøgende glade.

Hvad er Minify, og hvorfor det er gavnligt?

minifikationen er et programmeringssprog, der fjerner alle unødvendige tegn fra kildekoden uden at ændre dens funktionalitet. Disse unødvendige tegn indeholder normalt “tegn på hvidt rum, nye linjetegn, kommentarer, og blokere afgrænsere ”. 

Før Minify og After Minify

De bruges til at tilføje læsbarheden til koden, men er ikke påkrævet for at den kan udføres. På denne måde reducerer det mængden af ​​kode, der skal overføres over nettet og gemmer din båndbredde. Så ved minificere HTML, CSS og JavaScript, kan du nemt fjerne de unødvendige tegn fra dit websted og markant øge dit websteds hastighed. 

Sådan minimeres HTML, CSS og JavaScript

Der er to måder, du kan Minificere HTML, CSS & JavaScript. Enten kan du gøre det ved at redigere din temakode, eller du kan bruge et WordPress-plugin, kaldet Autoptimize. I denne artikel viser vi dig begge processer omkring Sådan minimeres HTML, CSS og JavaScript.

For at kende den nøjagtige HTML-, CSS- eller JavaScript-fil, der forårsager problemet, skal du kontrollere den på ethvert webstedshastighedstestværktøj som Google PageSpeed-værktøj eller GTmetrix. Fordi ikke alle dine filer indeholder denne type unødvendige tegn.

Når du har kontrolleret dit webstedsresultat, får du det. Her er et billede nedenfor af mit websted, der overvejer fastsættelse af CSS og JavaScript.

Minifying Css, JavaScript

Det tager udgangspunkt i din temakvalitet. Så intet at bekymre sig, hvis du ser begge siges at Minify, og det er bedre at få et Premium-tema.

Der er nogle online-værktøjer, som du kan Minify HTML, CSS og JavaScript-kode. 

Inden du foretager nogen ændringer, skal du tage en sikkerhedskopi af den fil.

# 1 Komprimer kode:

Komprimer kodeværktøj

Komprimer kode er et alt i ét Minifying-værktøj. Det kan minimere dine JavaScript-, CSS- og HTML-koder. Alt hvad du behøver for at kopiere HTML- eller CSS- eller JavaScript-koden og indsætte den her. Klik derefter på Minify Mulighed. Dette værktøj Minimer automatisk din kode. Kopier derefter den Minificerede kode i den fil.

Du kan også Minificere din CSS og JavaScript-kode som HTML-kode med dette værktøj.

# 2 Willpeavy:

Willpeavy

Willpeavy er et andet godt værktøj til Komprimer HTML koder. Dette værktøj fungerer på samme måde som minify-kode. Det minimerer HTML og enhver CSS eller JS inkluderet i din markup. For at bruge dette værktøj skal du bare kopiere din kode her og klikke på Minify.

Komprimer ved hjælp af autoptimering af plugin

Autoptimize

Hvis du ikke er bekendt med sådan kodning, er det bedre at bruge et plugin og anbefales til begyndere. Så her kommer Autotimér plugin til WordPress brugere.

Autoptimér sammenkæder alle scripts og stilkoder og gør dem mindre, der indlæses så hurtigt. Det mindsker al HTML, CSS & Selve Javascript-koden og gør din side virkelig let. Med Minification tilføjer dette plugin udløbsoverskrifter og flytter stilarter til sidehovedet og kan flytte scripts til sidefoden.

Autotimér anbefalingsindstillinger

Du kan nemt gøre alt fra plugin-indstillinger. Efter aktivering af dette plugin skal du gå til Indstillinger> Autoptimize.  Klik på knappen “Vis avancerede indstillinger”.

I HTML skal du markere “Optimer HTML-kode” og “Gem HTML-kommentarer” for hurtigere ydelse.

Optimaliser HTML-indstillingerne automatisk

I JavaScript afsnit, aktiver “Optimer JavaScript-kode”. Du kan også aktivere “Tving JavaScript ind” for at indlæse JS tidligt og reducere risikoen for JS-fejl. Hvis din JS bryder scripts, kan du aktivere “Tilføj try-catch-indpakning”.
Autotimér JavaScript-indstillinger

I CSS afsnit, aktiver “Optimer CSS-kode”, “Også samlet inline CSS”. Du kan også aktivere “Inline and Defer CSS”, hvis du har minificeret CSS. Prøv dette værktøj til at minimere din CSS og indsæt den i boksen.

Autotimer CSS-indstillinger

Indtast dit CDN URL i feltet “CDN Base URL”. For eksempel ‘//cdn.example.com/’.

Og sidst skal du aktivere “Gem aggregeret script / css som statisk fil”. Men sørg for, at din webserver kan håndtere komprimering og udløb korrekt.

Optimaliser CDN-indstillingerne automatisk

Efter at have minimeret din kode, skal du ikke glemme at kontrollere dit websteds hastighed igen. Sammenlign det derefter med de tidligere resultater. Hvis dit websted får et problem eller ikke vises korrekt, kan du prøve at rydde det Cache

Konklusion

Minifying HTML, CSS og JS er fordelagtigt for dit websted. Det fjerner unødvendige tegn på din kode og gør dem mindre, der er browservenlige. På denne måde kan du forbedre dit websteds indlæsningshastighed.

Hvis denne tutorial hjælper med at Minify HTML, CSS og JavaScript, skal du dele denne artikel om Facebook, Twitter, Google+.

relaterede artikler,

  • Sådan udnyttes cache-browser på WordPress
  • Sådan optimeres WordPress-databasen ved hjælp af WP-sweep
  • 7 Bedste Image Optimizer til WordPress 2017
  • Sådan aktiveres Gzip-komprimering let i WordPress til hurtigere indlæsning
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector