מהי מהירות העמוד?

מהירות העמוד היא מדידה של כמה מהר התוכן בדף שלך נטען.

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

אתה יכול להעריך את מהירות הדף שלך עם PageSpeed ​​Insights של Google. PageSpeed ​​Insights Speed ​​Score משלב נתונים מ- CrUX (דוח חווית משתמש ב-Chrome) ודוחות על שני מדדי מהירות חשובים

שיטות עבודה מומלצות לקידום אתרים

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

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

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

אפשר דחיסה

השתמש ב- Gzip , יישום תוכנה לדחיסת קבצים , כדי להקטין את גודל קובצי ה-CSS, HTML ו-JavaScript שלך שגדולים מ-150 בתים.

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

הקטנת CSS, JavaScript ו-HTML

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

צמצם הפניות מחדש

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

example.com -> www.example.com -> m.example.com -> m.example.com/home

…כל אחת משתי ההפניות הנוספות הללו גורמת לטעינת הדף שלך לאט יותר.

הסר JavaScript חוסם רינדור

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

גוגל מציעה להימנע ולמזער את השימוש בחסימת JavaScript.

נצל את שמירה במטמון של דפדפן

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

שפר את זמן התגובה של השרת

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

השתמש ברשת הפצת תוכן

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

בצע אופטימיזציה של תמונות

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

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

 

צריכים שהעסק שלכם יקודם טוב יותר?

צרו קשר עוד היום ותנו ללקוחות שלכם לבוא אליכם.

או להשאיר פרטים ואנחנו נחזור אליכם בהקדם

טלפון נייד

שם מלא

שיפור מהירות אתר וורדפרס שלך – הדרך לקידום אורגני מהיר

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

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

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

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

כלים לשימוש לשיפור מהירות אתר

כפי שכל SEO יודע, הכלים מקלים על חיינו. ובמצב הזה, זה לא שונה. הכלים הקלים ביותר שמצאתי הם התוספים YSlow ו-Page Speed ​​עבור Firefox/Firebug.

  • אתה יכול להוריד את Firebug דרך – https://addons.mozilla.org/en-US/firefox/addon/firebug/
  • אתה יכול להוריד את YSlow דרך – https://addons.mozilla.org/en-US/firefox/addon/YSlow/
  • אתה יכול להוריד את Page Speed ​​דרך – https://code.google.com/speed/page-speed/download.html

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

באמצעות הכלים האלה לקחתי את אחד מאתרי שעוני הקיר שלי לזמני טעינה טובים של 90/100 וזמני טעינה מהירים בהרבה.

מסך Firebug

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

דוח Firebug

מה אתה יכול לעשות

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

הקטנת CSS לשיפור מהירות אתר וורדפרס

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

CSS לא דחוס

הפתרון לכך הוא לשמור עותק מקורי עבור המפתחים לעבוד בו ולאחר מכן לגרום להם לצמצם (להסיר את כל הביטים המיותרים) את הקוד של האתר החי. אתה יכול לצפות לחיסכון של 20-30% בממוצע. מה שבקבצים גדולים יכול לעזור מאוד!

ל-Page Speed ​​יש מדחס מובנה, אבל אתה יכול גם להשתמש בכלי כמו CSSminifier .

חיסכון מסיבי בגודל הקובץ כאשר הוא דחוס

על הדחיסה המקסימלית ניתן להשיג חיסכון גבוה בהרבה.

הקטנת JavaScript

שוב, אנשים רבים שוכחים לדחוס את ה-JavaScript שלהם, כל הרווחים האלה וכו’ מצטברים ובקבצים גדולים יכולים להשתמש בהרבה מקום. אפילו יותר בימים אלה, כאשר ספריות JavaScript כגון jQuery ו-mooTools הפכו נפוצות.

ל-PageSpeed ​​יש גם מדחס מובנה עם החיסכון המוצג.

מזעור בקשות קבצים לשיפור מהירות אתר

כל בקשה שהאתר שלך מגיש לשרת כדי לקבל קובץ כך היא תאט יותר את טעינת העמוד. אז ככל שתבקשו יותר בקשות הדברים יהיו איטיים יותר.

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

זה כולל גם את הבקשות שאתה מגיש עבור קובצי CSS וקובצי JavaScript. שקול את הדברים הבאים:

מספר גדול של בקשות JS

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

בקשת JS יחידה

נדבר יותר על מזעור בקשות קבצים לתמונות ב-CSS Sprites.

נצל את מטמון הדפדפן

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

בדוק את הדף של Google בנושא שמירה במטמון – https://code.google.com/speed/page-speed/docs/caching.html

צמצם את הפניות מחדש

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

הימנע משימוש בהם בכל מקום שאתה יכול.

בצע אופטימיזציה של תמונות

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

אשף ייצוא לתמונות

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

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

יש גם חיסכון על ידי ייצוא תמונות באמצעות Fireworks על Photoshop. מאמר זה מוכיח את הנקודה בצורה מושלמת ( http://webdesignerwall.com/general/fireworks-vs-photoshop-compression ).

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

“אם אני מייצא את הרקע עם Fireworks, אני יכול להקטין את גודל הקובץ שלו ב-20 קילו-בייט. אני מקבל בערך 16,000 ביקורים ביום בממוצע. 20 קילו-בייט x 16, 000 = 320, 000 קילו-בייט. כן, זה 320 מגה-בייט ליום! “

הימנע מ-CSS גרוע

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

CSS גרוע

אתר פנטסטי למידע נוסף על CSS הוא CSS Tricks אבל תמצא מאות אם תעשה חיפוש מהיר בגוגל.

אפשר דחיסה

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

תוכל ללמוד עוד על דחיסה כאן ( https://code.google.com/speed/page-speed/docs/payload.html#GzipCompression )

השתמש ב-CDN

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

CDNs מיועדים יותר לאתרים בגודל בינוני עד גדול יותר ויכולים לעשות את כל ההבדל אם אתה משרת עשרות/מאות אלפי מבקרים ביום.

השתמש במערכת מטמון לשיפור מהירות האתר

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

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

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

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

וורדפרס

תוסף מטמון האהוב עליי עבור וורדפרס הוא היפר מטמון. זוהי התקנה/תצורה של חמש דקות והיא תעזור לך להתמודד עם הרבה תנועה או עליות תעבורה שאתה עשוי לקבל אם התוכן שלך יוצג באתרים כמו Digg. הקישור הוא http://wordpress.org/extend/plugins/hyper-cache/

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

מסחר אלקטרוני

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

השתמש ב-CSS Sprites

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

הקונספט פשוט ואלגנטי. השתמש בתמונה אחת כ”תבנית” ולאחר מכן בחר רק חלק קטן מהתבנית.

CSS ספרייט

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

CSS Sprite באתר חי

די מגניב הא?

כתוב קוד טוב

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

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

אם זה לא מספיק

אז עשית את כל האמור לעיל והאתר שלך עדיין נטען לאט. מה עוד אתה יכול לעשות?

בדוק את החומרה שלך

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

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

עדכן את התוכנה שלך (למשל: עדכן וורדפרס)

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

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

מחשבות סגירה

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

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

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

אני מאחל לך כל טוב במאמציך!

מה עובד בשבילך?

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

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