Hoe't wy ús pagina laden tiid mei 10 sekonden besunigje

Faasje en sosjaal lykje gewoan net gear te wurkjen as it giet om in geweldige webside. Wy migrearden ús side nei Flywheel (affiliate link) en it ferbettere de prestaasjes en stabiliteit fan ús side sterk. Mar ús side-ûntwerp - mei in dikke foettekst dy't ús sosjale aktiviteit promovearre op Facebook, Twitter, Youtube en op ús Podcast - fertrage ús side nei in crawl.

It wie min. Wylst in geweldige pagina yn 2 sekonden of minder wurdt laden, duorre ús side mear dan 10 sekonden foar't in side wie foltôge. It probleem wie net WordPress of Flywheel, it probleem wie alle ynteraktive eleminten dy't wy fan oare tsjinsten laden hawwe ... Facebook- en Twitter-widgets, Youtube-foarbyldôfbyldings, ús Podcast-applikaasje, ik koe gewoan net kontrolearje hoe stadich se laden. Oant no ta.

Jo sille no fernimme dat ús siden yn sawat 2 sekonden laden. Hoe hawwe wy it dien? Wy hawwe in dynamyske seksje tafoege oan ús foettekst dy't allinich wurdt laden as de brûker hielendal nei dat punt scrollt. Scrollje hielendal nei de boaiem fan ús pagina yn in browser (net mobyl, app as tablet) en jo sille in laden ôfbylding oernimme:

lade

Mei jQuery brûke, lade wy de basis fan 'e pagina eins net foardat immen der hinne scrollt. De koade is eins heul ienfâldich:

$ (finster) .scroll (funksje () {as (jQuery (dokumint) .height () == jQuery (finster) .scrollTop () + jQuery (finster) .height ()) {as ($ ("# placetoload" ) .text (). lingte <200) {$ ("# oanfoljend"). load ('[folsleine paad fan side te laden]');}}});

Sadree't de brûker nei de basis fan 'e pagina scrollt, ekstraheret jQuery go de pagina-ynhâld fan it oantsjutte paad en laden se yn' e div dy't jo hawwe selekteare.

Wylst de side net mear profiteart fan 'e ynhâld dy't dêr is laden (om't in sykmasjine it net trochkruut), binne wy ​​der wis fan dat de snelheid fan' e pagina ús ranglist, dielen en belutsenens folle mear sil helpe dan immen wachtsjend ûngeduldich oant ús side spitich stadich wurdt laden. Bêste fan alles, de pagina hat noch alle eleminten dy't wy wolle meidwaan oan ús besikers ... sûnder de snelheid fan de pagina op te offerjen.

Wy hawwe noch wat wurk te dwaan ... mar wy komme der oan!

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.