۵ قدم برای تسریع وبسایت‌های شما که تصاویر سنگین به همراه دارند

تصاویر یک کامپوننت کلیدی در هر وبسایتی هستند. با توجه به آمار، تصاویر ۶۰ درصد داده‌های موجود بر روی وب را تشکیل می‌دهند. بهینه‌سازی تصویر با توجه به حیاتی بودن آن، بسیار مهم است و اگر به دنبال تسریع وبسایت خود هستید، احتمالا راحت‌ترین روش است.

بهینه‌سازی تصویر به می‌تواند به طور گسترده به ۳ دسته تقسیم شود. بارگذاری سبک‌تر، بارگذاری کمتر و بارگذاری سریع‌تر. این ۵ تکنیک و هر تکنیک دگیری که بخواهید استفاده کنید، به احتمال زیاد در یکی از این سه دسته قرار می‌گیرند.

پس بیایید شروع کنیم و به برخی تکنیک‌های ساده که امروزه می‌توانید استفاده کنید و پیشفرت خوبی در بهینه‌سازی وبسایت‌های پر از عکس خود داشته باشید، نگاهی داشته باشیم.

1. تصویر خود را تغییر اندازه دهید

این مورد اجباری است. عکس‌های خود دقیقا به اندازه‌ای که در وبسایت شما مورد نیاز است، تغییر اندازه دهید. البته منظور من تغییر اندازه دادن با استفاده از CSS یا در HTML نیست. منظور من تغییر اندازه تصویر بر روی سرور، و سپس ارسال آن به مرورگر است.

برای مثال، فرض کنید که یک تصویر 4000 پیکسل در 3000 پیکسل مربوط به یه محصول که می‌خواهید بر روی وبسایت خود قرار دهید، دارید. گرچه بر روی وبسایت خود، باید تصویر کوچک‌تری از این محصول را نمایش دهید. مثلا در صفحه لیست محصولات ۲۰۰ پیکس در ۳۰۰ پیکسل باشد، و در صفحه جزئیات محصول ۸۰۰ پیکسل در ۱۰۰۰ پیکسل باشد. مطمئن شوید که قبل از ارسال تصویر به مرورگر، تصویر اصلی را تا این ابعاد پایین بیاورید. تصاویر تغییر اندازه داده شده بسیار کوچک‌تر از تصویر اصلی هستند و بسیار سریع‌تر از تصاویر اصلی بارگذاری خواهند شد.

<h2>XYZ Product Detail</h2>
 
  <!-- از این روش استفاده نکنید؛ زیرا تصویر در سایز اصلی بارگذاری خواهد شد و مرورگر آن را تغییر اندازه خواهد داد. -->
  <img src="image.jpg" alt="full size image" width="800" height="1000" />
 
  <!-- از یک تصویر تغییر اندازه داده شده استفاده کنید، که تغییر اندازه در سمت سرور انجام شده است و نیازی به آن در مرورگر نیست.-->
  <img src="resized_800x1000_image.jpg" alt="resized image" />

به نظر من، تغییر اندازه غیر صحیح تصاویر بزرگ‌ترین زمینه بهینه‌سازی در اکثر وبسایت‌ها است. معمولا هم ما توسعه دهندگان، آن را نادیده می‌گیریم. این سناریو را در نظر بگیرید: با تصاویری با اندازه کاملا مناسب برای وبسایت خود شروع می‌کنید. در طی ماه‌های آینده، طرح وبسایت و ابعاد تصویر شما تغییر می‌کنند. گرچه، به جای ساختن تصاویر جدید که با این ابعاد مطابقت داشته باشد، از یک راه جایگزین و کوتاه‌تر استفاده می‌کنید. برای مثال، در جایی که یک تصویر ۲۰۰ پیکسل در ۲۰۰ پیکسل می‌تواند کافی باشد، از یک تصویر ۲۰۰ پیکسل در ۳۰۰ پیکسل استفاده می‌کنید. حدث می‌زنم که این اتفاق برای همه پیش می‌آید.

در مثال بالا، تفاوت موجود در حد چند کیلوبایت، می‌تواند کوچک به نظر برسد. اما همچنان یک تفاوت ۲۱ درصدی وجود دارد. این تفاوت کوچک وقتی که در چندین تصویر اعمال می‌شود،‌ ظرفیت تسریع وبسایت شما و کاهش حجم مصرف پهنای باند تا ۲۱ درصد را دارد.

بهترین سناریو این است که شما یک سرور تصویر داشته باشید که بتواند تصاویر را فقط با تغییر URL آن‌ها، به صورت realtime در ابعاد داده شده تغییر اندازه دهد. به این صورت هر زمان که ابعاد تصویر مورد نیاز شما تغییر کنند، فقط باید آن ابعاد جدید را در URL تصاویر خود برای آن‌ها مشخص کنید.

تعداد زیادی پیاده‌سازی اوپن سورس و سمت سرور وجود دارند که می‌توانید خودتان پیاده‌سازی کنید. ImageKit یک سرویس اینچنینی است. این سرویس جدا از تمام امکانات، تغییر اندازه و crop کردن را به صورت realtime فراهم می‌کند.

2. تصویر خود را بهینه‌سازی کنید

قدم بعدی در تسریع وبسایت‌های پر از تصویر، انتخاب قالب و کیفیت مناسب برای تمام تصاویر بر روی وبسایت خود است.

JPG، PNG و GIF رایج‌ترین قالب‌هایی هستند که در حال حاضر بر روی وب استفاده می‌شوند و برای موارد استفاده مختلف مناسب هستند. یک قالب تقریبا جدید هم به نام WebP وجود دارد که بهترین این قالب‌ها را ترکیب می‌کند، ۳۰ درصد کم حجم‌تر است و تقریبا بر روی ۷۵ درصد مرورگرهای مدرن پشتیبانی می‌شود.

با توجه به منافع کارایی، بهتر است تصاویر خود را در حد ممکن در قالب WebP ارائه دهید. بر روی مرورگرهای دیگر، می‌توانید به ارائه قالب‌های اصلی ادامه دهید.

به طور ساده کیفیت عکس، اندازه‌گیری‌ای از ظاهر تصویر است. یک همبستگی مستقیم بین تغییرات کوچک در اطلاعات رنگ برای فشرده‌سازی تصویر وجود دارد. سطح کیفیت ۸۰ تا ۹۰، (در مقایس ۱۰۰) یک استاندارد خوب بین حجم و کیفیت عکس است.

مقایسه‌ای میان تصویر مشابه، انکود شده در سطوح کیفیت مختلف. این تصاویر از نظر بصری تقریبا یکی هستند، اما حجم مختلفی دارند.

یک راه ساده برای رسیدن به بهینه‌سازی قالب و کیفیت مناسب، استفاده از ImageKit برای تحویل تصاویر است. این سرویس به طور خودکار در هر زمان که ممکن باشد، تصایر را به WebP تبدیل می‌کند و همچنین کیفیت تصویر را به صورت realtime بهینه‌سازی می‌کند.

3. برای موبایل بسازید

در دنیای امروزی اگر می‌خواهید یک وبسایت را به صورت جدی اجرا کنید، نادیده گرفتن کاربران موبایل یک اشتباه بزرگ است. داده‌ها نشان می‌دهند که تقریبا ۶۰ درصد ترافیک جهانی از دستگاه‌های موبایل منشا می‌گیرد. تلفن‌های موبایل قدرتمندتر شده‌اند و شبکه‌های موبایل بهتر شده‌اند. همچنین داده‌ها نشان می‌دهند که سرعت داده‌های موبایل از پهنای باند کندتر است. در برخی کشورها سرعت اینترنت موبایل بسیار بد است. پس مهم است که هنگام طراحی تجربه وب برای موبایل، مواظب باشید.

اگر یک وبسایت پاسخگو برای دسکتاپ و موبایل دارید، می‌توانید به سراغ استفاده از تصاویر پاسخگو بروید. با استفاده از صفات 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">

صفت sizes اطلاعاتی درباره طرح تصویر می‌دهد، و صفت srcset هم لیست تصویر را به همراه عرض آن به صورت مشخص شده بر روی هر URL می‌دهد.

فاکتور دیگری که در هنگام کار با موبایل‌ها به میان می‌آید، مقدار Device Pixel Ratio (نسبت پیکسل دستگاه) یا DPR است. تلفن‌های همراه مدرن، صفحاتی با چگالی بالا را به همراه دارند که در یک اینچ مربع مشابه، پیکسل‌های بیشتری را دارند.

تصویری که بر روی دستگاه‌های معمولی ظاهر خوبی دارد، بر روی صفحاتی با چگالی بالا کمی محو خواهد بود. یک راه حل برای این مشکل این است که تصویری با اندازه ۲ برابری بر روی صفحاتی با DPR 2، تصویری با اندازه ۳ برابری بر روی صفحاتی با DPR 3 و تصویری با اندازه ۱ برابر بر روی باقی دستگاه‌ها بارگذاری کنید. این کار می‌تواند با استفاده از تگ تصاویر پاسخگو، به این صورت انجام شود:

<img srcset="image-320w.jpg 1x,

             image-640w.jpg 2x

     src="image-320w.jpg" alt="Image">

یک مشخصه مدرن به نام Client Hints، شروع کار با تصاویر پاسخگو را ساده‌تر می‌کند و باعث می‌شود که کد شما ظاهر مرتب‌تری در مقایسه با روش صفات srcset و sizes داشته باشد. نحوه کار دقیق Client Hits یک مسئله طولانی است که در محدوده این مقاله نیست.

ImageKit پارامترهای DPRای بر پایه URL، به همراه پارامترهای resize و crop فراهم می‌کند، و همچنین از Client Hits پشتیبانی می‌کند که باعث می‌شود استفاده از تصاویر پاسخگو و تحویل یک تصویر بی نقص بر روی دستگاه‌های مختلف آسان‌تر شود.

4. منابع کمتری را بارگذاری کنید

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

