نکاتی برای داشتن سایتی ( Site Faster ) سریعتر ( قسمت 9 )

- visibility ۰ mode_comment

در این قسمت با ادامه نکات برای داشتن سایتی سریعتر در خدمت شما هستم. با ما همراه باشید.

اصل چهارم : بهینه سازی استفاده از تصاویر و ...

نکته 29: تعداد تصاویر رو کاهش دهید

download fewer

همونطور که در قسمتهای قبلی اشاره شد ، بیش از نیمی از منابعی که از سرور دانلود میشوند ، تصاویر هستن. بصورت میانگین در 100 هزار سایت برتر دنیا ، 58 تصویر دانلود میشه. پس سعی کنید تا جایی که میشه تعداد تصاویر مورد استفاده در سایتتون رو کاهش دهید.

نکته 30: بوسیله تصاویر ، سایت خود رو به نابودی نکشانید

avoid 1

گاهی اوقات پیش میاد که از تصاویر کوچک و زیادی باید در سایت استفاده کنید ، اگر تعداد اونا از 20 بیشتر بشه ، خیلی میتونه زمان لود صفحه شما رو افزایش بده ، چون برای درخواست هر تصویر تقریبا زمانی تلف خواهد شد و ذره ذره جمع گردد وانگهی دریا شود!!! پس از چیزی شبیه به زیر استفاده نکنید:

avoid 2

اگر بتونین تعداد تصاویر سایت خودتون رو کاهش بدین ، خیلی به بهینه کردن سایت خودتون کمک کرده اید.

نکته 31: تا جای ممکن از Image Sprite استفاده کنید

مطمئن هستم که این واژه به گوش اکثر شما خورده. بیاین یبار دیگه با کارایی و اهمیت Sprite آشنا بشیم:image sprite

در سمت چپ 6 تصویر کوچک قرار دارد و به همین دلیل برای گرفتن این تصاویر باید 6 درخواست فرستاده بشه و حجم اونا 96 کیلوبایت هست. حالا در سمت راست اومدیم و اونارو Sprite کردیم ، حالا یک تصویر داریم و برای دریافت اونا از سرور فقط یک درخواست فرستاده میشه و حجم اون هم به 21 کیلوبایت کاهش پیدا کرده. پس چرا از Sprite با داشتن این همه مزیت استفاده نکنیم؟؟ بعد از ساخت Sprite میتونین با استفاده از CSS ، هر قسمت از تصویر رو سر جای خودش قرار بدین و با این کار میتونین قدم مهمی برای داشتن سایتی بهینه تر بردارید.

نکته 32: تا جایی که امکانش هست ، Sprite رو با دستان خودتون بسازید!

همونطور که میدونین سایتها و ابزارهای زیادی هستن که میتونن Sprite رو بصورت اتوماتیک و بدون دخالت شما و با سرعت زیادی بسازن. فرض کنید که ما رفتیم و تعدادی عکس رو به یک ابزار دادیم که اونارو برای ما Sprite کنه ، خروجی بصورت زیر بوده:sprite1

همونطور که میبینید ، مقدار زیادی فضای خالی وجود داره که بلا استفاده مونده که من اونا رو بصورت قرمز نشون میدم:sprite 2

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

در قسمت بعدی نکات بیشتری رو براتون قرار میدم.

امیدوارم از این مطلب خوشتون اومده باشه.

پیروز و سربلند باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.