عملکرد وب یک جنبه حیاتی از توسعه وب است که بر سرعت بارگیری صفحات و همچنین پاسخگویی آنها به ورودی کاربر تمرکز دارد. وقتی وب سایت خود را برای عملکرد بهینه می کنید، تجربه بهتری را به کاربران ارائه می دهید. تجربیات کاربر بهتر به شما کمک می کند تا به اهدافی که برای وب سایت خود در نظر داشتید دست یابید.
عملکرد وب ممکن است یک موضوع خاص به نظر برسد، اما در واقع، هم گسترده و هم عمیق است. با توجه به عمق آن به عنوان یک حوزه موضوعی، بسیار مهم است که یک دوره در مورد عملکرد وب هم قابل دسترس و در عین حال آموزنده باشد. نسخه اولیه این دوره بر روی اصول عملکرد وب تمرکز دارد که مبتدیان باید اطلاعاتی داشته باشند.
هدف هر ماژول در این مجموعه این است که - در صورت امکان - مجموعه ای از دموهایی داشته باشد که محتوای هر ماژول را تکمیل می کند و مفاهیم کلیدی عملکرد را نشان می دهد. با توجه به اینکه این دوره یک پیشنهاد اولیه است، ماژول های اضافی در حال حاضر برای انتشار در ماه های آینده برنامه ریزی شده است.
در اینجا آنچه ارائه می شود دوره اولیه برای یادگیری عملکرد را پوشش می دهد:
چرا سرعت مهم است
قبل از اینکه بتوانید کارایی یادگیری را شروع کنید، ابتدا باید نقش آن را در تجربه کاربری و اینکه چگونه می‌تواند نتایج بهتری برای کاربران به همراه داشته باشد را درک کنید. این دوره با مقدمه ای کوتاه در مورد این موضوعات شروع می شود و زمینه حیاتی را در مورد اینکه چرا یادگیری عملکرد مهم است، ارائه می دهد.
ملاحظات کلی عملکرد HTML
هر وب سایتی با درخواست یک سند HTML شروع می شود، این درخواست نقش مهمی در سرعت بارگذاری وب سایت شما دارد. این ماژول مفاهیم مهمی مانند کش کردن HTML، مسدود کردن تجزیه کننده، مسدود کردن رندر و موارد دیگر را پوشش می‌دهد، بنابراین می‌توانید مطمئن شوید که اولین درخواست برای HTML وب‌سایت خود در پای راست است.
درک مسیر بحرانی
مسیر رندر بحرانی مفهومی در عملکرد وب است که به سرعت نمایش اولیه یک صفحه در مرورگر می‌پردازد. این ماژول به تئوری پشت مسیر رندر بحرانی می‌پردازد و مفاهیمی مانند منابع مسدودکننده و تجزیه کننده را پوشش می‌دهد و اینکه چگونه آنها نقش کلیدی در سرعت ظاهر شدن یک صفحه در مرورگر دارند.
بهینه سازی بارگیری منابع
با بارگیری صفحه، منابع زیادی در HTML آن ارجاع می‌شوند که ظاهر و طرح‌بندی صفحه را از طریق CSS و همچنین تعامل آن را از طریق جاوا اسکریپت ارائه می‌کنند. در این ماژول، تعدادی از مفاهیم مهم مرتبط با این منابع و نحوه تاثیر آنها بر زمان بارگذاری صفحه پوشش داده شده است.
با نکات منابع به مرورگر کمک کنید
نکات منابع مجموعه ای از ویژگی های موجود در HTML هستند که می توانند به مرورگر در بارگیری منابع زودتر و احتمالاً حتی با اولویت منابع بالاتر کمک کنند. در این ماژول، چند نکته منبع که می تواند به بارگذاری سریعتر صفحات شما کمک کند، پوشش داده شده است.
عملکرد تصویر
تصاویر نشان دهنده بخش بزرگی از داده هایی است که امروزه در بسیاری از صفحات وب منتقل می شود. این ماژول نحوه بهینه سازی تصاویر و همچنین ارائه کارآمد آنها را پوشش می دهد تا بایت های تلف شده را بدون توجه به دستگاه کاربر به حداقل برسانید.
عملکرد ویدئو
ویدئو یک نوع رسانه است که اغلب در صفحات وب مورد استفاده قرار می گیرد - اما دانستن نحوه ارائه کارآمد آنها یکی از جنبه های عملکرد است که نباید نادیده بگیرید. این ماژول برخی از تکنیک‌های کلیدی برای جاسازی ویدیوها را پوشش می‌دهد به گونه‌ای که وب‌سایت شما سریع بماند، همچنین ملاحظات عملکرد مجاور که می‌تواند با استفاده از آنها ایجاد شود.
بهینه سازی فونت های وب
فونت های وب منبعی هستند که معمولاً در وب مورد استفاده قرار می گیرند - و به درستی هم چنین است - زیرا آنها به طراحی یک وب سایت به روشی اضافه می کنند که سایر منابع نمی توانند. با این حال، فونت های وب هنوز هزینه عملکردی دارند. در این ماژول، تعدادی از ملاحظات و تکنیک های عملکرد در مورد فونت های وب بررسی می شود.
جاوا اسکریپت با تقسیم کد
برخی از منابع برای بارگذاری اولیه یک صفحه وب بسیار مهم نیستند. جاوا اسکریپت یکی از این منابع است که می توان آن را تا زمان نیاز از طریق تکنیکی به نام تقسیم کد به تعویق انداخت. با انجام این کار، می توانید با کاهش پهنای باند و اختلاف CPU، عملکرد را بهبود ببخشید - یک نکته مهم برای بهبود سرعت بارگذاری اولیه صفحه و پاسخگویی ورودی در هنگام راه اندازی.
بارگذاری تنبل تصاویر و عناصر <iframe>
تصاویر و عناصر <iframe> می توانند پهنای باند و زمان پردازش CPU قابل توجهی را مصرف کنند. با این حال، لازم نیست همه تصاویر و عناصر <iframe> در طول بارگذاری اولیه صفحه بارگذاری شوند و می‌توان آنها را به زمان دیگری موکول کرد که در آن کاربر احتمالاً آنها را ببیند. این تکنیک به عنوان بارگذاری تنبل شناخته می شود. در این ماژول، بارگذاری تنبل تصاویر و عناصر <iframe> توضیح داده شده است تا بتوانید صفحات خود را سریعتر بارگذاری کنید و فقط در صورت نیاز پهنای باند و زمان پردازش را مصرف کنید.
پیش واکشی، پیش اجرا، و پیش ذخیره سازی توسط کارگر خدمات
در حالی که بیشتر عملکرد مربوط به کارهایی است که می توانید برای بهینه سازی و حذف منابع غیرضروری انجام دهید، ممکن است کمی متناقض به نظر برسد که بگوییم برخی منابع باید قبل از نیاز بارگیری شوند. با این حال، مواردی وجود دارد که در آنها ممکن است بارگذاری منابع خاص از قبل مناسب باشد. در این ماژول، این جنبه از عملکرد مورد بررسی قرار می گیرد، زیرا پیش واکشی، پیش اجرا، و پیش کش سرویس کارگر مورد بحث قرار می گیرد.
مروری بر کارگران وب
بسیاری از آنچه کاربر در مرورگر می بیند در یک رشته به نام رشته اصلی رخ می دهد. با این حال، فرصت‌هایی وجود دارد که می‌توانید رشته‌های جدیدی را برای انجام کارهای محاسباتی پرهزینه راه‌اندازی کنید تا رشته اصلی بتواند وظایف مهمی را که کاربر رو به رو است، انجام دهد. API که این کار را انجام می دهد به عنوان Web Worker API شناخته می شود و در این ماژول به اصول اولیه آن پرداخته شده است.
یک مورد استفاده از وب کارگر بتن
اکنون که درک اولیه ای از کارمندان وب و توانایی ها و محدودیت های آنها دارید، وقت آن است که نگاهی به یک مورد خاص برای یک وب کارگر بیندازید. در این نسخه ی نمایشی، یک وب کارگر برای واکشی یک فایل JPEG، استخراج ابرداده آن و ارسال آن به رشته اصلی استفاده می شود تا کاربر بتواند آن را در مرورگر ببیند.
برای شروع یادگیری عملکرد وب آماده اید؟ با اولین مطالعه چرا سرعت مهم است، کارها را شروع کنید.