Webstick.info logo Wordpress, Webdesign, SEO - Blog

Website beschleunigen mit diesen Tipps [2021] ūüí•

Website schneller machen


Beim Erstellen einer Website ist es wichtig, √ľber die Konvertierung nachzudenken. Es ist nur logisch, dass die Konvertierung auf einer Website eine wichtige Rolle spielt. Als Websitebesitzer sollten Sie sich auf ermutigende Aktionen eines Besuchers konzentrieren. Wie k√∂nnen Sie diese Chance erh√∂hen, wenn Ihre Website nur langsam geladen wird? Besucher erwarten eine schnelle Website, auf der ihre Bed√ľrfnisse ber√ľcksichtigt werden. Sie wollen schnell finden, wonach sie suchen. Bei einer langsamen Website wird dies eher verhindert.

In diesem Artikel gebe ich Ihnen praktische Tipps, um Ihre Website zu beschleunigen. Mit diesen Tipps ist Ihre Website in k√ľrzester Zeit so schnell wie ein Zug. Verbessern Sie also Ihre Conversion mit diesen Tipps und bedanken Sie sich sp√§ter bei mir :D.

1. Komprimieren von Texten

Dies ist der größte Tipp zur Beschleunigung Ihrer Website. Durch Komprimieren Ihrer Texte verkleinern Sie Ihre Website in Bytes, sodass der Browser Ihre Website schneller lädt. Mit diesem praktischen Tipp haben Sie bereits 50% Ihrer Ladegeschwindigkeit beschleunigt.

Komprimieren Sie Ihre Website-Texte, indem Sie eine ".htaccess" -Datei erstellen. Diese Datei wird vom Browser gelesen, wenn Ihre Website durchsucht wird. Diese Datei k√ľmmert sich beispielsweise um das Weiterleiten und Komprimieren Ihrer Texte. Indem Sie Folgendes in Ihre ".htaccess" -Datei einf√ľgen, komprimieren Sie Ihre Website-Texte und machen Ihre Website superschnell!


<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>

Nachdem Sie den obigen Code in die '.htaccess'-Datei eingef√ľgt haben, m√ľssen Sie ihn speichern und auf Ihren Server √ľbertragen. Sie k√∂nnen dies beispielsweise auch mit FileZilla tun. Nach dem √úbertragen der Datei wird Ihr Website-Text vom Browser komprimiert, wodurch Ihre Website viel schneller wird.

2. Zwischenspeichern von Fotos

Die Fotos auf Ihrer Website nehmen oft viel Zeit in Anspruch. Wenn Ihre Fotos dann vom Browser zwischengespeichert werden, wird Ihre Website schneller geladen. Der Browser speichert die Fotos, wenn Sie die Website ein anderes Mal besuchen. Auf diese Weise wird die Website schneller geladen und Sie vermeiden Frustrationen beim Warten. Indem Sie der Datei ".htaccess" Folgendes hinzuf√ľgen, k√∂nnen Sie Ihre Fotos zwischenspeichern.


<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>

Kopieren Sie den obigen Code und platzieren Sie ihn in Ihrer '.htaccess'-Datei. Speichern Sie nun die Datei und √ľbertragen Sie sie mit FileZilla auf Ihren Server. Sie haben sichergestellt, dass der Browser Ihre Fotos zwischenspeichert, der Browser jedoch auch Ihren Code zwischenspeichert. Dies f√ľhrt dazu, dass Ihre Website viel schneller wird.

3. JavaScript und CSS später laden

Der Browser l√§dt Ihr Markup und Javascript, wenn eine Website besucht wird. Es dauert einige Zeit, bis der Browser alles geladen hat. Aufgrund des Layouts und des Javascript dauert es oft zwei bis drei Sekunden, bis die Website vollst√§ndig geladen ist. Es ist daher auch n√ľtzlich, zuerst die wichtigen Teile des Markups und etwas sp√§ter die weniger wichtigen Teile zu laden. Auf diese Weise wird die Website schneller geladen und Besucher k√∂nnen den Inhalt fr√ľher sehen.

