Gå til hovedindhold

Sådan styrkes dit websteds ydeevne: Del 3 - JavaScript og CSS

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

For nylig dækkede vi mange ting, du kan gøre for at optimere ydeevnen på dit websted. Indtil videre har vi dog ikke talt om to vitale komponenter på de fleste moderne websteder - JavaScript og CSS. Uden dem ville meget af det, der gør det moderne web så godt, ikke være muligt, men de kan også påvirke dit websteds ydeevne.

Pointen er, at ethvert ekstra script eller kode, du tilføjer til dit websted, kan bremse det. Der er dog måder at "optimere" koden for at minimere dens indvirkning på dit websted set fra et ydeevne. På denne måde får du det bedste fra alle verdener uden at forringe brugeroplevelsen (UX).

I denne artikel vil vi kort tale om, hvad JavaScript og CSS er, og hvordan de påvirker din websides hastighed. Dernæst diskuterer vi tre måder at optimere den måde, dit websted bruger begge dele på. Lad os gå!

Et hurtigt overblik over hvad JavaScript og CSS er

Medmindre du besøger et websted med sort tekst på en hvid baggrund, er vi villige til at satse på, at der i det mindste er lidt CSS, der arbejder med sin magi under emhætten. Det samme gælder JavaScript, som er meget udbredt på de fleste websteder til at tilbyde mange seje funktioner.

Hvis du er fortrolig med ManageWP-bloggen, er du sandsynligvis allerede fortrolig med JavaScript og CSS. Det er dog altid værd at tjekke nogle af de fantastiske ting, som begge sprog giver dig mulighed for at gøre.

For eksempel, når det kommer til JavaScript, er der mange gode biblioteker med avancerede funktioner, som du kan tjekke ud, såsom anime.js. Dette giver dig mulighed for at implementere en bred vifte af mikrointeraktioner, hvoraf mange også er afhængige af CSS:

Når det kommer til CSS, laver nogle mennesker bogstavelig kunst med det. Hvis du har lidt tid til at brænde, skal du kigge på CodePen og tjekke nogle af de fantastiske effekter, brugerne har opnået ved hjælp af "enkel" CSS:
Nogle interessante eksempler på CSS i aktion.
Det vigtigste punkt at huske er, at moderne websteder brug både JavaScript og CSS. Det er dog også vigtigt, hvordan du implementerer dem, især hvis du er interesseret i webstedsoptimering (som du skal gøre!).

Hvorfor JavaScript og CSS påvirker hastigheden på dit websted

Kort sagt, enhver kode, du tilføjer til dit websted, vil påvirke dens indlæsningstider. Med JavaScript og CSS skal din server for eksempel gengive koden, så besøgende kan se resultatet. Jo mere kode du tilføjer, jo større bliver dine sidefiler.

I nogle tilfælde kan kodens indvirkning være lille. Når det kommer til belastningstider, tæller hver millisekund dog. For at spore dit websteds ydeevne kan du bruge tjenester som Pingdom Tools, som giver dig mulighed for at overvåge sidestørrelser og sideindlæsningstider:
Hjemmesiden til Pingdom Tools.
En anden god mulighed er at køre stresstest ved hjælp af værktøjer som Load Impact. Med denne særlige tjeneste kan du simulere, hvordan dit websted opfører sig, når flere brugere forsøger at få adgang til det samtidigt, hvilket kan give dig en mere nøjagtig vurdering end hastighedstest alene:
Startsiden for belastningseffekt.
Selvom du bruger eksterne CSS- og JavaScript-biblioteker, kan de stadig påvirke dit websteds ydeevne, da de først skal "hentes". Med andre ord, medmindre du planlægger at bruge rå HTML til alt (hvilket er dårligt), bliver du nødt til at kigge efter optimeringsmetoder, der giver dig mulighed for at reducere virkningen af ​​at bruge JavaScript og CSS.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

3 måder at optimere brugen af ​​JavaScript og CSS på dit websted

Der er flere måder at optimere dit websted for at reducere indvirkningen af ​​JavaScript og CSS på dine indlæsningstider. For de bedst mulige resultater anbefaler vi, at du implementerer dem alle.

1. Udsæt analysen af ​​JavaScript

Når du besøger et websted, henter din browser koden og gengiver den. Dette inkluderer HTML, CSS, JavaScript og enhver anden kode i dine sidefiler. Imidlertid viser din browser nogle gange ikke en side, før den "færdig" griber JavaScript, hvilket kan tage noget tid med ekstern kode.

