سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه 24) : Performance یا کارائی - قسمت 3

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۸ فروردین ۱۳۹۶

فهرست محتوای این مقاله

    frontend

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

    Performance یا کارائی

    • از چه روشهایی برای بهبود عملکرد سایتتون استفاده میکنید؟

    همونطور که میدونین روشهای متعدد و فراوانی هستن که میتونیم با استفاده از اونا مشکلات مربوط به Performance رو برطرف کنید و سایتی سریعتر و بهتر رو داشته باشیم. این مشکلات بخاطر HTTP و کمبودها و مشکلات اون به وجود میاد. مثلا یکی از روشهایی که برای بهبود عملکرد وجود داره، یکی کردن فایلهای CSS و Javascript و کاهش دادن تعداد درخواستهای مرورگر می باشد. این مورد یکی از معایب HTTP هست و این روش راهی هست که میتونین با استفاده از اون این عیب HTTP رو برطرف کنید و دور بزنید. با اومدن HTTP2 بسیاری از معایب HTTP برطرف شده و سایتتون بصورت اتوماتیک خیلی بهینه تر و سریعتر خواهد شد. بر روی HTTP2 دیگه نیازی نیست که بصورت دستی فایلهای CSS و Javascript رو یکی کنیم و این کارها بصورت اتوماتیک انجام میشه. اگر میخواید از مزایای HTTP2 بهره مند بشید، سایتتون رو بصورت HTTPS در بیارید تا این مورد برای شما فعال بشه. بیشتر مرورگرهای مدرن و جدید از HTTP2 پشتیبانی میکنن و میتونین از مزایای اون بهره مند بشید.

    در اینجا تعدادی روش که میتونین با استفاده از اونا Performance سایت خودتون رو ارتقاء بدین بهتون میگیم.

    بهینه سازی تصاویر

    یکی از مهمترین مواردی که در زمینه ارتقای عملکرد سایت وجود داره، بهینه سازی تصاویر هست. بر اساس مطالعاتی که در سال 2016 انجام شده، بصورت میانگین 64 درصد حجم سایتها از تصاویر تشکیل شده. ابزارهای مختلفی وجود داره که با استفاده از اونا میتونین حجم عکسها و تصاویرتون رو کاهش بدین. همچنین برای هر زبان و فریم ورکی یک ابزار برای بهینه سازی وجود داره که کارها رو اتوماتیک برای شما انجام میده و دیگه لازم نیس که برای هر تصویر، بصورت دستی و یکی یکی اونا رو بهینه سازی کنید و درون هاستتون قرار بدین. برای CMS ها مثل WordPress و Joomla و Drupal و ... هم پلاگینهایی قرار داره که میتونین از اونا استفاده کنید.

    علاوه بر این موارد میتونین از فرمت webP برای تصاویر استفاده کنید و با اینکار حجم تصاویر رو به مقدار زیادی کاهش بدین. مرورگرها هنوز پشتیبانی خوبی از این فرمت ندارن و فقط Chrome و Opera از اون پشتیبانی میکنن. برای فعال کردن این فرمت در سرور و اینکه بجای jpg و png، فرمت webP پشتیبانی بشه، باید کد زیر رو درون فایل htaccess قرار بدین:

    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
        RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
    </IfModule>
    
    <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
    </IfModule>
    
    AddType image/webp .webp

    اگر از وردپرس استفاده میکنید، میتونین از پلاگینهای زیادی استفاده کنید تا اینکار رو برای شما انجام بدن. همچنین با استفاده از ابزارهای مثل Grunt و Gulp هم میتونین چنین کارهایی رو انجام بدین.

    همچنین مطمئن بشید که ویژگی های srcset و sizes برای تگ img استفاده کنید و اون رو بصورت واکنشگرا در بیارید و کاری کنید که بر روی هر صفحه نمایشی، عکس متناسب با همون دانلود و نمایش داده بشه.

    موارد زیاد دیگه ای هم هستن که با استفاده از اونا میتونین Performance سایت خودتون رو ارتقاء و بهبود بدین. در این زمینه میتونین این لینک رو مشاهده کنید که در اون تقریبا تمامی روشهای مربوط به Performance قرار گرفته و میتونین از اونا استفاده کنید.

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

    موفق باشید

    یا علی

    Source

    نویسنده
    بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

    جلسات دوره

    نظرات کاربران

    اولین دیدگاه این پست رو تو بنویس !

    نیاز به لاگین

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