نحوه استفاده از فایلهای WebP در وردپرس و کاهش بار بار صفحه

فایلهای وب وردپرس

بسیاری از ما هم اکنون می دانیم که بهینه سازی تصویر بسیار مهم است زیرا نقش مهمی در کل بارهای وب سایت وردپرس شما ایفا می کند. امروز می خواهیم یک جایگزین آسان در مورد چگونگی ادغام فایلهای وب Google در سایت وردپرس خود با شما به اشتراک بگذاریم. برخی از کاربران شاهد کاهش اندازه پرونده تصویر بیش از 70٪ بوده اند!


WebP چیست؟?

اگر با آن آشنا نیستید وب, این یک قالب پرونده تصویری است که توسط تیم عملکرد وب در Google ساخته شده است و قصد دارد تصاویری کوچکتر و سریعتر ایجاد کند. این نخستین بار در سال 2010 اعلام شد و دارای دو روش فشرده سازی بدون ضرر و بدون ضرر است. این تصاویر براساس نوع MIME مورد استفاده از یک سرور وب به مرورگر وب تحویل داده می شوند تصویر / وب.

تصاویر بدون ضرر WebP هستند 26٪ کوچکتر است در اندازه در مقایسه با PNG ها و تصاویر از بین رفته در WebP هستند 25-34٪ کوچکتر است از JPEG.

شرکت هایی مانند YouTube و eBay در حال حاضر از WebP برای خاموش کردن بسیاری از سایت های خود استفاده می کنند. در زیر مثالی از eBay آورده شده است ، که در صفحه اصلی آنها به طور متوسط ​​حدود 30 فایل WebP وجود دارد.

استفاده از وب ebay

چرا WebP بسیار مهم است؟ مطابق با httparchive, از آگوست 2016, تصاویر بیش از 64٪ از وزن متوسط ​​صفحه وب را به خود اختصاص می دهند. به طور معمول بیشتر از ترکیب CSS ، JS و HTML شماست. بنابراین انتخاب یک روش بهینه سازی تصویر قوی و قالب تصویری مانند WebP بسیار مهم است به گونه ای که شما بتوانید تا حد امکان از وزن صفحه خود کاسته شوید. به طور کلی هرچه صفحه شما کوچکتر باشد سریعتر بارگیری می شود. و این باعث می شود نه تنها بازدید کنندگان شما بلکه Google را نیز دوست داشته باشید سرعت صفحه یک عامل رتبه بندی است.

پشتیبانی از وب

حال اگر WebP بسیار مهیج است ، ذکر پشتیبانی از مرورگر نیز حائز اهمیت است. در حال حاضر همه مرورگرهای مدرن از WebP پشتیبانی نمی کنند. مطابق با می توانم استفاده کنم, WebP در حال حاضر در Chrome 23+ ، Opera 39+ ، تمام نسخه های Opera mini ، مرورگر Android 4.3+ و Chrome برای Android پشتیبانی می شود.

پشتیبانی از مرورگر وب

اما صبر کنید! خیلی ناامید نشوید ، زیرا در آموزش می خواهیم شما را در زیر نشان دهیم ، روشی وجود دارد فایل های WebP را به عنوان مرورگر به مرورگرهای پشتیبانی شده و JPG / PNG ارائه دهید. این بدان معنی است که مرورگرهای پشتیبانی نشده تصویری شکسته را نمی بینند ، آنها فقط آنچه را که قبلاً می دیدند خواهند دید. به جای یک مهاجرت ، از WebP به عنوان افزودنی در سایت وردپرس خود بیاندیشید.

