نحوه بهینه سازی بارگذاری تصاویر در وبسایت

داشتن یک سایتِ آکنده‌از تصاویر خوشگل قادر است بسیار خوب باشد، آموزش سئو کاربردی ولی همینطور قادر است اختلال بزرگی در بار گذاری برگه نیز به شمار آید. اکثر وقت ها تارنما‌هایی را مشاهده میکنم که صرفا برای داشتن یک اسلاید در شیت مهم خویش، تصاویری با وسعت یک سری مگابایت را لود می‌نمایند. فکر کنید با یک موبایل که اتصال وب ضعیف 3G دارااست میخواهید اینگونه وبسایتی را گشوده نمایید. لود اینگونه وبسایتی قرن‌ها زمان خواهد برد و فیض‌ی آن صرفا سوراخ کردن تارنما به وسیله یوزرها خواهد بود. شما میتوانید با به کار گیری از Chrome Devtools این زمینه را در تارنما فعلی خویش تست فرمائید.

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

در نمونه ذیل اینجانب یک سایت بی آلایش را ساخته و تصویری با وسعت ۴.۸ مگابایت را در دور نما آن قرار دادم. همان گونه که میبینید DOM در پهنا ۱.۱۴ ثانیه بار گذاری شد‌ه‌است. بدین ترتیب مخاطب محتوای سایت را بعداز ۱.۱۴ ثانیه مشاهده خواهد کرد. این فرصت در مقابل یک وب 3G بسیار بهتر میباشد. با این وجود تصویر بگراند پس از ۲۷.۳۲ ثانیه لود میشود و استفاده کننده به آرامی ظواهر شدن تصویر را مشاهده می‌نماید. هنگامی که تصویر بار گذاری خواهد شد، ممکن میباشد استفاده کننده سایت شما‌را سوراخ نموده باشد.

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

چاره
پس به چه شکل خواهیم توانست بر این خلل غلبه کنیم؟ اولی کاری که ما قادر خواهیم بود اعمال دهیم این میباشد که با به کار گیری از ابزارهای مختلفی که در وب وجود داراست، تصاویر بگراند را فشرده‌سازی کنیم. اعمال این عمل سهل میباشد و مجال بار گذاری را به حدود ۱۰ ثانیه کاهش میدهد. شاید این گام بسیار بزرگی به حیث بیاید البته ۱۰ ثانیه هنوز مجال متعددی میباشد.

مرحله‌ی آینده، بار گذاری یک تصویر به اصطلاح "placeholder" پیش از لود تصویر اساسی میباشد. این تصویر نسبت به تصویر اساسی وضوح کمتری دارااست. وقتی که‌این تصویر را ساخت میکنیم، وضوح تصویر را از ۴۳۹۲x۷۳۷۲ پیکسل به ۱۱x۲۰ پیکسل کاهش می دهیم. فیض‌ی این عمل کاهش وسعت تصویر از ۴.۸ مگابایت به ۹۰۰ بایت خواهد بود.

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

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