שיפור מהירות האתר

מבוא:

איך אני הקטנתי מהירות של האתר שלי:
בפברואר העברתי את האתר כולו ל HTML5 וCSS3, המעבר הזה אפשר לי לצמצם משמעותית את זמן הטעינה. עד חודש יולי הכל היה בסדר, אפילו Google Webmaster Tools הציג גרף קבוע בירידה, אבל לאחר חודש יולי (שדרגתי ל 3.4.1) חלה עליה משמעותית ומהירות עלתה בצורה דרסטית (עד 10 שניות).
התחלתי לחפש פתרונות בבלוגים השונים ובWordpress Documentation, שום דבר לא עזר לי.
כנראה הגיע זמן לשדרג ולשכלל תבנית שוב, במיוחד כשאר גוגל מכריזים שלא ייתמכו יותר באקספלורר 8.

בעיות שהיה בתבנית הקודמת:

• שיתוף ברשתות החברתיות נטען כ5-6 שניות
• התאמה של תצוגה לדפדפנים השונים (בעיקר מסכי מגע)
• תצוגה בעייתית בExplorer
• כמות גדולה של פניות לשרת (מעל 90 Requests)
• טעינה של המון CSS וJS שקשורים לפלאגינים בכל העמודים (לדוגמא Contact Form 7 טוען את ה CSS ו JS שלו בכל עמוד ועמוד למרות שיש עמוד אחד בודד שבו יש טופס)
• חלק עליון של אתר (Header) היה עמוס מאוד בקוד מיותר (100 שורות מול 30 שורות גולמי), כמו כן טעינה של כל הJS ביחד בחלק זה
• תוסף WP Greet Box לא היה כ"כ אפקטיבי כמו שחשבתי
• סקריפטים השונים שמשפרים את חווית הגלישה (טאבים, סליידר וכו…)

כנקודת פתיחה התבססתי על פוסט בבלוג של גוגל (Link) בו הודעה על הפסקת תמיכה של דפדפן Internet Explorer 8. זאת הייתה הודעה מאוד משמחת מבחינתי ויריית פתיחה לעבור לטכנולוגיות הכי חדשות.

שלב ראשון – מעבר לפרימוורק

החלטתי להשאיר את המבנה הנוכחי ולנסות לשפר את הקוד. מהר מאוד הבנתי שהתנגדות שלי לפריימוורקים הייתה שגויה. התחלתי לחשוב לכיוון של HTML5 ★ BOILERPLATE, למעשה לא מדובר בפריימוורק אלה באוסף של קודים מוכנים לשימוש. לחצתי על קישור Get a custom build והגעתי ל initializr.com משם איך שהוא הגעתי ל Twitter Bootstrapו Modernizr, שני פרימוורקים מדהימים שבעבר תפסו את תשומת לב שלי (אז זה לא היה רלוונטי לתכנות Front End בארץ). לאחר תחקיר מעמיק התחלתי להשתכנע שזה בדיוק מה שאני צריך.
מה כלול בתוך זה:

• Twitter Bootstrap – אוסף כלים (HTML, CSS, וJS) השימושיים ביות בפיתוח Front End של אתרים (לא רק).
• Twitter Bootstrap Responsive – למעשה מדובר ב"גישה" שנקראת Responsive Design חדשה לתחום החיתוך של אתרי אינטרנט. מדובר באוסף של גרידים עם ערכים באחוזים ולא בערכים מוחלטים, זה מאפשר התאמה לכל גודל של המסך שבו צופים באתר אינטרנט. בפרימוורק של Twitter התייחסו למסכים ברזולוציות הבאות: עד 1200, 768-979(טאבלטים לרוחב ומסכים קטנים), עד 767 (טאבלטים לגובה) ועד 480 (סמארטפונים). כמו כן בתוכו יש כבר Reset.css.
• Modernizr – סקריפט לזיהוי יכולות הדפדפן להתמודד עם HTML5 וCSS3.

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

שלב שני – התייעלות של הקוד

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

החלפה של Jquery מקומי לGoogle CDN.
מוסיפים את הקוד לקובץ functions.php:

//Making jQuery Google API
function modify_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', '1.7.1', true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');

את כל הסקריפטים ריכזתי בקובץ אחד וטענתי בפוטר

function enqueue_scripts() {
/** REGISTER modernizr **/
wp_register_script( 'modernizr', get_template_directory_uri() . '/js/modernizr.min.js', array( 'jquery' ), '2.6.2', true );
wp_enqueue_script( 'modernizr' );
wp_register_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '2.1.1', true );
wp_enqueue_script( 'bootstrap' );
wp_register_script( 'prettyphoto', get_template_directory_uri() . '/js/jquery.prettyPhoto.js', array( 'jquery' ), '3.1.4', true );
wp_enqueue_script( 'prettyphoto' );
if (is_page(1470)){
wp_register_script( 'filterable', get_template_directory_uri() . '/js/filterable.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'filterable' );
}
wp_register_script( 'costum', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '3.1.4', true );
wp_enqueue_script( 'costum' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

מיקום של הסקריפטים קובעים בעזרת ערכים true – סקריפט נטען בפוטר, false – סקריפט נטען בהאדר.
3 סקריפטים ראשיים וסקריפט costum.js שמרכז בתוכו את כל הקודים הקטנים, בתיק עבודות (עמוד 1470) ישנו סקריפט נוסף.

שלב שלישי – צמצום קבצי CSS

אני משתמש בתוסף קצה Code Colorer שכולל כ200 שורות וגורם לפניה נוספת. הדבקתי את הקוד לקובץ Css וביטלתי טעינה שלו דרך functions.php.

function childtheme_deregister_styles() {
wp_deregister_style( 'codecolorer' );
}
add_action( 'wp_print_styles', 'childtheme_deregister_styles' );

אני מאוד ממליץ לעשות את זה גם לסקריפט Contact Form 7 בגלל שהוא טוען את JS ו CSS בכל עמוד ועמוד ולא בעמוד ספציפי.

function childtheme_deregister_styles() {
wp_deregister_style( 'contact-form-7' );
}
add_action( 'wp_print_styles', 'childtheme_deregister_styles' );

תוצאה סופית:

סיכום:

בעזרת שני פריימוורקים וכתיבה נכונה של הקוד הקטנתי את המהירות ל3-4 שניות.
כמובן שזה דרש ממני עבודה רבה בכתיבה ושכתוב תבנית מחדש, אבל זה היה שווה את המאמץ.

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