نقل قول نوشته شده توسط hiwaaa مشاهده تاپیک
جلسه دوازدهم: Web Performance یا کارآیی وب سایت

فرض کنید ساخت وب سایت تان به پایان رسیده. آیا مطمئن هستید که سرعت آن قابل قبول است؟

شاید کنجکاو باشید، وضعیت انجمن برنامه نویس را بررسی کنید. برای این منظور روی این لینک کلیک کنید یا خودتان به سایتی مانند www.webpagetest.org بروید و سایت مورد نظرتان را وارد بکنید. در تصویری مشابه شکل زیر آمارها و شاخص‌هایی در مورد سرعت سایت برنامه‌نویس خواهید دید:

در زیر آن نمودارهای خطی در مورد سرعت لود شدن فایلهای مختلف و ترتیب آنها نشان داده می‌شود. با کلیک بر آن به صفحه دیگری هدایت می‌شود که اطلاعات بسیاری را در چند صفحه در قالب نمودار و عدد نمایش می‌دهد:


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

برای داشتن اطمینان در مورد سرعت سایت، لازم است چند اصل ساده را در مورد نحوه رندر کردن مرورگر بدانید. فقط در این صورت است که مطمئن خواهید شد که سایت شما با سرعت و به شکلی کارا در دسترس کاربران‌تان قرار خواهد گرفت.
رندر کردن(render): نماش دادن کد و محتوای سایت به کاربر یا به زبان ساده تبدیل کد سایت به ظاهر تصویری سایت تان

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

- مسیر بحرانی رندر کردن: یعنی فرآیند تبدیل کد HTML، CSS و Javascript به پیکسلهای واقعی که در صفحه مرورگز به کاربرد نشان داده می‌شود.

- بهینه‌سازی عکسها: فرآیند استفاده از عکس با نوع مناسب و همچنین حذف متادیتای(metadata) اضافی فایل عکس

- کمینه کردن(minification) جاوا اسکریپت : فرآیند حذف کاراکترهای اضافی فایلهای جاوا اسکریپت برای کاهش حجم این فایلها

برای بهینه کردن سایت هم روشهایی وجود دارد که طراح و برنامه‌ویس وب می تواند آنها را خود انجام دهد. هم ابزارهایی بدین منظور توسعه یافته است. برای مسلط شدن بر این حوزه کتابهای خوبی نوشته شده و دوره های ویدئویی تهیه شده است.

آشنایی در همین حد می تواند انگیزه شما را برای وارد شدن به این حوزه بیشتر کند.

کارهای جالب و مفید زیادی به غیر از کد زدن وجود دارد که طراح وب باید انجام دهد. در جلسه بعد(جلسه ماقبل آخر) در مورد ابزارهای اتوماسیون و ساخت صحبت خواهیم کرد.

با ما همراه باشید.
این رنگ ها . خطوطی که اینجا هست ، بیانگر چه چیزایی هست ؟