בדיקת מהירות טעינת האתר

על רשת CDN ועשרה טיפים לשיפור ביצועי האתר

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

אז…. מה זה CDN?

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

רגע…. מה קורה מאחורי הקלעים?

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

היתרונות

  • ביזור עומס – היתרון המרכזי של רשת ה-CDN הינה ביזור העומס. הבקשות מתחלקות למספר שרתים וכתוצאה מכן אנו חוסכים משאבים ומונעים עומס מהשרת המרכזי.
  • חווית המשתמש – כפי שציינו בתחילת המאמר, חווית המשתמש קריטית ומשמעותית הן מבחינת המרות באתר והן מבחינת דירוג האתר בגוגל. כתוצאה מביזור העומס, הגולש מקבל את התכנים במהירות מרבית ביחס לרוחב הפס שלו.
  • הגנה מפני התקפות DDosהתקפת מניעת שירות מבוססת על יצירת עומס רב של בקשות לשרת עד לקריסתו. כשאנו משתמשים ב-CDN אנו יוצרים מעגל אבטחה נוסף בין התוקפים לשרת שלנו, כאשר הבקשות המרובות נשלחות לרשת ה-CDN ולא לשרת המרכזי.
  • UpTime 100% – במקרה של נפילת השרת המרכזי (חס וחלילה,שום; בצל; מלח ומים), רשת ה-CDN מתחילה לפעול ומציגה את ה-Cache של האתר.

החסרונות

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

אוקי, איך אפשר לשפר ביצועים?

או! אני שמח ששאלתם. ובכן, לאחר שהבנו מהי רשת CDN, ברשותכם מספר טיפים לשיפור ביצועים:

  1.  גרפיקה ותבנית העיצוב – לתבנית העיצוב משקל רב (תרתי משמע) בקביעת מהירות האתר. נסו להחליף שימוש בתמונות ע"י שימוש ב- CSS שכן, רקע המבוסס על צבע יהיה מהיר יותר מאשר רקע המבוסס על תמונה.
  2. צמצמו את גודל התמונות – מרבית מערכות ניהול תוכן, מאפשרות העלאת תמונות גדולות והתאמת הגודל שלהן עבור התצוגה בלבד. דרך זו מאלצת את הגולשים שלכם להמתין עד שהתמונה המלאה תעלה ואף מוסיפה על זמן הטעינה את משך עיבוד התמונה. ממליץ להשתמש בכלי FastStone שרץ על התמונות ומכווץ אותן בהתאם להגדרותכם. למשתמשי וורדפרס למשל, אפשר להוריד את תיקיית uploads ולתת לכלי לרוץ עליה.
  3.  הימענו מבקשות תלות ו- HTTP מיותרות – גורם משמעותי במהירות טעינת הדף הינו בקשות תלות. לכן שימו לב שאתם מגבילים את כמות הבקשות ותשתמשו בשיטות ייעול שונות כדוגמת Sprites ו-SVG.
  4. CSS למעלה – JavaScript למטה.
  5. אחדו קבצי Javascript ו CSS – למשתמשי וורדפרס, יש תוסף מצוין שנקרא Better WordPress Minify
  6. Caching –  גורם לדפדפן לטעון דפים וקבצים שהוגדרו מראש בפעם הראשונה כשבפעמים הבאות מידע זה נשמר והדפדפן לא יצטרך לטעון את הדפים בשנית, מה שמקצר יותר את זמן עליית הדפים באתר. יש להגדיר את הדפים המתאימים בהם אנו רוצים שיישמר הקאש, אחרת הדפדפן יציג לנו מידע מיושן.
  7. הפעילו דחיסת GZIP – טכנולוגיה זו מבצעת דחיסה של כל קבצי העמוד טרם הפניה לדפדפן, כך שהדפדפן מקבל את הקבצים מכווצים והוא פורס אותם באופן אוטומטי.
  8.  טיפול בזמני טעינה של תוספים – לכל משתמשי מערכות הקוד הפתוח למניהם, שימו לב לתוספים כבויים שלא פעילים, הסירו תוספים שלא רלוונטים עבורכם.
  9.  כתבו קוד יעיל – גורם נוסף המשפיע על מהירות עליית האתר הוא קוד לא יעיל וקריא. שימו לב שאתם כותבים קוד ברור ומסודר, במיוחד כשמדובר בקוד JavaScript. בנוסף, ממליץ להסתכל על הפוסט של מוזילה המחדד את חשיבות קוד CSS נקי.
  10. זכרו – גוגל אוהב קוד נקי

5 כלים לבדיקת מהירות טעינת האתר

  1. Google PageSpeed
  2. BlazeMeter
  3. WEBpageTest
  4. Pingdom
  5. GTmetrix

 

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

(104)

הגב לכתבה דרך הפייסבוק:

נהנים מהתכנים? מילה טובה תעודד אותי להמשיך לכתוב

האימייל לא יוצג באתר. שדות החובה מסומנים *