مطابق با مدارس W3S, Chrome انحصار سهم بازار مرورگر را کمی بیش از 70٪ دارد. اما فقط سهم بازار را به عنوان اثبات جامد در نظر نگیرید ، به اطلاعات بازدید کنندگان خودتان نگاه کنید و ببینید از چه مرورگرهایی استفاده می کنند ، زیرا ممکن است براساس طاقچه شما متفاوت باشد. شما ممکن است تعجب کنید که آمار چقدر متعجب است. در Google Analytics تحت “مخاطب” می توانید روی “مرورگر و سیستم عامل” کلیک کرده و ببینید که مرورگرهای مردم هنگام ضربه زدن به سایت شما از چه مرورگرهایی استفاده می کنند. ما یک وب سایت تصادفی کشیدیم و همانطور که در زیر می بینید ، 67٪ بازدید کنندگان از Chrome و 1٪ دیگر از اپرا هستند. بنابراین 68٪ از این افراد می توانند از WebP دیدن و بهره مند شوند قالب پرونده تصویر!

وب مرورگرهای کروم

نحوه استفاده از فایلهای WebP در وردپرس

در مثال امروز ما می خواهیم از ترکیبی از دو افزونه مختلف WordPress استفاده کنیم تا WebP در وردپرس راه اندازی شود. اینها توسط تیم سازنده در KeyCDN ، که یک شبکه تحویل محتوای جهانی (CDN) است ، ایجاد و ساخته شده اند..

  1. [حق بیمه] بهینه ساز تصویر Optimus: افزونه فشرده سازی تصویر برای وردپرس ، تصاویر را به WebP تبدیل می کند
  2. [رایگان] حافظه نهان وردپرس: ذخیره افزونه که به شما امکان می دهد تا به وب سرویس دهید به مرورگرهای پشتیبانی شده

بهینه ساز تصویر Optimus

شما می توانید Optimus Image Optimizer را از مخزن وردپرس, از جانب optimus.io, یا از درون داشبورد پلاگین شما. توجه: اگر می خواهید تصاویر خود را به WebP تبدیل کنید ، به پروانه حق بیمه نیز نیاز دارد. پس از نصب می توانید “ایجاد پرونده های وب” را در تنظیمات افزونه فعال کنید.

ایجاد پرونده های وب

پس از فعال شدن WebP ، در اصل برای هر چیزی که تبدیل شده است ، یک تصویر اضافی ایجاد می کند. بنابراین اگر یک فایل PNG یا JPG را بارگذاری می کنید ، اکنون یک نسخه .webp از تصویر شما نیز وجود دارد. به یاد داشته باشید ، PNG / JPG هنوز مورد نیاز است زیرا هنوز از این سرویس ها برای مرورگرهای پشتیبانی نشده استفاده می شود. Optimus فشرده سازی بدون ضرر را انجام می دهد ، بنابراین PNG و JPG های شما نیز فشرده می شوند.

پرونده های وب و png

همچنین در صورتی که قبلاً تصاویر خود را فشرده کرده اید و هنوز نیاز به تبدیل آنها به WebP دارید ، یک گزینه بهینه ساز فله نیز وجود دارد.

بهینه ساز تصویر فله

حافظه نهان وردپرس

بنابراین اکنون که تصاویر WebP دارید ، به روشی برای گفتن وردپرس برای ارائه خدمات WebP به مرورگرهای پشتیبانی شده و PNG / JPG به مرورگرهای دیگر نیاز دارید. این کار را می توان با افزونه رایگان WordPress Cache Enabler انجام داد. می توانید افزونه را از مخزن وردپرس یا آن را از درون داشبورد افزونه خود نصب کنید. پس از نصب می توانید “ایجاد یک نسخه ذخیره شده WebP اضافی” را در تنظیمات افزونه فعال کنید.

تنظیمات حافظه نهان

هنگامی که آن گزینه را فعال کردید ، یک نسخه WebP ذخیره شده دیگر صفحه شما ایجاد می شود.نسخه های وب

و همین است! اکنون باید فایلهای WebP را در وب سایت وردپرس خود اجرا کنید.

JPG به مقایسه وب

ما یک مقایسه از JPG به WebP برای نشان دادن تفاوتهایی که می توانید به دست آورید.

