مقدمه ای بر PRPL
داشتن یک وب سایت برای همه دستگاه ها یک چالش جدی برای توسعه دهندگان وب است. ما باید مطمئن شویم که وب سایت ما همچنان روی دستگاه های ارزان قیمت و اینترنت ضعیف به خوبی کار می کند. استفاده از قالب PRPL به ما این تضمین را می دهد که وب سایت در بهینه ترین و سریع ترین زمان ممکن بارگذاری شود.
مدل PRPL بر چهار جنبه اصلی تمرکز دارد:
نمونه ای از یک درخواست ساده صفحه وب
وقتی می خواهیم از یک وب سایت بازدید کنیم، ابتدا مرورگر درخواست ما را به سرور ارسال می کند. سپس فایلی که نقطه ورود به سایت است از سرور که معمولاً یک فایل HTML است برگردانده می شود! تجزیه کننده HTML مرورگر به محض دریافت آن از سرور شروع به تجزیه این داده ها می کند. اگر تجزیه کننده متوجه شود که به منابع بیشتری مانند شیوه نامه ها یا اسکریپت ها نیاز است، درخواست HTTP دیگری ارسال می شود!
چندین بار درخواست منابع روشی بهینه برای بارگذاری سریع صفحات نیست، زیرا ما در تلاش هستیم تعداد رفت و برگشت بین کاربر و سرور را به حداقل برسانیم! در این مقاله با استفاده از قالب PRPL راه هایی برای بهبود سرعت بارگذاری اولیه صفحه در اختیار شما قرار می دهیم پس با ما همراه باشید.
آنچه در این مقاله می خوانیم
بررسی صفحه با فانوس دریایی
می توانید از Lighthouse برای بررسی و یافتن ایرادات در سایت خود استفاده کنید تا فرصت های بهبود در مدل PRPL را شناسایی کنید. برای استفاده از Lighthouse مراحل زیر را دنبال کنید:
منابع حیاتی را از قبل در PRPL بارگذاری کنید
اگر منابع خاصی در صفحه شما (منابع حیاتی) دیر واکشی شده و منجر به روند بارگذاری کند می شود. در گزارش فانوس دریایی در Sec درخواست کلید از قبل بارگیری کنید منبع مورد نظر را مشخص می کند.
در مدل PRPL، می توانید از اعلان برای بازیابی سریعتر منابع صفحه مهم استفاده کنید پیش بارگیری کنید استفاده کنید. برای این منظور کافی است منبع مورد نظر را حمل کنید rel="preload" مانند زیر برای برچسب زدن <head> خود را اضافه کنید
<link rel="preload" as="style" href="
مرورگر منابع فوق را تا حد امکان سریعتر از حد ممکن بارگذاری می کند.
رندر اولیه در اسرع وقت
در Lighthouse منابعی را که باعث تاخیر رندر اولیه در بخش می شوند گزارش دهید منابع رندر-بلاک را حذف کنید به نظر می رسد که این منابع در واقع باعث می شود First Paint دوام بیشتری داشته باشد.
برای بهبود First Paint، لایت‌هاوس توصیه می‌کند که جاوا اسکریپت حیاتی خود را درون خطی کنید و بقیه را از طریق async به تعویق بیندازید، علاوه بر این، سبک‌های CSS حیاتی را که در بالای صفحه استفاده می‌شوند، درون‌بندی کنید. با این روش تعداد درخواست های بار اولیه منابع مسدودکننده رندر کاهش می دهد. البته استفاده از اسکریپت ها و شیوه نامه های درون خطی دو ایراد عمده دارد: یکی اینکه نگهداری و توسعه آنها دشوارتر و پرهزینه تر است و دیگری اینکه نمی توان آنها را جدا از مرورگر کش کرد.
در مدل PRPL، راه دیگری برای تقویت First Paint این است که HTML اولیه صفحه خود را در سمت سرور رندر کنید و بلافاصله محتوا را به کاربر نمایش دهد. با این حال، این می تواند اندازه فایل HTML را به میزان قابل توجهی افزایش دهد، که می تواند به زمان تعاملی شما آسیب برساند (زمانی که طول می کشد تا برنامه شما تعاملی شود و بتواند به ورودی کاربر پاسخ دهد). منابع زیر ممکن است به شما کمک کند:
ذخیره اولیه دارایی
مشتری هر بار که صفحه شما را باز می کند، درخواست های یکسانی را برای همان منابع ارسال می کند، همه دارایی ها باید هر بار بازیابی و تجزیه و تحلیل شوند، کش کردن داده های پرکاربرد در مرورگر یکی از بهترین راه ها برای بهینه سازی بارگذاری منابع است.
کارگران می توانند دارایی ها را مستقیماً از حافظه پنهان به جای سرور در بازدیدهای مکرر بازیابی کنند. این نه تنها به کاربران اجازه می دهد از صفحه شما به صورت آفلاین استفاده کنند، بلکه باعث می شود در بازدیدهای مکرر صفحه سریعتر بارگذاری شود.
بارگذاری تنبل در قالب PRPL
اگر حجم درخواست‌های شبکه و داده‌های انتقال‌یافته در حین بارگذاری صفحه از حد معینی فراتر رود، اخطار «بار شبکه عظیمی وجود دارد» در گزارش Lighthouse نمایش داده می‌شود.
این هشدار برای همه انواع دارایی اعمال می‌شود، اما برای فایل‌های جاوا اسکریپت بزرگ بسیار گران است زیرا مرورگر برای تجزیه و کامپایل آنها زمان می‌برد. Lighthouse همچنین در صورت نیاز هشداری در مورد این موضوع ارائه می دهد.
برای ارسال بسته های کوچکتر جاوا اسکریپت که فقط حاوی کدهای لازم برای بارگذاری اولیه صفحه هستند تا از مسدود شدن رندر جلوگیری شود. بسته را به قطعات کوچکتر تقسیم کنید و سایر قطعات غیر بحرانی را با استفاده از بارگذاری معوق بارگذاری کنید.
هنگامی که بسته خود را شکستید، مهم ترین قطعات را از قبل بارگیری کنید. واکشی اولیه تضمین می کند که منابع مهمتر زودتر از مرورگر واکشی و دانلود می شوند.
علاوه بر تقسیم و بارگذاری قطعات مختلف جاوا اسکریپت، Lighthouse همچنین هشدار بارگذاری کند را برای تصاویر غیر بحرانی ارائه می دهد.
اگر تصاویر زیادی را در صفحه خود بارگذاری می کنید، به آرامی تصاویری را که در زیر صفحه یا خارج از نمای نمایش هستند بارگیری کنید (به مقاله Lazy Loading Images مراجعه کنید).
آخرین کلمه
اکنون که برخی از مفاهیم اساسی پشت مدل PRPL را درک کرده اید، مهم است که به یاد داشته باشید که همه تکنیک ها نباید با هم اعمال شوند. هر تلاشی با هر یک از موارد زیر باعث بهبود عملکرد قابل توجهی خواهد شد. در آموزش های بعدی این مجموعه به جزئیات تمامی روش های ذکر شده در بالا می پردازیم.
