به طراح وب خوش آمدید.
گزارش Lighthouse کاربران را تشویق می کند تا تصاویر را در قالب های نسل بعدی مانند WebP و AVIF پست کنند. [۱]. در مقایسه با فرمتهای سنتی مانند PNG و JPEG، این نوع فایلها میتوانند به شما در کاهش زمان بارگذاری وبسایت و ارائه تجربه کاربری بهتر (UX) کمک کنند. با این حال، ممکن است ندانید که چگونه این ویژگی را به سایت خود اضافه کنید.
خبر خوب این است که وردپرس ارائه تصاویر را در قالب های نسل بعدی آسان می کند. در برخی موارد، ممکن است فقط لازم باشد نسخه وردپرس خود را به روز کنید. همچنین، میتوانید یک افزونه بهینهسازی تصویر را برای خودکارسازی فرآیند نصب کنید.
چرا Lighthouse پست کردن تصاویر را در قالب های نسل بعدی توصیه می کند
Lighthouse یک ابزار خودکار متن باز است که توسط گوگل ارائه شده است. این طراحی شده است تا به شما در بهبود کیفیت وب سایت کمک کند. می توانید از آن برای دریافت اطلاعات در مورد عملکرد و دسترسی به هر یک از صفحات خود استفاده کنید.
تنها کاری که باید انجام دهید این است که URL ممیزی را به Lighthouse ارائه دهید. سپس گزارشی از عملکرد صفحات خود دریافت خواهید کرد. اگر هیچ یک از ارزیابی ها را قبول نکنید، در مورد چگونگی حل مشکلات اصلی و بهبود وب سایت خود نیز مشاوره دریافت خواهید کرد.
ساده ترین راه برای استفاده از Lighthouse رفتن به آمار سرعت صفحه. پس از راه اندازی سایت خود از طریق Lighthouse، به پایین بروید ممکن ها فصل در آنجا نکات کاربردی زیادی برای بهبود عملکرد صفحه خود خواهید یافت. همانطور که می بینید، Lighthouse استفاده از تصاویر نسل بعدی را توصیه می کند:
اگر روی یک پیشنهاد کلیک کنید، می توانید اطلاعات بیشتری در مورد موضوع پیدا کنید. به عنوان مثال، Lighthouse به شما می گوید که WebP و AVIF اغلب فشرده سازی بهتری نسبت به JPEG و PNG ارائه می دهند.
در نتیجه، این نوع فایل ها دانلود سریعتر و مصرف داده کمتری را فراهم می کنند. در بخش بعدی نگاهی دقیق تر به مزایای فرمت های نسل بعدی خواهیم داشت.
مقدمه ای بر فرمت های نسل بعدی
در گذشته، JPG و PNG فرمت های سنتی فایل برای تصاویر بودند. با این حال، در سال ۲۰۱۰ گوگل به ما WebP را معرفی کرد و AVIF در سال ۲۰۱۹ ایجاد شد. هدف این فرمتهای نسل جدید در کنار هم حفظ تصاویر با کیفیت بالا و در عین حال استفاده از اندازه فایلهای کوچکتر است.
به عنوان مثال، فایل های WebP 34 درصد کوچکتر از JPEG های سنتی هستند، اما همچنان پیکسل های بیشتری را نمایش می دهند. از سوی دیگر، AVIF از فشرده سازی با اتلاف برای حذف داده های غیر ضروری از یک فایل تصویری استفاده می کند.
از آنجایی که فرمتهای تصویر نسل بعدی معمولاً اندازه فایلهای کوچکتری دارند، آنها یک راه عالی برای اطمینان از بارگیری سریع وبسایت شما هستند. این بسیار مهم است زیرا صفحات کند تمایل دارند کاربران را از خود دور کنند. در همین حال، می توانید هزینه های پهنای باند خود را کاهش دهید زیرا منابع سرور کمتری برای نمایش هر تصویر مورد نیاز است.
علاوه بر این، تصاویر نسل بعدی برخی از معیارهای اصلی زندگی وب را بهبود می بخشد، مانند بزرگترین رنگ محتوایی (LCP). این به شما کمک می کند تا تجربه کاربری (UX) وب سایت خود را افزایش دهید. همچنین، از آنجایی که سرعت و کاربر پسندی هر دو عامل رتبه بندی گوگل هستند، این یک راه عالی برای بهبود بهینه سازی موتور جستجو (SEO) و افزایش ترافیک ارگانیک است.
توجه به این نکته مهم است که در حالی که اکثر مرورگرهای محبوب از WebP پشتیبانی می کنند، AVIF هنوز به طور جهانی پشتیبانی نمی شود. با این حال، او نزدیک تر می شود. در زمان نگارش این مقاله، بیش از ۸۰ درصد از کاربران وب از مرورگرهای سازگار با AVIF استفاده می کنند. [۲]از جمله کروم و اپرا. این بدان معنی است که اکنون زمان مناسبی برای شروع استفاده از این نوع تصاویر در وب سایت خود است.
همچنین، اگر از راه حل موجود در این پست استفاده کنید، این ابزار به طور خودکار بهترین قالب را بر اساس مرورگر هر کاربر انتخاب می کند، بنابراین هرگز نگران مشکلات سازگاری نباشید.
پشتیبانی از مرورگر وب [۳] | پشتیبانی از مرورگر آویف [۲] |
۹۷٫۶۶٪ | ۸۳٫۹۶٪ |
چگونه تصاویر نسل بعدی را در سایت وردپرس خود میزبانی کنیم
در بیشتر موارد، برای شروع استفاده از WebP در وب سایت وردپرسی خود، تنها کاری که باید انجام دهید این است که مطمئن شوید نسخه وردپرس ۵٫۸ یا بالاتر را اجرا می کنید. اگر نه، می توانید نرم افزار اصلی خود را به روز کنید (که به هر حال برای عملکرد و امنیت ایده خوبی است). این به شما امکان می دهد تا تصاویر WebP را طبق معمول بارگذاری کنید.
با این حال، اگر از نسخه قدیمی وردپرس استفاده می کنید و نمی خواهید آن را ارتقا دهید، می توانید از یک افزونه برای ارائه تصاویر در قالب های نسل بعدی استفاده کنید. همچنین این ساده ترین راه برای فعال کردن فرمت AVIF در وب سایت شما است زیرا وردپرس در حال حاضر به طور پیش فرض از این نوع تصویر پشتیبانی نمی کند.
مرحله ۱: افزونه Optimole را نصب و فعال کنید
افزونه های زیادی برای بهینه سازی تصویر وجود دارد. اگر قبلاً بر روی سایت شما نصب شده است، ارزش بررسی را دارد تا ببینید آیا از قبل گزینه ای برای گنجاندن فرمت های تصویر نسل بعدی ارائه می دهد یا خیر.
اگر نه، Optimol یک گزینه عالی است. نه تنها به شما امکان می دهد تصاویر را در قالب های نسل بعدی ارائه دهید، بلکه به طور خودکار تصاویر وردپرس شما را فشرده، بهینه می کند و اندازه آن را تغییر می دهد:
علاوه بر این، می توانید به بسیاری از ویژگی های مفید (مانند بارگذاری تنبل) برای کاهش زمان تحویل محتوا دسترسی داشته باشید. Optimole حتی شبکه تحویل محتوای خود (CDN) را برای کاهش بیشتر زمان دانلود در نظر می گیرد. همه اینها این ابزار را به یک بسته همه کاره مفید برای استفاده حداکثری از تصاویر در وب سایت خود تبدیل می کند.
یکی از بهترین ویژگیهای Optimole این است که یک ابزار رایگان است، به این معنی که میتوانید نسخهای را انتخاب کنید که متناسب با نیازتان باشد. با افزونه رایگان می توانید تصاویر را به ۵۰۰۰ کاربر در ماه ارائه دهید. اگر یک وب سایت کوچک یا شخصی دارید، ممکن است این تنها چیزی باشد که نیاز دارید.
از طرف دیگر، اگر یک وب سایت با ترافیک بالا راه اندازی می کنید، می توانید یک برنامه پریمیوم را برای پذیرش بازدیدکنندگان بیشتر و دسترسی به پشتیبانی متخصص انتخاب کنید. شروع این طرح ها در ۱۹٫۰۸ دلار در ماه با پرداخت سالانه
برای شروع کار با این افزونه رایگان، کافی است به آن بروید پلاگین ها > جدید اضافه کن در داشبورد وردپرس از نوار جستجو برای یافتن «Optimole» استفاده کنید، سپس افزونه را نصب و فعال کنید:
پس از فعال سازی افزونه، از شما خواسته می شود که یک کلید API رایگان ایجاد کنید، که تنها چند ثانیه طول می کشد.
مرحله ۲ عملکرد تبدیل AVIF را فعال کنید
پس از فعال سازی افزونه Optimole، سایت شما به صورت خودکار قادر به نمایش تصاویر با فرمت WebP خواهد بود. به عبارت دیگر، فقط نصب افزونه برای فعال کردن نوع فایل WebP کافی است.
با این حال، برای فعال کردن نوع تصویر AVIF باید تنظیمات را تنظیم کنید. خوشبختانه، بسیار ساده است.
تنها کاری که باید انجام دهید این است که به آن بروید رسانه های جمعی در داشبورد وردپرس سپس انتخاب کنید Optimol. هنگامی که داشبورد Optimole را باز کردید، به آن بروید تنظیمات برگه:
ابتدا تنظیمات کلی افزونه به شما نمایش داده می شود. برای فعال کردن تبدیل AVIF، را انتخاب کنید پیشرفته در منوی سمت چپ کلیک کنید فشرده سازی.
گزینه های زیادی برای کاوش در اینجا وجود دارد. برای مثال، میتوانید تبدیل GIF به ویدیو را فعال کنید یا از CSS و جاوا اسکریپت از طریق Optimole استفاده کنید. توصیه می کنیم مشاهده مستندات افزونه برای دیدن همه گزینه های موجود
با این حال، پیدا کنید تبدیل AVIF را فعال کنید گزینه:
فقط این تنظیمات را روشن کنید تا تصاویر وردپرس خود را در قالبهای AVIF ارائه کنید. این تمام چیزی است که باید انجام دهید!
توجه به این نکته ضروری است که این ویژگی فقط برای بازدیدکنندگانی که مرورگرهایشان از فرمت های AVIF پشتیبانی می کند کار می کند. با این حال، خبر خوب این است که یک بازگشت وجود دارد. در عوض، به بازدیدکنندگانی که از مرورگرهایی که AVIF را پشتیبانی نمیکنند، استفاده میکنند، تصاویر در قالب WebP نشان داده میشوند. بنابراین، تقریباً همه کسانی که در سایت شما قرار می گیرند می توانند از این قالب های نسل بعدی بهره مند شوند.
شروع به نمایش تصاویر در قالب های نسل بعدی 🏁
Lighthouse انواع تصاویر WebP و AVIF را توصیه می کند زیرا به شما امکان می دهند تصاویر با کیفیت بالا را در عین حفظ اندازه فایل های کوچکتر به بازدیدکنندگان ارائه دهید. به این ترتیب، می توانید زمان بارگذاری خود را افزایش دهید و UX خود را صاف نگه دارید.
به نوبه خود، این می تواند به شما کمک کند عملکرد سایت خود را در Core Web Vitals بهبود بخشید و در جستجو رتبه بالاتری کسب کنید. به علاوه، تصاویر شما همچنان عالی به نظر می رسند!
همانطور که دیدیم، تنها دو مرحله ساده برای ارائه تصاویر در قالب های نسل بعدی در وردپرس لازم است:
- 👉 نصب و فعال کنید پلاگین Optimole.
- 👉 ویژگی تبدیل AVIF را روشن کنید.
برای راه دیگری برای بهبود عملکرد سایت خود در Lighthouse، راهنمای ما را در مورد چگونگی کاهش تعصب طرحبندی تجمعی بررسی کنید.
آیا هنوز در مورد نحوه نمایش تصاویر نسل بعدی در وردپرس سؤالی دارید؟ در نظرات به ما اطلاع دهید!