Webstick.club logo Wordpress, Design, SEO, Speed blogg

Få fart på nettstedet ditt med disse tipsene [2021]


gjøre nettstedet raskere

Når du oppretter et nettsted, er det viktig å tenke på konvertering. Det er bare logisk at konvertering spiller en viktig rolle på et nettsted. Å oppmuntre til handling fra en besøkende er det du bør fokusere på som eieren av et nettsted, men hvordan øker du sjansen hvis du har en lav lastehastighet på nettstedet ditt? Besøkende forventer et raskt nettsted der deres behov blir dekket. De vil raskt finne det de leter etter. Med en treg nettside er dette ganske forhindret.

I denne artikkelen vil jeg gi deg praktiske tips for å øke hastigheten på nettstedet ditt. Med disse tipsene vil nettstedet ditt være så raskt som et tog på kort tid. Så forbedre konverteringen din med disse tipsene og takk meg senere :D.

1. Komprimering av tekster

Dette er det største tipset for å øke hastigheten på nettstedet ditt. Ved å komprimere tekstene dine, gjør du nettstedet mindre i byte, slik at nettleseren laster nettstedet ditt raskere. Med dette praktiske tipset har du allerede akselerert 50% av ladehastigheten.

Komprimer nettstedstekstene dine ved å opprette en ".htaccess" -fil. Denne filen leses av nettleseren når det søkes på nettstedet ditt. Denne filen tar for eksempel om dirigeringer og komprimering av tekstene dine. Ved å legge til følgende i ".htaccess" -filen, komprimerer du tekstene på nettstedet ditt, noe som gjør nettstedet ditt super raskt!


<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
	mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
	mod_gzip_item_include mime ^application/x-javascript.*
	mod_gzip_item_include mime ^text/.*
	mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
	mod_gzip_item_exclude mime ^image/.*
	mod_gzip_item_include handler ^cgi-script$
</IfModule>

Når du har lagt til koden ovenfor i '.htaccess'-filen, må du lagre den og overføre den til serveren din. Du kan også gjøre dette med FileZilla, for eksempel. Etter overføring av filen komprimeres nettstedsteksten av nettleseren, noe som gjør nettstedet ditt mye raskere.

2. Bufring av bilder

Bildene på nettstedet ditt tar ofte mye tid, ved å la bildene bufe i nettleseren, vil nettstedet lastes raskere. Nettleseren lagrer bildene hvis du besøker nettstedet for en annen gang. På denne måten lastes nettstedet raskere inn, og du unngår frustrasjon mens du venter. Ved å legge til følgende i ".htaccess" -filen kan du cache bildene dine.


<ifModule mod_gzip.c>
    ExpiresActive On
	ExpiresByType image/jpg "access plus 5 months"
	ExpiresByType image/jpeg "access plus 5 months"
	ExpiresByType image/webp "access plus 5 months"
	ExpiresByType image/gif "access plus 5 months"
	ExpiresByType image/png "access plus 5 months"
	ExpiresByType text/css "access plus 5 months"
	ExpiresByType application/pdf "access plus 5 months"
	ExpiresByType text/x-javascript "access plus 5 months"
	ExpiresByType application/x-shockwave-flash "access plus 5 months"
	ExpiresByType image/x-icon "access plus 1 year"
	ExpiresDefault "access plus 30 days"

</IfModule>

Kopier koden ovenfor og plasser den i '.htaccess'-filen. Lagre nå filen og overfør den til serveren din med FileZilla. Du har sørget for at nettleseren vil cache bildene dine, men nettleseren vil også cache koden din. Dette vil føre til at nettstedet ditt blir mye raskere.

3. La JavaScript og CSS lastes inn senere

Nettleseren laster markeringen din og javascript når et nettsted besøkes. Dette tar litt tid for nettleseren å laste inn alt. Det tar ofte to til tre sekunder å laste nettstedet helt, på grunn av layout og javascript. Det er derfor også nyttig å ha de viktige delene av markeringen først lastet inn, og de mindre viktige delene litt senere. På denne måten lastes nettstedet raskere inn, og besøkende kan se innholdet tidligere.

