دوره جامع
افزایش سرعت سایت

تکنیک‌هایی برای بهبود و افزایش سرعت سایت و قطعه گم شده پازل توسعه و طراحی
دوره جامع آموزش افزایش سرعت سایت

معرفی اجمالی دوره

در طراحی وب مدرن، سرعت یکی از مهمترین دغدغه‌های طراحان، برنامه‌نویسان، مدیران سئو و … است. سرعت سایت ارتباط مستقیمی با رضایت کاربر ، بهبود رتبه در موتورهای جستجو و در نهایت فروش سایت شما دارد، بنابراین اندازه گیری، نظارت و بهینه سازی صفحات وب در جهت افزایش سرعت سایت و سریع ماندن آن باید به صورت دائم در برنامه ریزی شما قرار گیرد.

سایت‌ها باید بر روی بهینه سازی کاربر محور تمرکز کنند، ابزارهایی مانند Lighthouse گوگل پارامترهایی برای این کار در نظر می‌گیرند و روشهایی برای بهبود آنها به شما معرفی می‌کنند تا کارایی سایتتان رو بالا ببرید، برای سریع ماندن سایت نیز باید زمان و هزینه کافی برای بهبود مستمر این پارامترها کنار بگذارید.

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

سطح دوره
متوسط تا پیشرفته
مدرس دوره
محمد اصغری
مدت زمان
در حال تکمیل
محتوای دوره
ویدئو و متنی
پشتیبانی
محدود

فهرست مطالب دوره

مقدمه‌ای بر سرعت سایت - دوره جامع افزایش سرعت سایت نکست

مقدمه‌ای بر سرعت

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

بودجه عملکرد - دوره افزایش سرعت سایت نکست

تنظیم بودجه سرعت و کارایی سایت

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

بهینه سازی تصاویر - دوره جامع افزایش سرعت سایت نکست

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

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

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

 

بارگذاری تنبل - دوره بهبود سرعت سایت نکست

بارگذاری تنبل تصاویر و ویدئوها

بارگذاری تنبل یا lazy-loading راه‌حل نهایی مشکل سرعت بارگذاری صفحات سایت است. در بارگذاری تنبل، شما بدون اینکه از تعداد یا کیفیت محتوای تصویری خود کم کنید از حجم بارگذاری اولیه صفحه خود به شدت می‌کاهید.

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

 

بهبود سرعت سایت با بهینه سازی جاوا اسکریپت - نکست

بهینه سازی جاوا اسکریپت

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

در این فصل از دوره جامع افزایش سرعت سایت به بررسی شیوه های مختلف برای بهبود جاوا اسکریپت مانند : کاهش حجم ، حذف کدهای بلا استفاده ، شیوه های مدرن جاوا اسکریپت و … می‌پردازیم

حذف کدهای بلا استفاده

کم کردن و فشرده سازی بار شبکه

کد نویسی مدرن برای افزایش سرعت بارگذاری

استفاده از کدهای جاوا اسکریپت مدرن برای سرعت بیشتر

کاهش استفاده از CommonJS برای کاهش حجم نهایی

بهنیه سازی تحویل منابع (resource delivery)

CDN یا شبکه تحویل محتوا امکان انتقال سریع دارایی‌های مورد نیاز برای بارگیری محتوای اینترنتی از جمله صفحات HTML، فایل‌های جاوا اسکریپت، شیوه نامه‌ها، تصاویر و فیلم‌ها را فراهم می‌کند. با استفاده از CDN  بسیاری از عوامل کندی سایت مانند سرور ضعیف، گستردگی جغرافیایی کاربران و حجم زیاد بازدید را می‌توان به سادگی رفع کرد.

در این فصل از دوره سرعت سایت تلاش می‌کنیم شما را با CDN و شیوه‌های بهبود سرعت با استفاده از آن را یاد بگیریم.

شبکه های تحویل محتوا (CDN)

اولویت بندی منابع

پیش بارگذاری منابع بحرانی (مهم)

برای بهبود درک صفحه سرعت اتصال را بالا ببرید

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

پخش سریع تر با پیش بارگذاری صدا و ویدئو

بهنیه‌سازی CSS برای بهبود سرعت سایت

فایل‌های CSS منابع مسدودکننده رندر هستند یعنی قبل از اینکه مرورگر صفحه را رندر کند، باید بارگیری و پردازش شوند. صفحات حاوی CSS های بزرگ غیر ضروری زمان بیشتری برای بارگذاری لازم دارند.

در این راهنما، نحوه به تعویق انداختن CSS غیر بحرانی، کوچک سازی آنها و … می‌پردازیم

به تعویق انداختن CSS غیر بحرانی

کوچک سازی(minify) CSS

استخراج CSS بحرانی

بهینه‌سازی تصاویر پس زمینه CSS با پرس و جوهای رسانه ای

بهنیه‌سازی منابع شخص ثالث

به‌عنوان یک توسعه‌دهنده باید روی اسکریپت‌های شخص ثالث سایت خود کنترل داشته باشید. قبل از اینکه بتوانید محتوای Third-party را بهینه کنید، باید بفهمید چه چیزی باعث کندی سایت شما می شود.

در این فصل، نحوه استفاده از Lighthouse و Chrome DevTools را برای شناسایی منابع کند شخص ثالث و چگونگی بهینه سازی آنها برای افزایس سرعت سایت را یاد خواهید گرفت.

سرعت جاوا اسکریپت شخص ثالث

شناسایی جاوا اسکریپت شخص ثالث کند

بارگیری مؤثر جاوا اسکریپت شخص ثالث

بهنیه‌سازی فونت‌ها (WebFonts)

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

جلوگیری از نامرئی شدن متن تا لود فونت

بارگذاری و رندر سریعتر فونت ها

کاهش حجم فونت ها

بهینه سازی کیفیت شبکه

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

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

عومل موثر در کیفیت شبکه

ارائه صفحات مطابق با سرعت شبکه کاربر

اندازه‌گیری میدانی سرعت سایت

گزارش Chrome UX (که به طور غیررسمی با نام CrUX شناخته می شود) مجموعه داده عمومی از تجربه واقعی کاربران در میلیون‌ها وب‌سایت است. برخلاف داده‌های آزمایشگاهی، داده‌های CrUX در واقع از کاربران فعال در این زمینه می‌آیند و اطلاعات به‌دست آمده تقریبا واقعی و بدون خطا است.

در این فصل با استفاده از ابزارها و شیوه‌های مختلف اندازه گیری به بررسی و آنالیز سرعت سایت خود با استفاده از داده‌های میدانی می‌پردازیم

 

استفاده از گزارش Chrome UX برای بررسی میدانی سرعت صفحات

استفاده از داشبورد CrUX در Data Studio

استفاده از گزارش Chrome UX در PageSpeed Insights

استفاده از گزارش Chrome UX در BigQuery

استفاده از Chrome UX Report API

ایجاد فرهنگ سریع بودن

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

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

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

ارزشی که سرعت سایت ایجاد می‌کند

چگونه سرعت را بهبود ببخشیم

برای بهبود سرعت چه چیزی را باید اندازه گیری کنید؟

چگونه سرعت سایت می تواند نرخ تبدیل را بهبود بخشد؟

نحوه گزارش معیارها و ایجاد فرهنگ عملکرد

تثبیت سرعت وب سایت به صورت متقابل

ارتباط سرعت سایت و معیارهای کسب و کار

سوالات متداول

سوالات متداول در مورد وب ویتال

ظهور و رشد سریع صنعت بهینه‌سازی عملکرد وب (WPO) در چند سال گذشته نشانه‌ای از اهمیت و تقاضای فزاینده برای سرعت و تجربه کاربری سریع‌تر است.

  1. سایت‌های سریع‌تر منجر به تعامل بهتر کاربر می‌شوند.
  2. سایت های سریعتر منجر به حفظ بهتر کاربر می شوند.
  3. سایت های سریعتر منجر به تبدیل بیشتر می شوند.

به زبان ساده، سرعت یک ویژگی است.”

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

آشنایی با ابزارهایی برای اندازه گیری سرعت و تهیه استراتژی های ساده تا اولین پیکسل ها را در اسرع وقت به صفحه نمایش تحویل دهید. شما یاد خواهید گرفت که چگونه به توصیه‌های PageSpeed Insights و نمای جدول زمانی Google Chrome برای یافتن داده‌هایی که برای دستیابی به افزایش عملکرد فوری نیاز داریدعمل کنید.

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

بله، اما باید بدانید که بدون داشتن دانش کد نویسی هم می‌توانید به سادگی از دوره استفاده کنید

بله ، تمامی انواع وب‌سایت‌ها را می‌شود با روش‌ها و استراتژی های ارائه شده در این دوره به سرعت بالا رساند

دیدگاهتان را بنویسید

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