بهینه کردن سرعت بارگیری تصاویر وب سایت های سنگین در 5 گام

بهینه کردن سرعت بارگیری تصاویر وب سایت های سنگین در 5 گام
تصاویر بخش کلیدی هر وب سایتی هستند. براساس اطلاعات Http Archive تصاویر بیش از 60% داده های بارگذاری شده در صفحات وب را تشکیل می دهند. بنابراین بهینه سازی تصویر به عنوان جزء حیاتی، تقریبا در تمامی وب سایت های تجارت الکترونیک، اخبار، مد و ... اهمیت بالایی دارد. بهینه سازی تصاویر به طور کلی به سه دسته تقسیم می شوند: بارگیری سبکتر، بارگیری کمتر و بارگیری سریعتر. روش هایی که در این مقاله به بررسی آن ها خواهیم پرداخت در یکی از این سه دسته قرار می گیرد.
 
1. تغییر اندازه تصاویر
مطابق با اندازه ای که برای وب سایت تان نیاز دارید، تصاویر خود را  تغییر دهید و منظور از تغییر اندازه استفاده از کدهای html و css نیست بلکه باید تصاویر را در سمت سرور تغییر دهید و به مرورگر بفرستید این عمل باعث افزایش سرعت بارگیری می شود. اگر این تغییر اندازه به درستی اعمال نشود مشکل بهینه نبودن سرعت بارگیری تصاویر همچنان باقی خواهد ماند به عنوان مثال در سایتی که می توان از یک تصویر 200*200 استفاده کرد اگر از یک تصویر 300*200 استفاده شود سرعت بارگیری 21% کندتر خواهد بود حال اگر حجم تصاویر زیاد باشد این کاهش سرعت بسیار چشم گیر خواهد بود.
2. انتخاب فرمت مناسب
گام بعدی انتخاب فرمت صحیح و کیفیت خوب برای هر یک از تصاویر سایت می باشد. فرمت های jpg, .png, .gif. رایج ترین فرمت های تصویری هستند که در حال حاضر در وب سایت ها از آن ها استفاده می شود و هر کدام از این موارد کارکرد خاص خود را دارند. علاوه براین فرمت ها، به تازگی فرمت جدیدی با نام webp ایجاد شده است. این فرمت اندازه تصویر را 30% کوچکتر می کند و بیش از 75% مرورگرهای مدرن این فرمت را پشتیبانی می کنند.
 بعد از اندازه تصویر می توان به کیفیت تصویر اشاره کرد. هر چه کیفیت تصویر بیشتر باشد، اندازه تصویر بیشتر می شود و در نتیجه سرعت سایت کندتر می شود. به عنوان یک استاندارد، سطح کیفی 80 تا 90 (در مقیاس 100) معمولا معادله ی خوبی بین اندازه و کیفیت است.
3. اول تلفن همراه!
اگر وب سایت تجاری دارید و کاربران تلفن همراه را نادیده گرفته باشید، اشتباه بزرگی را مرتکب شده اید. داده ها نشان می دهد که تقریبا 60 درصد از ترافیک جهانی اینترنت ناشی از استفاده تلفن های همراه است. بنابراین باید در هنگام طراحی سایت ها برای کاربران تلفن همراه دقت مضاعفی به کار برد. اگر وب سایت واکنش گرایی دارید در این صورت به راحتی می توانید از تصاویر واکنش گرا استفاده کنید. در این حالت در کد css مربوط به تصویر می توانید از ویژگی های srcset و sizes در تگ img استفاده کنید. با این کد برای اندازه های مختلف، لیستی از تصاویر خواهید داشت که مرورگر بر حسب اندازه دستگاه شما، اندازه تصویر را انتخاب خواهد کرد.ویژگی srcset آدرس تصاویر را ذخیره می کند و ویژگی sizes نمایشگر اندازه قالب تصاویر است.
,img srcset="image-320w.jpg 320w>
             ,image-480w.jpg 480w             
             "image-800w.jpg 800w             
     ,sizes="(max-width: 320px) 300px     
            ,max-width: 480px) 440px)            
            "800px            
     <"src="image-800w.jpg" alt="Image     
 
