بارگذاری سریع صفحات وب با الگوی PRPL
بهینه سازی بارگذاری اولیه و افزایش سرعت سایت با مدل PRPL (پیش بارگذاری منابع حیاتی ، تعویق منابع غیرضروری – کش کردن و کاهش تعداد درخواست ها)
مقدمه‌ای بر PRPL
در دسترس بودن یک وب‌سایت برای تمامی دستگاه‌ها یک چالش جدی برای توسعه‌دهندگان وب است. ما باید مطمئن شویم که وب‌سایتمان در دستگاه های ارزان قیمت و اینترنت ضعیف هنوز به خوبی کار می‌کند. استفاده از الگوی PRPL به ما این تضمین را می‌دهد که وب‌سایت در بهینه‌ترین و سریع‌ترین خالت ممکن بارگذاری شود.
الگوی PRPL بر چهار جنبه اصلی تمرکز دارد:
مثالی از یک درخواست ساده برای یک صفحه وب
وقتی می‌خواهیم از یک وب‌سایت بازدید کنیم، مرورگر ابتدا درخواست ما را به سرور ارسال می‌کند. سپس فایلی که نقطه ورودی سایت است از سرور بازگردانده می شود، که معمولاً یک فایل HTML است! تجزیه کننده HTML مرورگر به محض دریافت از سرور شروع به تجزیه این داده ها می کند. اگر تجزیه کننده متوجه شود که به منابع بیشتری مانند شیوه نامه ها یا اسکریپت ها نیاز است، درخواست HTTP دیگری ارسال می شود!
نیاز به درخواست مکرر منابع روشی بهینه برای بارگذاری سریع صفحات نیست، زیرا ما سعی می کنیم میزان رفت و برگشت بین کاربر و سرور را به حداقل برسانیم! در این مقاله با با استفاده از الگوی PRPL شیوه هایی برای بهبود سرعت بارگذاری اولیه صفحات به شما ارائه می‌دهیم پس با نکست همراه باشید.
آنچه در این مقاله می‌خوانیم
بازبینی صفحه با Lighthouse
برای شناسایی فرصت‌های بهبود در مدل PRPL می‌توانید از Lighthouse برای بازبینی و کشف نواقص در سایت خود استفاده کنید. برای استفاده از Lighthouse مراحل زیر را دنبال کنید:
پیش بارگذاری منابع حیاتی در PRPL
اگر منابع خاصی از صفحه شما (منابع حیاتی) دیر واکشی شده و منجر به کند شدن فرایند بارگذاری شود. در گزارش Lighthouse در بخش Preload key Request منبع مورد نظر را مشخص می‌کند.
در مدل PRPL برای واکشی سریعتر منابع بحرانی صفحه می‌توانید از اعلان Preload استفاده کنید. برای این کار کافی است منبع مورد نظر را به همراه rel="preload" به صورت زیر به تگ <head> خود اضافه کنید.
<link rel="preload" as="style" href="css/style.css">
مرورگر منابع مشخص شده به صورت فوق را تا حد امکان خیلی سریعتر از حالت ممکن بارگذاری می‌کند .
رندر اولیه در اسرع وقت
در گزارش Lighthouse منابعی که باعث به تاخیر افتادن رندر اولیه می‌شوند در بخش eliminate render-blocking resources مشخص می‌شوند، در واقع این منابع باعث طولانی تر شدن First Paint می‌شوند.
برای بهبود First Paint، لایت‌هاوس توصیه می‌کند جاوا اسکریپت حیاتی خود را درون خطی کنید و بقیه آنها را با استفاده از async به تعویق بیندازید، علاوه بر آن شیوه‌نامه های حیاتی CSS را که در بالای صفحه استفاده می‌شود درون خطی کنید. با این روش تعداد درخواست های اولیه برای بارگذاری منابع مسدود کننده رندر را کاهش می‌دهد. البته استفاده از اسکریپت‌ها و شیوه نامه‌های درون خطی دو ایراد عمده دارد: یکی نگهداری و توسعه آنها سخت‌تر و پرهزینه است و دیگر اینکه آنها را نمی توان به طور جداگانه توسط مرورگر کش کرد.
در الگوی PRPL روش دیگر برای بهبود First Paint این است که HTML اولیه صفحه خود را در سمت سرور رندر کنید و بلافاصله محتوا را به کاربر نمایش می دهد. با این حال، این کار می تواند حجم فایل HTML را به میزان قابل توجهی افزایش دهد، که می تواند به Time to Interactive(زمانی که طول می کشد تا برنامه شما تعاملی شود و بتواند به ورودی کاربر پاسخ دهد) آسیب برساند.برای درک بهتر موضوع منابع زیر می‌تواند به شما کمک کند:
- Optimize CSS Delivery (بهبود تحویل CSS)
- What is Server-Side Rendering? (رندر سمت سرور چیست ؟ فیلم یوتیوب)
کش کردن زود هنگام دارایی‌ها
مشتری هر بار که صفحه شما را باز می‌کند درخواست های همسان برای منابع یکسان ارسال می‌کند، تمامی دارایی ها باید هربار واکشی و تجزیه شوند، کش کردن داده های پر استفاده در مرورگر یکی از بهترین شیوه های بهینه سازی بارگذاری منابع است.
service worker ها می توانند دارایی ها را مستقیماً از حافظه پنهان به جای سرور در بازدیدهای مکرر واکشی کنند. این کار نه تنها به کاربران اجازه می‌دهد از صفحه شما در حالت آفلاین استفاده کنند، بلکه باعث می‌شود در بازدیدهای مکرر زمان بارگذاری صفحه سریعتر شود.
بارگذاری تنبل در الگوی PRPL
اگر حجم درخواست‌های شبکه و داده منتقل شده در بارگذاری صفحه از حد خاصی بگذرد در گزارش لایت‌هاوس هشدار has enormous network payload نمایش داده خواهد شد.
این هشدار شامل همه انواع دارایی‌ها می‌شود، اما در مورد حجم بزرگ فایل‌های جاوا اسکریپت به دلیل زمانی که مرورگر برای تجزیه و کامپایل آنها طول اختصاص می‌دهد بسیار پرهزینه است. Lighthouse در صورت لزوم هشداری نیز برای این موضوع ارائه می دهد.
برای ارسال بسته‌های کوچکتر جاوا اسکریپت که تنها حاوی کد مورد نیاز بارگذاری اولیه صفحه برای جلوگیری از render-blocking است. بسته را به چند قسمت کوچکتر تقسیم و سایر قسمت های غیر بحرانی را با استفاده از بارگذاری تنبل لود کنید.
بعد از تقسیم بسته خود ، تکه هایی را که مهمتر هستند از قبل بارگذاری کنید. پیش بارگیری اطمینان حاصل می کند که منابع مهم تر واکشی شده و زودتر توسط مرورگر دانلود می شوند.
جدا از تقسیم و بارگذاری تکه های مختلف جاوا اسکریپت، لایت‌هاوس همچنین هشداری برای بارگذاری تنبل تصاویر غیر بحرانی ارائه می دهد.
اگر تصاویر زیادی را در صفحه خود بارگذاری می کنید، تمام مواردی که در زیر صفحه یا خارج از viewport هستند را به صورت تنبل بارگذاری کنید (به مقاله بارگذاری تنبل تصاویر مراجعه کنید).
سخن آخر
اکنون که برخی از مفاهیم اساسی پشت الگوی PRPL را فهمیدید، مهم است که به یاد داشته باشید که لازم نیست همه تکنیک ها با هم اعمال شوند. هر تلاشی که با هر یک از موارد زیر انجام شود، بهبود عملکرد قابل توجهی را ارائه می دهد. در دروس بعدی این مجموعه به بررسی جزییات تمام روش‌های پیش گفته خواهیم پرداخت.