26/05/2019

תובנות מגוגל

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin

כולם מדברים על קידום אתרים (או Search Engine Optimization – SEO) ואיך הם יעשו את זה הכי טוב, אז אני לא אדבר על זה בפוסט זה. במקום, אנסה להסביר איך מקדמים בגוגל אתר מבוסס אנגולר, ואם להיות יותר מדוייק – מה זה Google PageSpeed Insight ומה התובנות שלי…

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

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

בפוסט הזה אתאר איך הצלחתי להעלות את הציון של אתר כזה (נטלוש) ב- Google PageSpeed Insight.

מה זה Google PageSpeed Insight?

לפני שמתחילים, אסביר בקצרה ממש מה זה השירות הזה?

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

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

רוצים לנסות? זה ממש כאן.

האתגר - קידום אתרים מבוססי אנגולר (או - SEO vs. Angular)

בקצרה (ואנסה לעשות את זה ממש פשוט) –

אנגולר היא תשתית תוכנה ליישומי רשת בקוד פתוח המתוחזקת ע"י גוגל, מבוססת ג'אווהסקריפט (צד לקוח – הקוד שרץ בדפדפן שלנו), ומשמשת ליצירת אפליקציות מבוססות דף יחיד – SPA – Single Page Applications. (אפליקציות SPA מתנהגות כמו אפליקציות שרצות על מכשירים ניידים – ניתן לעבור בין הדפים בלי צורך לטעון את כל הדף. כתוצאה מכך, אתר האינטרנט מציג התנהגות חלקה וחוויית משתמש מעולה).

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

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

אז מה קורה בעצם? מצד אחד תוכן האתר "נבנה" רק כאשר פותחים דפדפן לאתר (כי הקוד רץ בצד הלקוח, זוכרים)? מצד שני, גוגל לא רואה את המידע הזה כי הוא לא פותח דפדפן אלא "זוחל" לאורך האתר שלנו בניסיון ללמוד ו-"לאנדקס" אותו.

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

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

תכלס, מה עשיתי?

בנינו אתר מבוסס אנגולר כי דרישת הלקוח היתה דיי מסובכת וקשה להשגה בפלטפורמות כמו וורדפרס או וויקס.

עכשיו, משבנינו את האתר השלב הבא הוא קידום. אחד הכלים בדרך לקידום מוצלח הוא Google PageSpeed Insight ועל זה נכתוב.

אז נכנסתי לדף הנ"ל (סתם לא בא לי לכתוב שוב Google PageSpeed Insight), הכנסתי את כתובת האתר וביקשתי ניתוח.

למה ניתוח? כשאתה מחכה לתוצאות האלו מגוגל, אתה מרגיש כאילו אתה מחכה לרופא שיצא מחדר הניתוח ויגיד שהכל טוב, אתם מעולים, לכו הביתה. אההה, וגם זה הפירוש של הכפתור Analyze שמתחיל את כל התהליך הזה…

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

בואו ניכנס לפרטים. מכאן זה הולך להיות טכני…

דחיסה - Enable Compression

כאן המקום לציין שבמקרה הזה, האתר רץ על פלטפורמת NET CORE., על שרת מבוסס לינוקס (ככה אנחנו, דואגים ללקוחות שלנו), ושרת ה- Web שלנו מבוסס Apache.

ברוב המקרים ה- Apache מאפשר את מודול הדחיסה כבר במהלך ההתקנה. במקרה שלי, עפ"י גוגל הייתי צריך להוסיף דחיסה עבור קבצי svg. (מה זה קבצי svg.? – גוגל איט). איך עושים את זה?

עורכים את הקובץ

/etc/apache2/mods-enabled/deflate.conf

ומוסיפים את הקוד הבא

image/svg+xml

בסוף השורה

AddOutputFilterByType DEFLATE text/html text/plain text/xml

שימוש בזיכרון הדפדפן - Browser Cache

המודולים האחראים על האפשרות הזו הם mod_headers ו- mod_expires. במקרה שלי Apache לא איפשר את המודולים האחראים על Browser Caching, והייתי צריך לאפשר ולהגדיר אותם. איפשור המודולים נעשה ע"י הפקודות הבאות:
sudo a2enmod headers
sudo a2enmod expires
מייצרים קובץ הגדרה:
sudo vi /etc/apache2/mods-enabled/expires.conf
עם ההגדרות הבאות:
# Turn on the module.
	ExpiresActive on
# Set the default expiry times.
	ExpiresDefault "access plus 1 week"
	ExpiresByType image/svg+xml "access plus 1 month"
	ExpiresByType image/jpg "access plus 1 month"
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType text/css "access plus 1 month"
	ExpiresByType text/javascript "access plus 1 month"
	ExpiresByType application/javascript "access plus 1 month"
	ExpiresByType application/x-shockwave-flash "access plus 1 month"
	ExpiresByType text/css "now plus 1 month"
	ExpiresByType image/ico "access plus 1 month"
	ExpiresByType image/x-icon "access plus 1 month"
	ExpiresByType text/html "access plus 600 seconds"
