מהירות אתר ו- Javascript אסינכרוני

אסינכרוני

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

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

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

אתה יכול לראות מה משפיע על מהירות הדף שלך על ידי הפעלת בדיקה ב- Pingdom:
טעינת עמוד pingdom

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

הנה קטע כיצד לעשות זאת כראוי מאמיל סטנסטרום:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); אחר window.addEventListener ('load', async_load, false);}) ();

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

מה אתה חושב?

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