שיפור זמני טעינה עם Prefetch / Prerender

מהירות טעינת האתר חשובה, יש אומרים אפילו חשובה מאוד. מי אומר את זה? גוגל למשל, שכבר שלוש שנים מקדמת את יוזמת Make the Web Faster, או מחקרים עצמאיים, כמו זה של ענקית הקמעונאות וולמארט, שמצא כי  על שיפור של שנייה אחת בזמני הטעינה, יחס ההמרה עלה ב-2 אחוזים.

יש אינספור דרכים לשיפור זמני הטעינה של אתר. עבור אתרים מבוססי וורדפרס למשל, תוספים כגון Fastest Cache או W3 Total Cache הם מהתוספים הפופולאריים ביותר למערכת זו והם מאיצים את מהירות הגלישה באמצעות שמירת קבצי HTML סטאטיים על השרת, במקום לייצר קריאות למסד הנתונים בכל כניסה לעמוד. תוספים אלה גם מייצרים קוד נוסף שנרשם לקובץ htaccess ובין השאר קובע תאריך תפוגה למשאבים דוגמת קבצי JS או CSS כך שיישמרו בזיכרון המחשב של הגולש למשל תקופה ארוכה (שנה למשל), כך שלא יהיה צורך לטעון אותם מחדש בכל כניסה לאתר.

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

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

Prerender בדפדפן

prefecth הינה תגית שמהווה חלק מתקן HTML5, אבל הראשונה הייתה גוגל שהכניסה לדפדפן שלה יכולת בשם Prerender. בכל פעם שאתם גולשים עם כרום, הדפדפן מנסה "לנחש" את רשימת האתרים אליהם תרצו להיכנס בהתאם להיסטוריית הגלישה שלכם ולטעון אותה לדפדפן עוד בטרם החלטתם להיכנס לאתר. בקישור זה תוכלו לוודא שאופציה זו אכן זמינה בכרום שלכם. לא עובד (או עובד, אבל תרצו שלא יעבוד מטעמי פרטיות) – הפרטים בקישור זה.

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

כדי לראות את רשימת האתרים שכרום ינסה לעשות להם prerender, העתיקו את השורה הבאה לכרום:

chrome://dns/

אבל יש משאבי אינטרנט נוספים שכרום לא יודע לטעון מראש, למשל פענוח DNS (התהליך שבו הדפדפן מפענח את כתובת ה-IP שנמצאת מאחורי הכתובת הקריאה של האתר. למשל אתר agent.co.il יושב למעשה על כתובת IP עם המספר 45.79.145.67) ולכן יש לנו אופציות נוספות להאצת מהירות האתר.

DNS prefetch

נכון לשנה האחרונה, זו אחת הדרכים השימושיות והנפוצות ביותר להאצת מהירות הטעינה של אתרי אינטרנט, בעיקר תודות לעבודה שהיא פשוטה להטמעה ורוב הדפדפנים תומכים בה. אתר Nerdy Data מדווח על 1.5 מיליון תוצאות עבור התגית dns-prefetch, בהן אתרים דוגמת יאהו, אמזון, אלי אקספרס, וורדפרס העולמית ועוד רבים אחרים. בעזרת DNS prefetch נוכל לטעון מראש, באמצעות קוד פשוט, שורה של משאבים נוספים – למשל סאב דומיין אליו אנו סבורים שהגולש יעבור לאחר שיבקר בעמוד מסוים:

<link rel="dns-prefetch" href="subdomain.example.com">

או אפילו דומיין אחר לגמרי.

טעינה מראש של קישורים – Link prefetch / prerender

עכשיו אנחנו כבר מגיעים לחלק המשמעותי יותר בטעינה מראש של משאבים. באמצעות prefetch / prerender נוכל לגרום לדפדפן של המשתמש לטעון משאבים דוגמת עמודים נוספים באתר או קבצים נלווים דוגמת קבצי תמונה,  CSS או JS ולהאיץ באופן משמעותי את טעינת העמוד הבא אליו יגיע המשתמש – בשאיפה שאכן היטבנו לחזות את העמוד הבא שלו.

כך, למשל, נוכל לטעון מראש את העמודים הבאים ב-Funnel של עגלת קניות באתר מסחר אלקטרוני (לא רק עמוד הבא, אלא סדרה של עמודים אליהם יגיע המשתמש במהלך הביקור) prerender טוען את העמוד הבא במלואו:

<link rel="prerender" href="step2.html">

לטעון קבצים בהם אולי ייעשה שימוש בעמודים הבאים. Prefetch רק רומז כי ייתכן וייעשה שימוש בקבצים אלה והוא שומר אותם ב-cache למקרה הצורך:

<link rel="prefetch" href="http:// example.com/ecommerce.js">

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

<link rel="subresource"  href="/subresource.js">

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

למי זה מתאים ואיך תדע אם זה מתאים לאתר שלך

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

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

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