לשפר את מהירות הטעינה של אתר הוורדפרס שלך ב-10 דקות

נכתב על ידי 
דרג מאמר זה
(1 הצבעה)

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

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

רק לבעלי אתר וורדפרס

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

מתחילים...

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

1. הקלו על פעולת הדפדפן על ידי שימוש ב-Cache שלו

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

בכדי לאפשר זאת, פתחו את קובץ ה-.htaccess בעזרת תכנת ftp או מנהל הקבצים מפאנל הניהול שקיבלתם בשרת, והוסיפו את הקוד הבא:

# ----------------------------------------------------------------------
# | Expires headers                                                    |
# ----------------------------------------------------------------------
 
# Serve resources with far-future expires headers.
#
# (!) If you don't control versioning with filename-based
# cache busting, you should consider lowering the cache times
# to something like one week.
#
# https://httpd.apache.org/docs/current/mod/mod_expires.html
 
 
 
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"
 
  # CSS
 
    ExpiresByType text/css                              "access plus 1 year"
 
 
  # Data interchange
 
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"
 
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"
 
 
  # Favicon (cannot be renamed!) and cursor images
 
    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"
 
  # HTML
 
    ExpiresByType text/html                             "access plus 0 seconds"
 
 
  # JavaScript
 
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"
 
 
  # Manifest files
 
    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
 
 
  # Media files
 
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"
 
 
  # Web fonts
 
    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"
 
    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"
 
    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"
 
    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"
 
    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"
 
 
  # Other
 
    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

2. הפעילו את פונקצית דחיסת GZIP בשרת כדי להקל על הורדת האתר

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

בכדי להפעיל את דחיסת GZIP יש להעתיק לקובץ ה-.htaccess את הקוד הבא:

# ----------------------------------------------------------------------
# | Compression                                                        |
# ----------------------------------------------------------------------
    # Force compression for mangled `Accept-Encoding` request headers
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html  
        
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    # Compress all output labeled with one of the following media types.
    #
    # (!) For Apache versions below version 2.3.7 you don't need to
    # enable `mod_filter` and can remove the ``
    # and `` lines as `AddOutputFilterByType` is still in
    # the core directives.
    #
    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype
   
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"
    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    # Map the following filename extensions to the specified
    # encoding type in order to make Apache serve the file types
    # with the appropriate `Content-Encoding` response header
    # (do note that this will NOT make Apache compress them!).
    #
    # If these files types would be served without an appropriate
    # `Content-Enable` response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress
    # the response, and thus, wouldn't be able to understand the
    # content.
    #
    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding
 
        AddEncoding gzip              svgz

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

# Alternative code for GZIP    
    
    <IfModule deflate_module>
<IfModule filter_module> AddOutputFilterByType DEFLATE text/plain text/html AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf <IfModule>
</IfModule>

 כעת בדקו שוב

3. חסכו בקריאות לשרת על ידי Keep Alive Connection

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

הוסיפו את הקוד הבא לקובץ ה-.htaccess:

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>

4. הכריחו את הדפדפן להסתמך על פקודות הCache שלנו - הסירו ETags

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

העתיקו את הקוד הבא לקובץ ה-.htaccess:

# ----------------------------------------------------------------------
# | ETags                                                              |
# ----------------------------------------------------------------------
# Remove `ETags` as resources are sent with far-future expires headers.
#
# https://developer.yahoo.com/performance/rules.html#etags
# https://tools.ietf.org/html/rfc7232#section-2.3
# `FileETag None` doesn't work in all cases.
    Header unset ETag
FileETag None

5. דחיסת תמונות ו-css sprite

דחיסת תמונות

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

לפני שאתם מעלים תמונה לאתר:

  • עדיף לוודא שהתמונה לא כבדה מידי -
    רוב התמונות צריכות להיות בעשרות הנמוכות של ה-KB ואף פחות
  • שהגודל מתאים לתיבה באתר, ולא גדול מידי -
    אם התיבה באתר היא ברוחב של 100 פיקסל ואתם מעלים תמונה של 3000 פיקסל, אז סביר להניח שהעליתם תמונה כבה מאוד, והגולש בסופו של תהליך יראה את התמונה בגודל של 100 פיקסל בלבד. לא הועלתם בכך שהעליתם תמונה גדולה יותר

תוכנות להורדה של משקל תמונה

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

בנוסף לתוכנות הנ"ל, ניתן גם לבצע אופטימיזציה באתר TinyPNG

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

EWWW Image Optimizer

תמונת התוסף EWWW Image Optimizer

שימוש ב-CSS Sprite

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

דוגמא ל-CSS Sprite שפייסבוק נעזרת בו:

facebook's css sprite example

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

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

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

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

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

7. הסרת Query Strings

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

כדי להסיר את הפרמטרים הנוספים הללו, העתיקו את הקוד הבא לקובץ ה-functions.php אשר נמצא תיקיית התבנית:

function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

לסיכום...

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

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

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

עקבו אחרינו ברשת

  • וילנסר בפייסבוק
  • וילנסר בלינקדאין
  • וילנסר בגוגל+
  • RSS feed

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