نام فایلاصلی JPGفشرده سازی JPGفرم وبتفاوت اندازه٪
jpg-to-webp-1.jpg758 کیلوبایت685 KB109 کیلوبایت86٪
jpg-to-webp-2.jpg599 کیلوبایت529 کیلوبایت58.8 KB90٪
jpg-to-webp-3.jpg960 کیلوبایت881 KB200 کیلوبایت79٪
jpg-to-webp-4.jpg862 KB791 KB146 KB83٪
jpg-to-webp-5.jpg960 کیلوبایت877 KB71.7 کیلوبایت93٪

WebP منجر به یک 85.87٪ در اندازه متوسط ​​تصویر کاهش می یابد.

PNG با WebP مقایسه

دوباره ، ما نیز مقایسه ای انجام دادیم PNG به WebP برای نشان دادن تفاوتهایی که می توانید به دست آورید.

نام فایلPNG اصلیفشرده PNGقالب وبتفاوت اندازه٪
png-to-webp-1.png44 کیلوبایت34 کیلوبایت30 کیلوبایت32٪
png-to-webp-2.png46 کیلوبایت35 کیلوبایت33 کیلوبایت28٪
png-to-webp-3.png43 کیلوبایت31 کیلوبایت25 کیلوبایت42٪
png-to-webp-4.png30 کیلوبایت24 کیلوبایت18 کیلوبایت40٪
png-to-webp-5.png15 کیلوبایت11 کیلوبایت8 KB47٪
png-to-webp-6.png34 کیلوبایت24 کیلوبایت18 کیلوبایت47٪
png-to-webp-7.png15 کیلوبایت13 کیلوبایت8 KB47٪
png-to-webp-8.png63 کیلوبایت47 کیلوبایت44 کیلوبایت30٪
png-to-webp-9.png48 کیلوبایت36 کیلوبایت33 کیلوبایت31٪
png-to-webp-10.png17 کیلوبایت14 کیلوبایت11 کیلوبایت35٪
png-to-webp-11.png18 کیلوبایت13 کیلوبایت9 کیلوبایت50٪
png-to-webp-12.png61 کیلوبایت45 کیلوبایت39 KB36٪
png-to-webp-13.png32 کیلوبایت25 کیلوبایت21 کیلوبایت35٪
png-to-webp-14.png26 کیلوبایت21 کیلوبایت17 کیلوبایت35٪
png-to-webp-15.png14 کیلوبایت12 کیلوبایت9 کیلوبایت36٪
png-to-webp-16.png36 کیلوبایت27 کیلوبایت24 کیلوبایت33٪
png-to-webp-17.png14 کیلوبایت12 کیلوبایت8 KB43٪
png-to-webp-18.png21 کیلوبایت18 کیلوبایت13 کیلوبایت38٪
png-to-webp-19.png42 کیلوبایت30 کیلوبایت27 کیلوبایت36٪
png-to-webp-20.png23 کیلوبایت20 کیلوبایت18 کیلوبایت22٪

WebP منجر به یک 42.8٪ در اندازه متوسط ​​تصویر کاهش می یابد.

خلاصه

همانطور که مشاهده می کنید ، پیاده سازی WebP در سایت وردپرس شما بسیار آسان است و می توانید به اندازه فایلهای تصویری به طرز چشمگیری کوچکتر برسید! هیچ فشرده سازی تصویر در آنجا وجود ندارد که بتواند با پس انداز WebP مقایسه کند. آه ، و آیا ما اشاره کردیم که WebP توانایی استفاده از فشرده سازی بدون ضرر را دارد؟ این بدان معنی است که شما هیچ گونه افت کیفیت قابل توجهی را مشاهده نمی کنید. اگر به دنبال راهی بهتر برای سرعت بخشیدن به وردپرس هستید ، WebP می تواند یک راه حل عالی باشد.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector