Хуудсаа ачаалах хугацааг 10 секундээр хэрхэн бууруулах вэ

Гайхамшигтай вэбсайттай болоход хурд, нийгмийн байдал нь хоорондоо уялдаа холбоогүй юм шиг санагддаг. Бид сайтаа нүүлгэсэн Flywheel (харьяа холбоос) бөгөөд энэ нь манай сайтын гүйцэтгэл, тогтвортой байдлыг эрс сайжруулсан болно. Гэхдээ манай сайтын дизайн - Facebook, Twitter, Youtube болон Podcast дээр бидний нийгмийн идэвхийг сурталчилсан тарган хөлтэй нь манай сайтыг мөлхөж удаашруулсан.

Энэ муу байсан. Гайхамшигтай хуудас 2 секунд эсвэл түүнээс бага хугацаанд ачаалагддаг бол манай сайт хуудсыг бөглөхөд 10 гаруй секунд зарцуулдаг байв. Асуудал нь WordPress эсвэл Flywheel биш харин бидний бусад үйлчилгээнээс ачаалж байсан бүх интерактив элементүүд байв. Фэйсбүүк, Твиттерийн виджетүүд, Youtube-ийн урьдчилж харах зурагнууд, манай Podcast програмууд, би тэдний ачааллыг удаан хянах боломжгүй байсан. Одоог хүртэл.

Манай хуудсууд ойролцоогоор 2 секундын дотор ачаалагдаж байгааг та одоо анзаарах болно. Бид үүнийг яаж хийсэн бэ? Хэрэглэгч тэр цэг хүртэл гүйлгэх үед л ачаалах динамик хэсгийг бид хөл рүүгээ нэмсэн. Хөтөч дээр (мобайл, апп эсвэл таблет биш) манай хуудасны доод хэсэг хүртэл гүйлгэж үзэхэд ачаалах дүрс авах болно:

ачаалал

JQuery-ийг ашигласнаар бид хэн нэгэн гүйлгэх хүртэл хуудасны суурийг ачаалдаггүй. Код нь үнэхээр энгийн:

$ (window) .scroll (function () {if (jQuery (document) .height () == jQuery (window) .scrollTop () + jQuery (window) .height ()) {if ($ ("# placetoload") ) .text (). урт <200) {$ ("# нэмэлт"). ачаалал ('[ачаалах хуудасны бүтэн зам]');}}});

Хэрэглэгч хуудасны ёроолд гүйлгэж орсны дараа jQuery go нь заасан замын хуудасны агуулгыг гаргаж, таны сонгосон div дотор ачаална.

Сайт нь тэнд байршуулсан агуулгаасаа ашиг хүртэхээ больсон ч (хайлтын систем мөлхөхгүй байгаа тул) хуудасны хурд нь бидний зэрэглэл, хуваалцах, оролцоонд хэн нэгэнтэй байхаас хамаагүй их тус болно гэдэгт бид бүрэн итгэлтэй байна. манай хуудсыг тэвчээргүй удаан ачаалахыг хүлээнэ үү. Хамгийн сайн нь, хуудсанд манай зочидтой холбогдохыг хүссэн бүх элементүүд хэвээр байна ... хуудасны хурдыг алдалгүйгээр.

Бидэнд хийх зарим ажил үлдсэн хэвээр байна ... гэхдээ бид тэнд хүрч байна!

Чи юу гэж бодож байна?

Энэ сайт нь спамыг багасгахын тулд Akismet-ийг ашигладаг. Таны өгөгдлийг хэрхэн боловсруулдаг талаар суралц.