מיטוב מהירות אתר: כיצד לעשות זאת בשנת 2020 # שלב אחר שלב

מיטוב מהירות אתר: כיצד לעשות זאת בשנת 2020 # שלב אחר שלב

מיטוב מהירות אתר: כיצד לעשות זאת בשנת 2020 # שלב אחר שלב
СОДЕРЖАНИЕ
02 июня 2020

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


בנוסף ל היתרונות של SEO מאופטימיזציה מהירה, זמני טעינת העמודים חשובים בקביעת מספר המשתמשים שנמצאים באתר שלך. HubSpot מדווח על כך ירידה בהמרה קשורה להגדלת זמני טעינת הדפים – עיכוב של שנייה בזמן הטעינה עלול להוביל להפחתה של ~ 20-30% בהמרה!

מדריך לאופטימיזציה של מהירות אתר

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

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

מיטוב מהירות אתר: מה שאתה צריך לפני שנתחיל

פוסט זה מניח שיש לכם שני דברים מרכזיים שכבר דאגתם להם:

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

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

תחילת העבודה עם אופטימיזציית מהירות האתר

אנטומיה של דף אינטרנט

אנטומיה

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

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

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

גלה היכן אתה עומד: כלי מיטוב מהיר לאתר

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

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

מבחן מהירות פינגדוםכלי פינגדום לבדיקות מהירות

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

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

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

שלב 1: בצע אופטימיזציה של קבצים סטטיים

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

(א) העבר את CSS לראש, JS למטה

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

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

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

כדי לטפל במהירות בסקריפטים, תוכלו להתקין את התוסף Scripts to Footer עבור WordPress. זה עובד על טייס אוטומטי ועושה את העבודה היטב.


תסריטים לכותרת התחתונה תסריטים לכותרת התחתונה

מחבר / ים: ג’ושוע דייוויד נלסון

גרסה נוכחית: 0.6.4.1

עודכן לאחרונה: 15 באפריל, 2020

סקריפטים-to-footerphp.0.6.4.1.zip


94% דירוגים


20,000 + התקנות


3.1.0 משלים

(ב) הגדר מיניפיקציה

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

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

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

(ג) השתמש בטעינה אסינכרונית

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

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

(ד) השתמש בדחיסת GZIP

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

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

דחיסת GZip היא חלק מכמה תוספי מטמון של וורדפרס כמו WP Fastest Cache.

(ה) השתמש ב- Google CDN לספריות פופולריות

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

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

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

אפילו תסתכל על המספרים של CodeinWP עצמו:

עומס תמונה

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

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

אתה יכול לעשות כמה דברים בכדי לגרום לזה לקרות ולהתחשב במיטוב מהירות האתר:

(א) העלה תמונות בגודל המתאים

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

למה פעמיים? זה גם יאפשר לנושא להציג גרסאות באיכות הרשתית של התמונות.

(ב) השתמש בסוג התמונה המתאים

שני סוגי התמונות הנפוצים ביותר באינטרנט הם JPGs ו- PNGs.

הם לא דומים.

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

דוגמה לתמונת PNGערכות נושא

(ג) בצע אופטימיזציה של תמונות באופן מקומי לפני העלאה

ישנם כלים שונים שבהם תוכל להשתמש לפני העלאת תמונות לאתרך.

  • לקבלת פיתרון אינטרנט, נסה TinyPNG
  • לשולחן העבודה, נסה ImageOptim

tinypng
imageoptim

(ד) עצל לטעון את התמונות שלך

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

הדגמה שלהפגנת טעינה עצלה ב- CodeinWP

הנה מדריך שלם לטעינת תמונות עצלות באתרך.

(ה) קבל תוסף לאופטימיזציה של תמונות

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

הנה 6 מהתוספים הטובים ביותר לאופטימיזציה של תמונות בהשוואה.

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

תוצאות אופטימיזציה של PNG