Den nemmeste måde at løse dette problem på er at konfigurere dit websted til at udsætte indlæsning af JavaScript-filer, indtil resten af ​​siden vises. På denne måde vil der gå mindre tid, før brugerne ser hele siden, mens deres browser behandler JavaScript i baggrunden. Det er et smukt lille hack, der kan give indtryk af hurtigere indlæsningstider, og det er ikke svært at implementere.

For at adskille JavaScript skal du ændre dit tema header.php sætte af. For at få de bedst mulige resultater, gør du dette ved hjælp af et børnetema. Gå til for at få adgang til filen public_html / wp-content / temaer / dit barns tema bibliotek ved hjælp af din foretrukne FTP-klient, og åbn den, så du kan tilføje følgende kode før nøgleord:

function parseJSAtOnload() {
  var element = document.createElement("script");
  element.src = "https://managewp.com/blog/script_to_be_deferred.js";
  document.body.appendChild(element);
}

if (window.addEventListener)
  window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
  window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;



Denne kode beder WordPress om ikke at indlæse en bestemt JavaScript-fil før après det gengiver resten af ​​sideindholdet. Bemærk, at dette kodeeksempel bruger en pladsholder - script_to_be_deferred.js. For at dette skal fungere, skal du bare erstatte det med filnavnet og stien til det script, du vil adskille. Når du er færdig, skal du gemme ændringerne i header.php og du er god at gå!

2. Lille JavaScript og CSS online

I de fleste tilfælde anbefales det, at du bruger separate filer til din JavaScript og CSS og derefter bruger dem i din HTML-fil. Når alt kommer til alt betyder det meget renere, lettere at vedligeholde kode.

Men når vi taler om meget enkle (eller små) kodestykker, holder reglen ikke op. Hvis du kun har brug for at tilføje et par kodelinjer, kan du gøre det manuelt i din HTML-fil, som vi kalder "inlining".

Integrering af din JavaScript og CSS resulterer muligvis ikke i den smukkeste kode, men det kan forbedre din websides ydeevne, da det minimerer antallet af ekstra filer, der skal indlæses.

Husk dog, at du kun skal bruge denne fremgangsmåde til meget korte uddrag. Sørg også for at kommentere din kode, så du ikke glemmer, hvad hvert uddrag gør.

3. Gør din CSS og JavaScript mindre

Begrebet minifikation er ret ligetil: du tager et kodestykke og fjerner eventuelle fremmede tegn, såsom hvidt mellemrum. Det er muligvis ikke den smukkeste kode, grundlæggende fordi du også fjerner læsbarhedsfaktoren. En computer kan dog stadig forstå dette, og det kan hjælpe med at reducere sidens indlæsningstid.

Tag for eksempel dette enkle CSS-uddrag, der ændrer afstanden til dine H1- og H2-undertekster:

h1 {ordafstand: 10 pixel; } h2 {ordafstand: -5px; }

Efter minimering af denne kode skal den se sådan ud:

h1 {word-spacing: 10px} h2 {word-spacing: -5px}

Afhængig af omfanget af den ønskede minifikation kan du også erstatte variabelnavne med kortere alternativer for yderligere at reducere filstørrelsen. Jo mere CSS og JavaScript du tilføjer til dit websted, jo mere kode tilføjes. Dette betyder, at minificering kan gå langt, især for websteder med mange komplekse funktioner.

Som du kan forestille dig, er minificering af kode i hånden ikke det, du kalder en sjov aktivitet. Heldigvis er der masser af værktøjer, du kan bruge online, hvor du skriver din kode, og de sørger for at minimere alt for dig - så drage fordel!

Konklusion

Jo flere funktioner og stilarter du tilføjer til dit websted, jo længere tid kan det tage at indlæse. Dette betyder, at JavaScript og CSS kan have en direkte indflydelse på ydeevnen på dit websted. Men det er heller ingen grund til at undgå, da de er utroligt stærke sprog.

Men hvad du pouvez er at optimere den måde, du bruger JavaScript og CSS på for at sikre, at de ikke bremser dit websted. Denne artikel har set på tre vigtigste måder at opnå dette på:

  1. Udsæt parsing af JavaScript-filer.
  2. Lille JavaScript og CSS online.
  3. Gør din CSS og JavaScript mindre.

Har du spørgsmål om, hvordan du optimerer din brug af JavaScript og CSS? Lad os tale om det i kommentarfeltet nedenfor!

Billedkredit: Pixabay.

Kilde link

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld