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

- visibility ۲ mode_comment

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

دو سایت رو در نظر بگیرید که شما میخواید وارد اونا بشید. یکی از تعداد زیادی کد جاوااسکریپت و عکس و کد CSS درست شده و دیگری کمتر از این موارد استفاده کرده. حالا بنظرتون اون که کمتر استفاده کرده ، حتما سریعتر هست؟ اگر جوابتون مثبت بوده کاملا در اشتباه هستید و باید با معنا و کاربرد ارتقای عملکرد سایتتون آشنا بشید. سرعت سایتتون به عوامل زیادی بستگی داره که عبارتند از شبکه ، پهنای باند ، CPU و GPU و ...

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

هر وقت که شما در مرورگرتون یک URL رو وارد میکنید و دکمه Enter رو فشار میدید ، کارایی پشت پرده انجام میشه و قاعدتا زمانی رو برای انجام میطلبه. من میخوام در اینجا به کارایی که CPU در اونا دخیله اشاره ای بکنم و بگم که در چه جاهایی CPU از ما زمان طلب میکنه.

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

HTML: این زیرمجموعه وظیفش اینه که کدهای HTML رو تجزیه و تحلیل کنه و اونارو به مرورگر ارائه بده و DOM رو تشکیل بده

CSS: این زیرمجموعه هم وظیفه تجزیه تحلیل کدهای CSS رو داره و اطلاعات قالب بندی رو در اختیار مرورگر قرار میده

Collections: این زیرمجموعه بیشتر با Meta data ها در ارتباط هست و در زمان اجرا این موارد رو جمع آوری و بررسی میکنه و از اونا استفاده میکنه

Javascript: مسئول تجزیه و تحلیل کدهای Javascript هست و این کدها رو اجرا میکنه

Marshalling: این زیرمجموعه یک حد واسط بین قسمت مربوط به اسکریپتها و هسته اصلی وب هست و ارتباط بین اونا رو برقرار میکنه

DOM: این زیرمجموعه هم اون قسمت از زمانی هست که در طول واکنشها بین المنتهای مختلف ، دستکاری کردن گره ها ( Nodes ) و ... سپری میشه

Formatting: این زیرمجموعه وظیفش اینه که تمام کدهای HTML و CSS رو روی هم بریزه و کل قالب سایت رو بسازه

Block Building: همونطور که میدونین CSS کلا بصورت مستطیلی هست و بر اساس همین قاعده چارچوب کلی سایت شکل میگیره

Layout: این زیرمجموعه و زیرسیستم وظیفش اینه که المنتهای مختلف رو سر جای خودشون قرار بده و بر اساس اولویت اونارو نشون بده

Rendering: آخرین بخش این مجموعه هست و اطلاعاتی که در مراحل قبلی تجزیه و دریافت شده اند رو به شما نشون میده و میتونین اون سایت رو مشاهده کنید

هر کدوم از این موارد خودشون زمانی رو طلب میکنن که بسته به قدرت CPU میتونه کم یا زیاد بشه. کاری که ما در بهینه سازی عملکرد باید انجام بدیم بر روی دو اصل کلی قرار داره. اولین مورد اینکه باید زمان CPU رو کاهش بدیم و دوم اینکه کارایی که در موازات هم انجام میشن رو افزایش بدیم.

نکاتی که در این قسمتها بیان میشه در 6 اصل کلی خلاصه میشن:

  1. با سرعت بیشتری به درخواستها پاسخ داده شود
  2. کاهش مقدار بایت دانلودی
  3. استفاده از کدهای استاندارد و موثر
  4. بهینه سازی استفاده از تصاویر و ...
  5. نوشتن کدهای Javascript سریع
  6. دانستن اینکه برنامه شما دقیقا چه کاری داره انجام میده

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

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

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

یا علی

Source

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

با تشکر

محمد اسفندیاری

موفق باشید

نیاز به لاگین

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