עוד מידע בנושא תוכלו למצוא כאן, ו… ניחשתם נכון. בגוגל…

האטת עליית הדף (או חלק ממנו)

אם חשבתם שפה סיימנו, אז זהו… שלא.

ההמלצה הבאה שקיבלתי היא צמצום חסמים המאטים (או מונעים) מהדף לעלות, או בעברית פשוטה יותר – Eliminate render-blocking JavaScript and CSS in above-the-fold content

וואט דה פאק?

מה זה above-the-fold?! – החלק של הדף שאנו רואים ללא scroll. (החלק שנראה כשנעשה scroll נקרא below-the-fold, סתם שתדעו).

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

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

איך צמצמנו את זה?

 

עבור JavaScript

עבור כל תגיות ה- script, המוגדרות לנו ב- index.html הוספתי את הפרמטר defer. זה נראה כך:

script defer src="https://my-3rp-party-library/javascript.js"

אפשרות שניה (ופחות פופלארית) היא להוסיף את הפרמטר async במקום defer, אבל אז, אנו לא יכולים לעקוב אחר סדר טעינת הספריות. לא מומלץ.

שימו לב – כשבונים את הפתרון ומעלים לשרת ה- Production, קובץ ה- index.html מכיל הצבעות לספריות מקומיות (אלו שאנו בנינו). מאחר וזה קוד שמתווסף בתהליך הבנייה, יש צורך להוסיף את הפרמטר ידנית (אם מצאתם דרך טובה יותר לעשות זאת, נשמח אם תגיבו ותשתפו).

עבור CSS

עדיין עובד על זה. אמיתי לגמרי.

מצאתי אתר שמסביר איך לתקוף את הבעיה, תוכלו לקרוא עוד כאן. אני לא הצלחתי, אבל אולי אתם כן… מי יודע.

האתר הזה גם מספק נתונים על הספריות שהאתר שלכם טוען והגודל של כל אחד מהם (לפי צבעים – אתם יודעים, אדום = גדול ונורא וכו'). זה נתן לי כיוון להתחלה. למשל, מצאתי שבתחילת הפרוייקט טענתי ספריות עיצוב (CSS) של PrimeNG אבל לא השתמשתי בהם לבסוף. אתם יכולים לנחש שזה נשאר שם וניפח לי את ספריית העיצוב הסופית… לינק ישירות לדף הזה תמצאו כאן.

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

דחיסת תמונות

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

תמונות… חייבים להשתמש בתמונות, אחרת האתר ישעמם! יחד עם זאת צריך להבין את "העלות" של השימוש (או שימוש לא נכון) בתמונות.

אנו נוטים לחשוב שככל שהתמונה גדולה יותר (או כבדה יותר – הכוונה לגודל הקובץ) נקבל תמונה איכותית יותר. לא תמיד!

בנוסף, אנו לא באמת צריכים תמונת HD לאובייקט מסוג קרוסלה בגודל שליש מהמסך, או עבור תמונות ממוזערות (Thumbnails). ואני מודה… היו לי כמה וכמה כאלה.

הפתרון פשוט – הגדרת גודל התמונה מחדש או Resize Image (אני השתמשתי ב- Image Resizer for Windows). אין פה קסם, פשוט התקינו את אחת התוכנות שעושה את זה (יש כאלו שנותנים את זה כשירות ללא התקנת תוכנה) והקטינו את התמונה לגודל המינימלי הדרוש.

במקרה שלי, נפח התמונות עמד על ~2.5MB, ואילו אחרי השינוי עמד על פחות מ- 1MB.

במקרה הזה אני חושב שכדאי מאוד לקרוא את ההסבר של גוגל. לחצו על הלינק Optimize the following images להסבר מפורט (ממש מפורט) בנושא.

...ומה נשאר לי לעשות?

אז לאחר התיקונים שבאו בעקבות ההמלצות של Google PageSpeed Insight (כן, כתבתי את זה שוב) האתר עלה לציון של 85/100 שזה מעולה לסיבוב הראשון. 

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

אהבתם? שתפו! יש לכם משהו להוסיף? מצאתם טעות? כתבתי שטויות? תגיבו!

זה הזמן לאונליין!

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

בניית אתר תדמית, תוכן,  חנות וירטואלית או הנגשת מערכת ה-"בקאנד" של העסק לתמוך בעבודה מהבית ולהשאיר את העסק חי.

עכשיו זה הזמן! צרו קשר איתנו עוד היום ונתחיל.

 

זה הזמן לאונליין!

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

בניית אתר תדמית, תוכן,  חנות וירטואלית או הנגשת מערכת ה-"בקאנד" של העסק לתמוך בעבודה מהבית ולהשאיר את העסק חי.

עכשיו זה הזמן! צרו קשר איתנו עוד היום ונתחיל.