Hoe we de laadtijd van onze pagina's met 10 seconden verminderen

Snelheid en sociaal lijken gewoon niet samen te werken als het gaat om een ​​geweldige website. We hebben onze site gemigreerd naar vliegwiel (aangesloten link) en het heeft de prestaties en stabiliteit van onze site enorm verbeterd. Maar ons site-ontwerp - met een dikke voettekst die onze sociale activiteit op Facebook, Twitter, YouTube en op onze Podcast promootte - vertraagde onze site tot een crawl.

Het was slecht. Terwijl een geweldige pagina binnen 2 seconden of minder laadt, duurde het meer dan 10 seconden voordat een pagina voltooid was. Het probleem was niet WordPress of Flywheel, het probleem was alle interactieve elementen die we van andere services laadden ... Facebook- en Twitter-widgets, YouTube-voorbeeldafbeeldingen, onze Podcast-applicatie, ik had gewoon geen controle over hoe traag ze werden geladen. Tot nu.

U zult nu merken dat onze pagina's in ongeveer 2 seconden worden geladen. Hoe hebben we dat gedaan? We hebben een dynamische sectie aan onze voettekst toegevoegd die alleen wordt geladen als de gebruiker helemaal naar dat punt scrolt. Scroll helemaal naar de onderkant van onze pagina in een browser (niet mobiel, app of tablet) en je ziet een laadafbeelding het overnemen:

laden

Door jQuery te gebruiken, laden we de basis van de pagina pas echt als iemand daarheen scrolt. De code is eigenlijk vrij simpel:

$ (window) .scroll (function () {if (jQuery (document) .height () == jQuery (window) .scrollTop () + jQuery (window) .height ()) {if ($ ("# placetoload" ) .text (). length <200) {$ ("# aanvullend"). load ('[volledig pad van te laden pagina]');}}});

Zodra de gebruiker naar de basis van de pagina scrolt, extraheert jQuery go de pagina-inhoud van het opgegeven pad en laadt deze binnen de div die je hebt geselecteerd.

Hoewel de site niet langer profiteert van de inhoud die daar wordt geladen (omdat een zoekmachine deze niet crawlt), zijn we er vrij zeker van dat de snelheid van de pagina onze rangschikking, delen en betrokkenheid veel meer zal helpen dan dat iemand Wacht ongeduldig tot onze pagina tergend langzaam laadt. Het beste van alles is dat de pagina nog steeds alle elementen bevat die we met onze bezoekers willen aangaan ... zonder de paginasnelheid op te offeren.

We hebben nog wat werk te doen ... maar we komen eraan!

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.