Verwenden Sie mit den Javascript-Skripten defer und async Attribute. Dadurch wird sichergestellt, dass das Skript erst geladen wird, wenn die wesentlichen Teile der Website geladen wurden. Der Browser verschiebt dann das Laden von Javascript, was eine schnellere Ladezeit gewährleistet.


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

Das Attribut defer stellt sicher, dass das Skript nur geladen wird, wenn die sichtbaren Elemente der Website angezeigt werden. Auf diese Weise wird das Javascript im Hintergrund anstatt im Vordergrund geladen. Auf diese Weise verhindern Sie, dass das Javascript die Seite blockiert, indem Sie es zuerst laden.

4. Fotos komprimieren

Mit Websites wie imagecompressor.com können Sie Ihre Fotos komprimieren. Dies ist wichtig, wenn die Dateigröße Ihrer Fotos etwas hoch ist. Durch die Verwendung von Fotokomprimierungswebsites reduzieren Sie diese Dateigröße und behalten gleichzeitig die Qualität bei. Der Browser benötigt etwa ein bis zwei Sekunden, um die Fotos zu laden. Das Komprimieren der Fotos beschleunigt diesen Vorgang.

5. Laden von Bildern verschieben

Sie k√∂nnen das Laden von Bildern auch verschieben, um die Ladezeit zu verk√ľrzen. Es besteht die M√∂glichkeit, ein Bild nur dann zu laden, wenn es angezeigt werden soll. Beispielsweise werden die Bilder, die nicht sichtbar sind, erst geladen, wenn sie angezeigt werden. Auf diese Weise stellen Sie sicher, dass die Ladegeschwindigkeit beschleunigt wird.

Mit dem folgenden Code wenden Sie diese Option auf Ihre Fotos an:

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

Diese Funktion wird von Google Chrome unterst√ľtzt. Unter dieser Website finden Sie Informationen dazu, welche Browser diese Option unterst√ľtzen. F√ľr die Browser, die dies nicht unterst√ľtzen, gibt es eine andere M√∂glichkeit, die Bilder zu laden, wenn sie angezeigt werden.


<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>

F√ľgen Sie den JavaScript-Code am Ende Ihres Codes ein, um die Geschwindigkeit Ihrer Website nicht zu verlangsamen. √Ąndern Sie die Fotos auf Ihrer Website von:

<img src="voorbeeld.png"/>
			

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

Nachdem Sie dies f√ľr alle Ihre Fotos in Ihrem Code getan haben, l√§dt der Browser die Fotos erst, wenn das Foto angezeigt werden soll.

Haben Sie Probleme beim Anwenden der Lazy-Loading-Funktion? Dann können Sie den Artikel lesen unter Lazy Loading of CSS-Tricks.

Statische Website und CMS

Bei Websites, die mit einem CMS-System wie WordPress erstellt wurden, ist die Geschwindigkeit einer Website h√§ufig geringer. WordPress bezieht seine Daten aus einer Datenbank. Die Datenbank muss vom Browser vollst√§ndig gelesen werden, was h√§ufig zu einer l√§ngeren Ladezeit f√ľhrt. Wenn Geschwindigkeit f√ľr Sie sehr wichtig ist, empfehle ich eine statische Website. Sie sind oft schneller als eine WordPress-Website.

Schließlich

Bist du in diesem Artikel so weit gekommen? Dann m√∂chte ich Ihnen f√ľr Ihre Aufmerksamkeit danken. Mit den genannten Tipps k√∂nnen Sie Ihre Conversion erheblich verbessern. Wenn Sie wissen m√∂chten, wie Sie Ihre Conversion erheblich verbessern k√∂nnen, k√∂nnen Sie in diesem Artikel einige gro√üartige Tipps finden.



√úber unseren Link erhalten Sie IMMER 20% Rabatt auf das Divi-Thema!

Divi