4. منابع کمتری بارگذاری کنید
حتی پس از بهینه سازی تمام تصاویر، بارگذاری بیش از حد آنها باعث کاهش سرعت وب سایت شما می شود و برای کاربران تجربه منفی را به ارمغان می آورد. به عنوان مثال می توان به جای تصاویر از دکمه ها، گرادیان و سایر عناصر پیشرفته css استفاده کرد. lazy loading روش مهم دیگری است که می توانید از آن استفاده کنید. lazy loadıng یعنی تصاویری که فعلا به آن ها نیازی نداریم، بارگیری نمی کنیم و بارگذاری این تصاویر زمانی اتفاق می افتد که تصویر وارد یا در حال ورود به صفحه نمایشگر است.
 
 
فرض کنید که در وب سایت تان 100 محصول دارید و اگر شما همه ی این تصاویر را در یک لحظه و در ابتدای بارگذاری صفحه درخواست کنید، سرعت بارگذاری کند خواهد شد و میزان مصرف پهنای باند و منابع cpu افزایش پیدا خواهد کرد. با lazy loading سرعت بارگذاری افزایش چشم گیری خواهد داشت و در نهایت کاربر تجربه خوبی در هنگام کار با وب سایت خواهد داشت.
 
5. استفاده از CDN خوب برای تحویل تصاویر
بعد از اینکه مشکلات مربوط به اندازه تصویر و تعداد تصاویر بارگذاری شده را حل کردید، اکنون، زمان گام بعدی یعنی بارگذاری سریع تصاویر فرا رسیده است. شبکه تحویل محتوا یا CDNها مجموعه ای از سرورهای ذخیره شده/ پروکسی های توزیع شده در سطح جهانی هستند. در صورتی که اطلاعی از CDNها ندارید می توانید در مقاله چگونه یک CDN کار می کند اطلاعات مورد نیاز را به دست آورید.
 
 
 بیایید فرض کنیم سرور وب سایت شما در کشور ایالات متحده قرار دارد. و تصاویر مربوط به وب سایت، در شبکه جهانی سرورهای توزیع شده شما (CDN) قرار می گیرد. سپس، اگر یک کاربر از کشوری دیگر مثلا برزیل یک عکس از وب سایت شما را درخواست کند، در این لحظه به جای این که تصویر از سرور شما در ایالات متحده برای کاربر ارسال شود، CDN، آن تصویر را از یک گره نزدیک به کاربر ارائه می کند. این عمل زمان بارگذاری تصاویر را به خوبی کاهش می دهد.
هنگام انتخاب CDN، مطمئن شوید که CDN از HTTP/2 پشتیبانی می کند. HTTP/2 یک پروتکل جدید برای ارائه محتوا در وب است، که می تواند به طور قابل توجهی سرعت بارگیری را افزایش دهد. این پروتکل از تکنیک هایی مانند چندگانه سازی، فشرده سازی هدر برای کاهش زمان بارگذاری استفاده می کند. در حال حاضر این پروتکل توسط این CDN ها پشتیبانی می شوند. 
 
نتیجه گیری
در این مقاله تمام تکنیک های اصلی در زمینه بهینه سازی تصویر و بهبود عملکرد را پوشش داده ایم. با استفاده از این اطلاعات، می توانید بیش از 90 درصد مشکلات مربوط به تصویر را حل کنید که نتیجه آن زمان بارگیری سریع تر صفحه و رتبه بندی بالاتر در نتایج جستجو می باشد. همواره این سه مورد را برای تصاویر مربوط به وبسایت تان به یاد داشته باشید:
بارگیری سبکتر، بارگیری کمتر، بارگیری سریع تر
 
منبع:
نظر
‌‌دسته‌بندی‌‌ها
فیلترها
Sort
display