השיגו עוד מספר נקודות ב PageSpeed Insights ושפרו את הציון

מספר טיפים לשיפור הציון ב Google PageSpeed Insights ובכלים לבדיקות מהירות האתר.

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

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

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

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

1. טענו קבצי Javascript ב <footer> במקום ב <header>

קבצי ה Javascript אינם נטענים בצורה מקבילית (אלא אם אם נטענים אסינכרונית). כל עוד סקריפט מסויים נטען,  שאר הקבצים (CSS / תמונות וכו׳) ייעצרו עד שאותו סקריפט ייטען במלואו.

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

הוסיפו את הקוד הבא לקובץ functions.php:

// Custom Scripting to Move JavaScript from the Head to the Footer
function remove_head_scripts() {
   remove_action('wp_head', 'wp_print_scripts');
   remove_action('wp_head', 'wp_print_head_scripts', 9);
   remove_action('wp_head', 'wp_enqueue_scripts', 1);

   add_action('wp_footer', 'wp_print_scripts', 5);
   add_action('wp_footer', 'wp_enqueue_scripts', 5);
   add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

עוד על אפשרויות טעינת סקריפטים ועל מה זה defer, async ועוד תמצאו בפוסט כיצד לעכב (defer) פריסת Javascript ולשפר את זמן הטעינה?

2. הסירו את comment-reply.min.js במידה ואינו נחוץ

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

שימו לב – יש לבטל סקריפט זה אך ורק אם אתם מזדהים אם אחד המצבים המופיעים מטה:

  • ביטלתם את אפשרות תגובות משורשרות בהגדרות > דיון.
  • ביטלתם את אפשרות התגובות לגמרי.
  • אתם משתמשים במערכת Disqus לתגובות שלכם.
  • אתם משתמשים במערכת Livefyre לתגובות שלכם.

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

// Remove comment-reply.min.js from footer
function savvy_remove_comment_reply(){
    wp_deregister_script( 'comment-reply' );
         }
add_action('init','savvy_remove_comment_reply');

3. הסירו את jquery-migrate.min.js ותטענו את jQuery מה CDN של גוגל

וורדפרס טוענת כברירת מחדל את הסקריפט jquery-migrate.min.js. נאמר כי סקריפט זה נועד בכדי לטעון פונקציות אשר הוסרו מגירסת jQuery 1.9 ומעלה.

ברוב המקרים אינכם צריכים סקריפט זה, אך בכדי לוודא אם אתם צריכים את jquery-migrate.min.js, ערכו את קובץ wp-config.php והוסיפו את השורה הבאה:

define('SCRIPT_DEBUG', true);

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

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

לכן כדאי לגרום לוורדפרס לטעון את הסקריפט מגוגל ולא מתיקיית wp-includes/js של אתר הוורדפרס שלכם. בכדי לעשות זאת ולהסיר את jquery-migrate.min.js, הוסיפו את הקוד הבא לקובץ functions.php :

// Remove jQuery Migrate Script from header and Load jQuery from Google CDN
function savvy_remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() ) {
        $scripts->remove( 'jquery' );
        $scripts->remove( 'jquery-core' );
        $scripts->add( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', null, null );
    }
}
add_filter( 'wp_default_scripts', 'savvy_remove_jquery_migrate' );

4. בטלו את הטעינה של dashicons.min.css

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

Remove dashicons.min.css from frontend

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

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

הנה הקוד סו אנו משתמשים בקובץ functions.php:

// remove dashicons
function savvy_dequeue_dashicon() {
	if (current_user_can( 'update_core' )) {
	    return;
	}
	wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'savvy_dequeue_dashicon' );

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

5. הסירו Emoji Icons

גירסת וורדפרס 4.2 הציגה את השימוש ב emoji (שימוש בסמיילים למינהם), אפשרות זו טוענת קבצי Javascript ו CSS בכל דף באתר שלכם, אם אינכם מעוניינים או אינכם משתמשים בסמיילים נכון יהיה להסיר פונקציונליות זו. הוסיפו את הקוד הבא לקובץ functions.php:


/**
 * Disable the emoji's
 */
function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
	add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}

add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 *
 * @param array $plugins
 *
 * @return array Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

/**
 * Remove emoji CDN hostname from DNS prefetching hints.
 *
 * @param array $urls URLs to print for resource hints.
 * @param string $relation_type The relation type the URLs are printed for.
 *
 * @return array Difference betwen the two arrays.
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
	if ( 'dns-prefetch' == $relation_type ) {
		/** This filter is documented in wp-includes/formatting.php */
		$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );

		$urls = array_diff( $urls, array( $emoji_svg_url ) );
	}

	return $urls;
}

6. משתמשים בוורדפרס +5.0 אך לא בעורך החדש (גוטנברג)?

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

אם תתנו מבט בקוד המקור של עמודי האתר שלכם, תראו את קובץ ה CSS הבא נטען: block-library/style-rtl.min.css יחד עם עוד קובץ CSS הקשור לגוטנברג (ייתכן ויהיו ללא RTL בסופו בהתאם לשפת האתר שלכם).

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

// prevent block library css from loading 

function savvy_remove_block_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' ); 
}
add_action( 'wp_enqueue_scripts', 'savvy_remove_block_css', 100 );

7. הסרת Junk מ wp_head בוורדפרס

וורדפרס כברירת מחדל מוסיפה לא מעט זבל ל head של האתר וב 99% מהמקרים אותו זבל אינו נחוץ. לא אפרט על כל קישור או תגית שאנו מסירים אך הנה הרוד שיש להוסיף לקובץ functions.php בכדי להסיר את אותו Junk:

remove_action( 'wp_head','feed_links', 2 );
remove_action( 'wp_head','feed_links_extra', 3 );
remove_action( 'wp_head', 'wp_resource_hints', 2 );
remove_action( 'template_redirect', 'rest_output_link_header', 11 );
remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links', 10 );
remove_action( 'wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'rsd_link');
remove_action( 'wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
רועי יוסף
רועי יוסף

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

11תגובות...
  • אורי 20 באוגוסט 2015, 15:11

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

    תודה רבה

  • רועי ברקוביץ 12 בפברואר 2016, 13:24

    הקוד הראשון מעלים לי את כל הפורטפוליו

    • רועי יוסף 21 באוקטובר 2017, 15:53

      התבנית/התוספים בהם אתה משתמש כנראה אינם טוענים javascript בצורה הנכונה או עם התלויות הנכונות. במצב אידיאלי, כאשר אתה מעביר סקריפטים מה header לפוטר לא צריכה להיות שום בעיה.

  • אבי 9 באוגוסט 2019, 2:15

    הייתה לי בעיה של Time to First Byte באיזור ה-4 שניות! וסעיף 1 פתר לי את הבעיה ואני ממש ממש ממש מודה לך.. הבעיה היחידה היא.. שיש לי JS של Marker (סקריפט שממרקר טקסט בעת גלילה) והוא לא עובד בכלל…

    האם יש דרך להחריג קובץ מסויים?

    • רועי יוסף 9 באוגוסט 2019, 2:47

      מה טוען את הסקריפט הזה, האם זה תוסף כלשהו?

      • ניר 9 באוגוסט 2019, 9:45

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

      • אבי 9 באוגוסט 2019, 11:48

        כן ולא..

        כלומר יש תוסף בשם insert header and footer ושם הכנסתי את הסקריפט. זה תגית ואז שאר הסקריפט נמצא בתגית. וזה סקריפט של marker.min.js משהו כזה.

        • רועי יוסף 9 באוגוסט 2019, 16:50

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

          <?php
          
          function add_marker_script() { ?>
          
              <!--    YOUR SCRIPT HERE WITH THE SCRIPT TAGS   -->
          
              <?php
          }
          add_action('wp_head', 'add_marker_script');
          • אבי 11 באוגוסט 2019, 12:21

            תודה רבה על הזמן והסבלנות

            אבל זה לא עבד 🙁

  • רוב 17 באוקטובר 2019, 15:21

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

השאירו תגובה

פעימות
Up!