כיצד להשתמש בקבצי WebP בוורדפרס והורדת זמני טעינת העמודים

קבצי אינטרנט - -

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


מה זה WebP?

אם אינך מכיר WebP, זהו פורמט קובץ תמונה שנוצר על ידי צוות ביצועי האינטרנט ב- Google במטרה ליצור תמונות קטנות ומהירות יותר. הוא הוכרז לראשונה בשנת 2010 והוא כולל שיטות דחיסה אבידות ובלתי אובדות. התמונות מועברות לדפדפן האינטרנט משרת אינטרנט המבוסס על סוג MIME בו הוא משתמש תמונה / webp.

תמונות נטולות אובדן של WebP הן 26% קטנים יותר בגודל לעומת PNGs ותמונות אובדן WebP הן 25-34% קטנים יותר יותר מ- JPEG.

חברות כמו יוטיוב ואיביי כבר משתמשות ב- WebP בכדי לשתוק הרבה מהאתרים שלהן בשקט. להלן דוגמה מאיביי, שם בדף הבית שלהם הם ממוצעים כ- 30 קבצי WebP.

השימוש באינטרנט באמצעות האינטרנט

מדוע WebP כל כך חשוב? לפי httparchive, נכון לאוגוסט 2016, תמונות מהוות יותר מ 64% ממשקלו הממוצע של דף אינטרנט. בדרך כלל זה יותר משילוב ה- CSS, JS וה HTML שלך. לכן בחירת שיטת אופטימיזציה של תמונה חזקה ותבנית תמונה כגון WebP היא קריטית כדי שתוכל להוריד את משקל העמוד שלך ככל האפשר. באופן כללי, ככל שהדף שלך קטן יותר הוא יטען מהר יותר. וזה לא ישמח רק את המבקרים שלך, אלא גם את גוגל מהירות העמוד היא גורם דירוג.

תמיכה ב- WebP

כעת, בעוד ש- WebP מאוד מרגש, חשוב להזכיר גם את תמיכת הדפדפנים. לא כל הדפדפנים המודרניים תומכים ב- WebP כרגע. לפי אני יכול להשתמש, WebP נתמך כרגע ב- Chrome 23+, Opera 39+, בכל הגרסאות של Opera mini, דפדפן Android 4.3+ ו- Chrome for Android.

תמיכה בדפדפן האינטרנט

אבל חכה! אל תתאכזב יתר על המידה, מכיוון שבמדריך ההדרכה שאנו נראה לך להלן, יש שיטה לביצוע למסור קבצי WebP לדפדפנים הנתמכים ו- JPG / PNG כגיבוי. המשמעות היא שדפדפנים שאינם נתמכים לא יראו תמונה שבורה, הם רק יראו את מה שהם ראו לפני כן. חשוב על WebP כתוספת לאתר וורדפרס שלך, ולא כהגירה.

לפי W3Schools, כרום מחזיקה במונופול על נתח שוק הדפדפן במעט מעל 70%. אבל אל תיקח נתח שוק רק כהוכחה מוצקה, התבונן בנתונים של המבקרים שלך ותראה באילו דפדפנים הם משתמשים, מכיוון שזה עשוי להשתנות בהתאם לגומחה שלך. אתה עשוי להיות מופתע עם כמה הסטטיסטיקה מוטה. ב- Google Analytics תחת “קהל” אתה יכול ללחוץ על “דפדפן ומערכת הפעלה” ולראות באילו דפדפנים אנשים משתמשים כשהם פוגעים באתר שלך. שלפנו אתר אקראי וכפי שתוכלו לראות בהמשך, 67% מהמבקרים הם מכרום ועוד 1% מאופרה. לכן 68% מאנשים אלה יכולים לצפות ב- WebP ולהפיק תועלת ממנו פורמט קובץ תמונה!

דפדפני Chrome

כיצד להשתמש בקבצי WebP בוורדפרס

בדוגמה של היום אנו הולכים להשתמש בשילוב של שני תוספי וורדפרס שונים כדי להפעיל את ה- WebP בוורדפרס. אלה נוצרים ומפותחים על ידי הצוות ב- KeyCDN, שהיא רשת אספקת תוכן עולמית (CDN).

  1. [פרמיה] אופטימיזציית התמונות: תוסף דחיסת תמונות ללא אובדן עבור וורדפרס, ממיר תמונות ל- WebP
  2. [חינם] מפעיל מטמון וורדפרס: תוסף מטמון אשר מאפשר לך לשרת את WebP לדפדפנים הנתמכים

אופטימיזציית התמונות

אתה יכול להוריד את Optimus Image Optimizer מ- מאגר וורדפרס, מ optimus.io, או מתוך לוח המחוונים של התוספים שלך. הערה: זה כן דורש רישיון פרמיום אם ברצונך להמיר את התמונות שלך ל- WebP. לאחר ההתקנה תוכלו לאפשר את “יצירת קבצי WebP” בהגדרות התוסף.

יצירת קבצי אינטרנט

לאחר הפעלת WebP זה למעשה יוצר תמונה נוספת לכל המרה. אז אם אתה מעלה קובץ PNG או JPG, יש כעת גם גרסת .webp של התמונה שלך. זכור, PNG / JPG עדיין נחוץ מכיוון שאלו משמשים עדיין לשרת לדפדפנים שאינם נתמכים. Optimus עושה דחיסה ללא אובדן, כך שגם PNG ו- JPG שלך דחוסים.

קבצי webp ו- png

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

מיטוב תמונות בכמויות גדולות

מפעיל מטמון וורדפרס

אז עכשיו כשיש לך תמונות WebP, אתה צריך דרך לומר לוורדפרס להגיש תמונות WebP לדפדפנים הנתמכים ו- PNG / JPG לדפדפנים האחרים. ניתן להשיג זאת באמצעות התוסף המופלא של WordPress Cache Enabler. אתה יכול להוריד את התוסף מה – מאגר וורדפרס או התקן אותו מתוך לוח המחוונים של התוספים. לאחר ההתקנה תוכלו לאפשר את “צור גרסה נוספת במטמון של WebP” בהגדרות התוסף.

הגדרות מפעיל מטמון

לאחר שתאפשר אפשרות זו, נוצרת גרסת WebP במטמון נוספת של הדף שלך.גרסאות אינטרנט

וזהו! כעת עליכם להפעיל קבצי WebP באתר וורדפרס.

JPG להשוואה ב- WebP

ערכנו השוואה של JPG ל- WebP כדי להראות את ההבדלים שאתה יכול להשיג.

שם קובץJPG מקוריJPG דחוספורמט WEBPאחוז שונות בגודל
jpg ל- webp-1.jpg758 KB685 KB109 KB86%
jpg ל- webp-2.jpg599 KB529 KB58.8 KB90%
jpg ל- webp-3.jpg960 KB881 KB200 KB79%
jpg ל- webp-4.jpg862 KB791 KB146 KB83%
jpg ל- webp-5.jpg960 KB877 KB71.7 KB93%

WebP הביא ל 85.87% ירידה בגודל התמונה הממוצע.

PNG להשוואה ב- WebP

שוב, קיימנו גם השוואה של PNG ל- WebP כדי להראות את ההבדלים שאתה יכול להשיג.

שם קובץמקורי PNGPNG דחוספורמט WebPהפרש גודל
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

WebP הביא ל ירידה של 42.8% בגודל התמונה הממוצע.

סיכום

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map