ڕێبەری گشتگیر بۆ ئۆپتیمایزکردنی وێنەکان لە گەشەپێدانی وێبدا: چۆن خێرایی سایت ببەینە لوتکە؟

یەکێک لە گەورەترین کێشەکانی ماڵپەڕە مۆدێرنەکان، هێواشبوونی لۆدبوونی پەڕەکانە لەلایەن بەکارهێنەرەوە. کاتێک سەیری داتاکان دەکەین، دەبینین زیاتر لە ٥٠٪ بۆ ٦٠٪ی گشتی کێشی (Page Weight) هەر ماڵپەڕێک بەهۆی وێنە قورس و نادروستەکانەوەیە.

ئەگەر سایتەکەت تەنها ٣ چرکە زیاتری پێ بچێت بۆ لۆدبوون، بەشێکی زۆری کڕیار یان فێرخوازان پەڕەکە جێدەهێڵن (Bounce Rate بەرز دەبێتەوە) و ئەمەش زیانێکی گەورە بە SEO و ڕیزبەندی سایتەکەت لە گووگڵ دەگەیەنێت. لێرەدا، بە تەواوی فێری ئەو تەکنیکانە دەبین کە وێنەکانت بە کەمترین کێش و بەرزترین کوالێتی نیشانی بەکارهێنەر بدەیت.

1- گۆڕینی فۆرمات بۆ وەشانی مۆدێرن (WebP & AVIF)

بۆ چەندین ساڵ فۆرماتەکانی JPEG و PNG پاشای وێب بوون، بەڵام بۆ وێبی مۆدێرن چیتر گونجاو نین.

WebP: ئەم فۆرماتە کە لەلایەن گووگڵەوە پەرەی پێدراوە، کێشی وێنەکان بە ڕێژەی ٢٥٪ بۆ ٣٤٪ کەمتر دەکاتەوە بە بەراورد بە JPEG، بەبێ ئەوەی هیچ ڕوونی و کوالێتییەک لەدەست بدات.
AVIF: نوێترین فۆرماتە کە کێشەکە هێشتا زیاتر دادەبەزێنێت، بەڵام پێویستە دڵنیابیتەوە لەوەی برۆوسەرە کۆنەکان پشتگیری دەکەن.

ئامۆژگاری: ئەگەر لە لاراڤێل کار دەکەیت، دەتوانیت لە کاتی ئەپڵۆدکردنی وێنەکەدا سود لە پاکێجی Intervention Image وەربگریت بۆ ئەوەی خۆکارانە وێنەکان بکەیتە .webp.

2- بەکارهێنانی Responsive Images (تەکنیکی srcset)

شێتایەتییە ئەگەر وێنەیەکی گەورە کە قەبارەکەی 3840x2160 (4K) پێکسڵە بنێریت بۆ مۆبایلێکی بچووک کە پێویستی تەنها بە وێنەیەکی 400px هەیە! برۆوسەری مۆبایلەکە ناچاری لۆدکردنی هەموو فایلە قورسەکە دەبێت.

چارەسەر بەکارهێنانی تاکی <picture> یان ئەتڕیبیوتی srcsetـە لە HTML بۆ ئەوەی بەپێی قەبارەی شاشەکە، وێنەی گونجاو بارببێت:

HTML

<picture>
    <source media="(min-width: 1024px)" srcset="banner-large.webp">
    <source media="(min-width: 768px)" srcset="banner-medium.webp">
    <img src="banner-small.webp" alt="Ferkar Academy" loading="lazy">
</picture>

3- کارپێکردنی Lazy Loading (داگرتنی تەمبەڵانە)

بۆچی برۆوسەر کاتی خۆی بکوژێت بۆ داگرتنی ئەو وێنانەی کە لە خوارەوەی پەیجەکەن (Footer)، لەکاتێکدا کڕیارەکە هێشتا سکڕۆڵی نەکردووە بۆ خوارەوە؟

بە زیادکردنی کڵاسی loading="lazy" بۆ تاکی <img>، برۆوسەرەکە تەنها کاتێک وێنەکە لۆد دەکات کە بەکارهێنەرەکە لێی نزیک دەبێتەوە:

HTML

<img src="course-cover.webp" alt="Laravel Course" loading="lazy">

تێبینی: ئەم تایبەتمەندییە ئێستا لە لایەن ٩٩٪ی برۆوسەرە مۆدێرنەکانەوە پاڵپشتی دەکرێت بەبێ پێویستی بە هیچ کۆدێکی JavaScript.

4- کەمکردنەوەی کێش لەسەر سێرڤەر (Image Compression)

کاتێک سیستمەکەت ڕێگا بە بەکارهێنەر دەدات وێنەی پرۆفایل یان وێنەی بەرهەم دابنێت، زۆرجار وێنەی گەورەی ٥ مێگابایتی ئەپڵۆد دەکەن. دەبێت لە باکێنددا (Backend) ڕێگری لەمە بکەیت.

ئەگەر لاراڤێل بەکاردەهێنیت، دەتوانیت پاکێجی بەناوبانگی spatie/laravel-image-optimizer بەکاربهێنیت. ئەم پاکێجە بە شێوازی ئۆتۆماتیکی لە پشتەوە کێشی وێنەکان بێ تێکچوونی کوالێتی دادەبەزێنێت پێش ئەوەی لەسەر سێرڤەرەکە یان لەسەر S3 پاشەکەوت ببن.

🏁 ئەنجامگیری

ئۆپتیمایزکردنی وێنەکان بژاردە نییە، بەڵکو بەشێکی سەرەکییە لە پەرەپێدانی وێبی پڕۆفیشناڵ. بە جێبەجێکردنی تەنها ئەم چوار هەنگاوە:

گۆڕینی فۆرماتەکان بۆ WebP.
بەکارهێنانی Lazy Loading.
ڕێکخستنی Responsive Images.
کۆمپڕێسکردنی داتا لە سێرڤەرەوە.

دەبینیت خێرایی ماڵپەڕەکەت لە پێوەرەکانی Google PageSpeed Insights لە سوور یان زەردەوە ڕاستەوخۆ دەبێتە سەوز و دەگاتە سەروو ٩٠٪!