בזמנו כתבתי מאמר המתאר דרכים לשפר את מהירות הטעינה של אתרי וורדפרס. התברר לי כי נושא זה מעניין רבים ממפתחי הוורדפרס. לא בכדי הוא הפוסט עם הכי הרבה כניסות בסאבי בלוג ואף זכה לאזכור בפוסט דומה שיצא מספר שבועות אחרי באתר 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/3.6.0/jquery.min.js', null, null );
}
}
add_filter( 'wp_default_scripts', 'savvy_remove_jquery_migrate' );4. בטלו את הטעינה של dashicons.min.css
הקובץ dashicons.min.css מכיל סט של אייקונים הנמצאים בשימוש בממשק הניהול של וורדפרס ובסרגל הכלים. אך הרבה תבניות טוענות קובץ זה גם ב 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');
