Website beschleunigen mit diesen Tipps [2024] 💥
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.
Anzeige
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.
Anzeige