כיצד אנו מקצצים את זמן הטעינה של הדף שלנו ב -10 שניות

נראה שמהירות וחברה פשוט לא עובדים יחד כשמדובר באתר מעולה. העברנו את האתר שלנו אל גַלגַל תְנוּפָה (קישור שותפים) וזה שיפר במידה ניכרת את הביצועים והיציבות של האתר שלנו. אבל עיצוב האתר שלנו - עם כותרת תחתונה שמנה שקידמה את הפעילות החברתית שלנו בפייסבוק, בטוויטר, ב- Youtube ובפודקאסט שלנו - האט את האתר שלנו לסריקה.

זה היה גרוע. בעוד שדף נהדר נטען תוך 2 שניות או פחות, האתר שלנו לקח יותר מ -10 שניות עד שהדף הושלם. הבעיה לא הייתה וורדפרס או גלגל תנופה, הבעיה הייתה כל האלמנטים האינטראקטיביים שהעמסנו משירותים אחרים ... ווידג'טים של פייסבוק וטוויטר, תמונות תצוגה מקדימה של Youtube, יישום הפודקאסט שלנו, פשוט לא יכולתי לשלוט באטיות שהם נטענים. עד עכשיו.

עכשיו תבחין שהדפים שלנו נטענים בעוד כ -2 שניות. איך עשינו את זה? הוספנו כותרת תחתונה קטע דינמי הנטען רק כאשר המשתמש גולל עד לנקודה זו. גלול כל הדרך לתחתית הדף שלנו בדפדפן (לא נייד, אפליקציה או טאבלט) ותראה תמונה טעינה משתלטת:

לִטעוֹן

באמצעות jQuery, אנחנו לא טוענים את בסיס העמוד עד שמישהו גולל לשם. הקוד הוא למעשה די פשוט:

$ (חלון) .גלול (פונקציה () {אם (jQuery (מסמך). גובה () == jQuery (חלון). scrollTop () + jQuery (חלון). גובה ()) {אם ($ ("# placetoload" ) .text (). אורך <200) {$ ("# משלים"). load ('[הנתיב המלא של העמוד לטעינה]');}}});

ברגע שהמשתמש גולל לבסיס העמוד, jQuery go מחלץ את תוכן העמוד של הנתיב שצוין וטוען אותם בתוך ה- div שבחרת.

למרות שהאתר כבר לא מרוויח מהתוכן הטעון שם (מכיוון שמנוע חיפוש לא סורק אותו), אנחנו די בטוחים שמהירות הדף תסייע לדירוג, לשיתוף ולמעורבות שלנו הרבה יותר מלהיות מישהו המתן בקוצר רוח לדף שלנו להיטען לאט לאט. החשוב מכל, בדף יש עדיין את כל האלמנטים שאנחנו רוצים לעסוק במבקרים שלנו ... מבלי לוותר על מהירות הדף.

יש לנו עוד קצת עבודה ... אבל אנחנו מגיעים לשם!

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.