Bruk defer- og async-attributter med javascript-skriptene. Dette sikrer at skriptet ikke lastes inn før de viktigste delene av nettstedet er lastet inn. Nettleseren utsetter deretter innlastingen av javascript, noe som sikrer raskere lastetid.


<script defer type="text/javascript">
	[code]
</script>

Defer-attributtet sikrer at skriptet bare lastes når de synlige elementene på nettstedet vises. På denne måten lastes javaskriptet i bakgrunnen i stedet for forgrunnen. På denne måten forhindrer du at javascriptet blokkerer siden ved å laste den inn først.

4. Komprimer bilder

Med nettsteder som imagecompressor.com kan du komprimere bildene dine. Dette er viktig når filstørrelsen på bildene dine er litt høy. Ved å bruke fotokomprimeringsnettsteder reduserer du denne filstørrelsen og opprettholder kvaliteten samtidig. Nettleseren tar omtrent ett til to sekunder å laste inn bildene. Komprimering av bildene fremskynder prosessen.

5. Utsett innlasting av bilder

Du kan også utsette innlasting av bilder for å øke lastetiden. Det er et alternativ å bare laste inn et bilde når det skal vises. For eksempel lastes ikke bildene som er ute av syne, før de kommer til syne. På denne måten sikrer du at ladehastigheten akselererer.

Med koden nedenfor bruker du dette alternativet på bildene dine:

<img src="voorbeeld.png" loading="lazy"/>

Denne funksjonen støttes av Google Chrome. Se på dette nettstedet hvilke nettlesere som støtter dette alternativet. For nettlesere som ikke støtter det, er det en annen måte å laste inn bildene når de kommer til syne.


<script>
	document.addEventListener("DOMContentLoaded", function() {
	var lazyloadImages = document.querySelectorAll("img.lazy");    
	var lazyloadThrottleTimeout;

	function lazyload () {
		if(lazyloadThrottleTimeout) {
		clearTimeout(lazyloadThrottleTimeout);
	}    
	
	lazyloadThrottleTimeout = setTimeout(function() {
		var scrollTop = window.pageYOffset;
		lazyloadImages.forEach(function(img) {
			if(img.offsetTop < (window.innerHeight + scrollTop)) {
			img.src = img.dataset.src;
			img.classList.remove('lazy');
			}
		});
	
		if(lazyloadImages.length == 0) { 
			document.removeEventListener("scroll", lazyload);
			window.removeEventListener("resize", lazyload);
			window.removeEventListener("orientationChange", lazyload);
		}
	   }, 20);
	}

	  document.addEventListener("scroll", lazyload);
	  window.addEventListener("resize", lazyload);
	  window.addEventListener("orientationChange", lazyload);
	});
</script>

Lim inn JavaScript-koden nederst i koden for å unngå å redusere hastigheten på nettstedet ditt. Endre bildene på nettstedet ditt fra:

<img src="voorbeeld.png"/>
			

til
<img class="lazy" data-src="voorbeeld.png"/>
            

Etter at du har gjort dette for alle bildene dine i koden din, vil ikke nettleseren laste inn bildene før bildet skal vises.

Har du problemer med å bruke funksjonen for lat lasting? Deretter kan du sjekke artikkelen ved å Lazy Loading of CSS-Tricks visning.

Statisk nettsted og CMS

Med nettsteder laget med et CMS-system som WordPress, er hastigheten på et nettsted ofte lavere. WordPress henter dataene sine fra en database. Databasen må leses fullstendig av nettleseren, noe som ofte resulterer i lengre lastetid. Hvis hastighet fremdeles er veldig viktig for deg, anbefaler jeg å gå til et statisk nettsted. De er ofte raskere enn et WordPress-nettsted.

Endelig

Har du kommet så langt i denne artikkelen? Så vil jeg takke deg for oppmerksomheten din. Med tipsene som er nevnt, kan du forbedre konverteringen din. Hvis du vil vite hvordan du kan forbedre konverteringen betydelig, kan du sjekke denne artikkelen for noen gode tips Bli gitt.



Divi



Bla opp