מהירות טעינת האתר

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

 

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

זמן קריאה: 5 דקות

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

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

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

למה לטרוח? 

 אני בהחלט יכול להבין את חוסר העניין המוחלט בזה כשרוב ספקי האינטרנט בישראל נחשבים לדי מהירים היום. ז"א למה לתקן משהו שכבר עובד נכון?

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

חשיבה מודולרית היא הצעד הראשון

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

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

למזער בקשות תלות ו-HTTP

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

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

תכתבו קוד חכם וקריא יותר

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

תכתבו HTML פשוט

בהמשך לפסקה הקודמת שמדברת על כתיבת CSS נקי, כתיבת HTML יעיל צריך להיות בעדיפות עליונה.

איפוס CSS ממקד לעתים תכופות את כל הרכיבים המשותפים והוא אוכף איפוס סטיילינג עליהם. אז גם אם אתם לא מתמקדים על הDIV הנוסף ההוא, סביר להניח שזה עדיין מאט דברים על ידי זה שהוא מאפס את ה Margin וה-Padding למינימום. ברמת העיקרון עוד DIV אחד או שניים לא באמת יפגעו בכם באופן משמעותי אבל כשאתם מגיעים לעשרות כאלה, אז דברים באמת מתחילים להשתגע. עם כניסתם של יותר אלמנטים לHTML5 יש לנו יותר שליטה גם בנושא הזה. 

גוגל אוהב קוד נקי

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

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

מסקנה

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

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

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

שנה אזרחית טובה לכולם.

לחזרה לעמוד הבית לחצו כאן נקסט סיט בניית אתרים לעסקים גדולים וקטנים

0 תגובות

השאירו תגובה

Want to join the discussion?
Feel free to contribute!

כתיבת תגובה

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