برای مثال به جای بارگذاری تصاویر، می‌توانید با استفاده از CSS، دکمه یا دیگر عناصر موجود را قرار دهید.

یک تکنیک مهم‌تر هم این است که تصاویر خود را به صورت کند بارگذاری کنید. بارگذاری کند اساسا به این معنی است که بارگذاری تصاویری که سریعا مورد نیاز نیستند را به تاخیر بیندازیم. معمولا هر تصویری که برای کاربر بر روی صفحه او قابل دیدن نیست، می‌تواند بعدا بارگذاری شود. مثلا وقتی که تصویر در معرض قرار گرفتن در صفحه است.

موقعیتی را تصور کنید که ۱۰۰ محصول را بر روی صفحه خود دارید. اگر تمام ۱۰۰ محصول را در زمان مشابه و در اول راه درخواست کنید، زمان بارگذاری کندتر خواهد شد. به این صورت، تصاویر با آیتم‌های حیاتی دیگر بر روی صفحه، مانند CSS و JS بر روی پهنای باند شبکه و منابع CPU رقابت می‌کنند.

با بارگذاری کند، ما فقط بر فرض ۳۰ تصویری که در اول کار در دید کاربر هستند را بارگذاری می‌کنیم. سپس وقتی که کاربر شروع به اسکرول کردن می‌کند، تصاویر بیشتری را بارگذاری می‌کنیم. این مسئله به ما در پیشرفت زمان بارگذاری اولیه و تجربه کاربری کمک می‌کند. مواردی پیش خواهند آمد که کاربر در کل صفحه اسکرول نمی‌کند و از این رو برخی تصاویر کاملا بارگذاری نمی‌شوند. در نهایت در مصرف پهنای باند هم صرفه‌جویی خواهید کرد.

شروع کار با بارگذاری کند با استفاده از کتابخانه‌های JavaScript مانند jQuery Lazy بسیار آسان‌ است. همچنین می‌توانید به اِی‌پی‌آی IntersectionObserver نیز نگاهی داشته باشید، که از کتابخانه‌های JavaScript کارآمدتر هم هست.

5. از یک CDN خوب برای تحویل تصویر استفاده کنید

پس از این که حجم و تعداد تصاویر را مدیریت کردید، قدم بعدی این است که مطمئن شوید تصاویری که بر روی وبسایت شما بارگذاری می‌شوند، سریعا بارگذاری می‌شوند. کاهش زمان بارگذاری تصاویر نه تنها در کاهش زمان بارگذاری کلی به شما کمک می‌کند، بلکه تجربه کاربری را نیز ارتقا می‌دهد.

شبکه‌های تحویل محتویات (CDN = Content Delivery Networks) مجموعه‌ای از سرورهای caching / پروکسی، توزیع شده به صورت جهانی هستند.

فرض کنید که وبسایت شما در ایالات متحده قرار دارد. یک CDN تصاویر شما را در شبکه توزیع شده به صورت جهانی از سرورهای خود، cache‌ می‌کند. (در واقع مسئله بسیار پیچیده‌تر از این است، اما در جهت ساده‌سازی همین را تصور می‌کنیم.) سپس، اگر کاربری از برزیل برای یک تصویر بر روی وبسایت شما درخواست کند، CDN به جای این که آن تصویر را از ایالات متحده دریافت کند، از یک node نزدیک به برزیل آن را تحویل می‌دهد. این باعث می‌شود که زمان مورد نیاز برای بارگذاری تصویر کمتر شود.

وقتی که یک CDN را انتخاب می‌کنید، مطمئن شوید که از HTTP/2 پشتیبانی می‌کند. HTTP/2 یک پروتکل جدید برای تحویل محتویات بر روی صفحه است، که به طور قابل توجهی به شما در کاهش زمان بارگذاری کمک می‌کند. این پروتکل از تکنیک‌هایی مانند multiplexing، فشرده‌سازی header و server push برای کاهش زمان بارگذاری استفاده می‌کند.

چگونه می‌توان وبسایت را برای مشکلات مربوط به تصویر آزمایش کرد؟

ابزار مختلفی برای انجام این کار وجود دارند. یکی از این روش‌ها، استفاده از تجزیه و تحلیل کننده وبسایت، توسط ImageKit است. فقط کافی است که نام یک وبسایت را در آن بنویسید، و در عرض چند ثانیه پیشنهاد‌هایی مربوط به تغییر اندازه داده، بهترین قالب، بارگذاری کند و HTTP/2 به شما می‌دهد. Google هم بر روی یک پروژه اوپن سورس به نام Lighthouse کار کرده است.

نتیجه گیری

در این مقاله، تمام تکنیک‌های اصلی حول بهینه‌سازی و کارایی بهتر وبسایت را پوشش داده‌ایم. با داشتن این اطلاعات، می‌توانید ۹۰ درصد مشکلات مربوط به تصاویر خود را حل کنید. همیشه به یاد داشته باشید: برای تصاویر وبسایت‌های خود، سبک‌تر بارگذاری کنید، کمتر بارگذاری کنید و سریع‌تر بارگذاری کنید.

منبع