Paano Namin Pinuputol ang Oras ng Pag-load ng aming Pahina ng 10 Segundo

Ang bilis at panlipunan ay tila hindi gumagana nang magkasama pagdating sa isang mahusay na website. Nag-migrate ang aming site sa bolante (link ng kaakibat) at napabuti nito ang pagganap at katatagan ng aming site. Ngunit ang aming disenyo ng site - na may isang taba ng paa na nagpo-promosyon ng aming aktibidad sa panlipunan sa Facebook, Twitter, Youtube at sa aming Podcast - ay pinabagal ang aming site sa isang pag-crawl.

Masama ito Habang naglo-load ang isang mahusay na pahina sa 2 segundo o mas kaunti pa, ang aming site ay tumatagal ng higit sa 10 segundo para makumpleto ang isang pahina. Ang problema ay hindi WordPress o Flywheel, ang problema ay ang lahat ng mga interactive na elemento na na-load namin mula sa iba pang mga serbisyo ... Mga widget sa Facebook at Twitter, mga imahe ng preview ng Youtube, aming application ng Podcast, hindi ko lang makontrol kung gaano kabagal ang kanilang pag-load. Hanggang ngayon.

Mapapansin mo ngayon na naglo-load ang aming mga pahina nang halos 2 segundo. Paano natin ito nagawa? Nagdagdag kami ng isang dynamic na seksyon sa aming footer na naglo-load lamang kapag nag-scroll ang gumagamit hanggang sa puntong iyon. Mag-scroll hanggang sa ilalim ng aming pahina sa isang browser (hindi mobile, app o tablet) at makikita mo ang isang paglo-load ng imahe na mag-overtake:

magkarga

Paggamit ng jQuery, hindi namin talaga nilo-load ang base ng pahina hanggang sa may mag-scroll doon. Ang code ay talagang simple:

$ (window) .scroll (function () {if (jQuery (dokumento) .height () == jQuery (window) .scrollTop () + jQuery (window) .height ()) {if ($ ("# placetoload" ) .text (). haba <200) {$ ("# supplementary"). load ('[buong landas ng pahina upang mai-load]');}}});

Sa sandaling mag-scroll ang gumagamit sa base ng pahina, i-extract ng jQuery ang mga nilalaman ng pahina ng tinukoy na landas at mai-load ang mga ito sa loob ng div na iyong pinili.

Habang ang site ay hindi na nakikinabang mula sa nilalaman na na-load doon (dahil hindi ito ginapang ng isang search engine), lubos kaming nagtitiwala na ang bilis ng pahina ay makakatulong sa aming pagraranggo, pagbabahagi at pakikipag-ugnayan nang higit pa sa pagkakaroon ng isang tao walang pasensya maghintay para sa aming pahina upang mai-load ang labis na mabagal. Pinakamaganda sa lahat, nasa pahina pa rin ang lahat ng mga elemento na nais naming makisali sa aming mga bisita ... nang hindi isinasakripisyo ang bilis ng pahina.

Mayroon pa kaming ilang gawain na gagawin ... ngunit nakakarating kami doon!

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.