השיגו עוד מספר נקודות ב Google Page Speed

מספר טיפים לשיפור הציון ב Google Page Speed.

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

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

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

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' );

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;
}

 

רועי יוסף
רועי יוסף

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

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

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

    תודה רבה

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

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

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

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

השאירו תגובה

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

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

תודה רבה! רועי.