PluginOriginal PNG SizeAfter OptimizationOptimization% דחיסה
אופטימול301 KB34 KB88.7%אובדן וחסר אובדן
דמיין301 KB67 KB77.7%אובדן
TinyPNG301 KB79.7 KB73.5%אובדן
ShortPixel301 KB90.4 KB69.96%אובדן
לרפות301 KB247 KB17.9%תפסיד פחות
EWWW301 KB257.4 KB14.6%תפסיד פחות

תוצאות אופטימיזציה של JPG

פלאגין גודל JPG מקוריאופטימיזציה אופטימיזציה% דחיסה
ShortPixel518 KB169 KB67.36%אובדן
TinyPNG518 KB248.6 KB52%אובדן
אופטימול518 KB274 KB47%אובדן וחסר אובדן
דמיין518 KB338.7 KB34.64%אובדן
EWWW518 KB488.9 KB5.7%תפסיד פחות
לרפות518 KB493 KB4.9%תפסיד פחות


אופטימיזציה של תמונות ומטען עצל על ידי Optimole מיטוב תמונה & עומס עצלני מאת אופטימול

מחבר / ים: אופטימול

גרסה נוכחית: 2.3.1

עודכן לאחרונה: 21 באפריל, 2020

optimole-wp.zip


96% דירוגים


50,000 + התקנות


WP 4.7 + דורש

שלב 3: בצע אופטימיזציה של בקשות HTTP

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

בקשות אתרבקשות HTTP של דף אינטרנט

(א) שלב קבצים

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

שוב, אלה תוספי מיניפיור עבור וורדפרס יכול לעזור לך לעשות זאת.

(ב) צמצם את בדיקות ה- DNS

כאשר מתבצעת בקשת HTTP לתחום כמו www.codeinwp.com, מבוצעת בדיקת DNS (מערכת שמות תחום) כדי לאתר את כתובת ה- IP של השרת. כתוצאה מכך, המטרה שלך צריכה להיות גם לצמצם את מספר בדיקות ה- DNS בכל הבקשות, כדי להאיץ את טעינת האתר.

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

(ג) אפשר להמשיך לחיות

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

אתה יכול לאפשר לשמור על החיים בדרכים הבאות:

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

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

(ה) השתמש ב- CDN

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

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

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

שלב 4: מטמון

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

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

  • מטמון דף: גרסת HTML סטטית של דף המאוחסן בשרת
  • שמירת מסד נתונים: תוצאות של שאילתות בסיסיות נפוצות (כגון 10 הפוסטים המובילים באתר שלך) המאוחסנים בשרת
  • שמירת דפדפן: אחסון חלקים מהדף שלך בדפדפן

השווינו בין התוספים השמור למטמון וורדפרס הפופולריים ביותר בפוסט זה. TL; DR: לך לבדוק רקטת WP אם אתה מחפש פתרון מלא. לחלופין, אם אתה מעדיף משהו שהוא בחינם, הנה מדריך בנושא כיצד לקבוע את התצורה של W3 סה”כ מטמון.

שלב 5: בצע אופטימיזציה לנייד

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

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

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

בנוסף לגורמים אלה, AMP (Accelerated Mobile Pages) הוא פרויקט שמטרתו ליצור תוכן מהיר ועקבי בין מכשירים..

להלן מדריך להתחלת העבודה עם AMP בוורדפרס.


AMP

מחבר / ים: תורמי פרויקט AMP


74% דירוגים


500,000 + התקנות


WP 4.9 + דורש

עוד מידע

amp.1.5.3.zip

גרסה נוכחית: 1.5.3

עודכן לאחרונה: 15 באפריל, 2020


74% דירוגים


500,000 + התקנות


WP 4.9 + דורש

דף התוסף של WordPress.org


AMP

סיכום

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

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

  • שלב 1 כיסה את האופטימיזציה של קבצים סטטיים בצורה של גיליונות סגנונות ותסריטים
  • שלב 2 התמודד עם תמונות ואופטימיזציה שלהן
  • שלב 3 היה על טכניקות לייעול בקשות HTTP
  • שלב 4 דן בכמה טכניקות מטמון פופולריות
  • שלב 5 כולל אופטימיזציה למכשירים ניידים

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

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

פריסה, הצגה ועריכה מאת קרול ק.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector