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

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

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

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

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

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

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

וורדפרס כברירת מחדל טוענת את הסקריפטים ב header של האתר, נכון יהיה לגרום לכך שסקריפטים אלו ייטענו מהפוטר כך שהתמונות ו ה 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 של אתר הוורדפרס שלכם.

הוסיפו את הקוד הבא לקובץ functions.php על מנת לטעון את jQuery מ CDN ולהסיר את jquery-migrate.min.js:

// 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:

function disable_wp_emojicons() {

  // all actions related to emojis
  remove_action( 'admin_print_styles', 'print_emoji_styles' );
  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_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
  remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
  remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );

  // filter to remove TinyMCE emojis
  add_filter( 'tiny_mce_plugins', 'disable_emojicons_tinymce' );
}
add_action( 'init', 'disable_wp_emojicons' );



function disable_emojicons_tinymce( $plugins ) {
  if ( is_array( $plugins ) ) {
    return array_diff( $plugins, array( 'wpemoji' ) );
  } else {
    return array();
  }
}

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

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

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

{ 3 תגובות… הוסף אחת }
  • אורי 20 באוגוסט 2015, 15:11

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

    תודה רבה

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

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

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

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

השאירו תגובה

פעימות