So laden Sie Webseiten schneller, wenn sie lange Inhalte und große Bilder haben

Question

Ich versuche, meine Website, die zu viel Inhalt sowie mehrere Slider mit hoher Auflösung Bilder zu beschleunigen. Ich studierte viele Artikel/Blogs und angewendet wie:

1) Host on a good server. 
2) compressed images 
3) sprite images for icon 
4) compress js and css also attach css in header section and js at bottom etc. 

gleiche wie von Blogs. Aber mein Problem sind Bilder. Gibt es ein Plugin, das die Seite/Bilder schneller laden kann als die statische Seite oder irgendeine andere Lösung?

Answer 1

Sie sollten eine der Bibliotheken versuchen, die Bilder lazy-laden. Diese Bibliotheken laden Bilder nur, wenn die Seite scrollt und das Bild in den Ansichts-Port gelangt.

Beispiel Suche: https://www.google.com/search?q=lazy+load+images

Answer 2

Verwenden jQuery.Lazy zu faul Last Inhalt nur dann, wenn der Benutzer sie erreicht durch Scrollen. Vor allem Bilder, aber auch iFrames, Videos, YouTube, und vielleicht einige andere Inhalte, z.B. in Tabs oder etwas über AJAX. Es ist einfach HTML und JS. Keine große Sache. ;)

Für Bilder ‚einfach es, data-src statt src verwenden:

<img class="lazy" data-src="image.jpg" /> 

Und dann rufen Sie einfach das Plugin:

$(function() { 
    $("img.lazy").Lazy(); 
}); 

Sie noch denken konnte, ein low-res zu verwenden Platzhalter und laden Sie die hochauflösende Version, wenn der Benutzer sie anzeigt. Der Benutzer muss also nicht warten, bis alles geladen ist. Sie könnten sogar einige Effekte hinzufügen, um es dynamischer zu machen. ;) Dies könnte sogar von Lazy erledigt werden.

<img class="lazy" src="lowres.jpg" data-src="highres.jpg" /> 

Viel Glück!