critical path rendering - rwdconf94
TRANSCRIPT
” اهمیت استایلنویسی حیاتی “
ارائه دهنده :آرش منطقی
arash.manteghi
arashmanteghi
arashmanteghi
arashmanteghi
چرا استایلنویسی حیاتی؟
از گذشته تا به امروز، تسریع در دستیابی به صفحات وب از چالشهای طراحی و توسعه
بوده و هست.
گزارش اخطار ابزار گوگل
ابزار تست کارایی گوگل، توسعهدهندهها را به پیروی از این روش توصیه میکند.
چرا استایلنویسی حیاتی؟
تا زمانی که فایل استایلشیت به صورت کامل دانلود نشود، مرورگر قادر به نمایش صفحه نیست.
بنابراین یک درخواست برای فایل CSS حجیم میتواند به طور قابل مالحظهای تأخیر رندر شدن و
نمایش صفحه را باال ببرد.
به این ترتیب این ایده شکل میگیرد که فقط آن دسته از کدهایی که کاربر برای نمایش اولیه
صفحه به آنها احتیاج دارد را، در اولین پاسخ از سرور به کاربر منتقل کنیم.
میتوان کدهای حیاتی را محدود به ۱۴ کیلوبایت دانست و آنها را به صورت اینالین در داخل
head هر صفحه نوشت.
اما بخش حیاتی یک صفحه را چگونه شناسایی کنیم؟
شناسایی بخش حیاتی
معموالً بخش حیاتی را above-the-fold یا بخش باالی تا خوردگی در نظر میگیرند.
نسخه دسکتاب سایت بازار
ساختار کد پیشنهادی
شمای کد اولیه از ساختار پیشنهادی به صورت زیر است:
index.html
<!doctypehtml>
<head>
<style>/*inlinedcri?calCSS*/</style>
</head>
<body>
bodygoeshere...
<script>loadCSS('non-cri?cal.css');</script>
</body>
</html>
<html>
گوناگونی بخش حیاتی
یک صفحه وب میتواند بخشهای حیاتی متفاوتی در نسخههای مختلف موبایل، تبلت و یا
دسکتاپ داشته باشد.
نوشتن کدهای حیاتی برای هر صفحه و در نسخههای
مختلف صفحه نمایش میتواند چالش بر انگیز باشد.
استفاده از ابزارهای خودکار سازی این فرآیند در جهت آسان
سازی جریان کار، مفید خواهد بود.
نسخه موبایل سایت بازار
Critical معرفی پکیج
Gulpfile.jsvargulp=require(‘gulp’);varcri?cal=require(‘cri?cal’);gulp.task(‘cri?cal’,func?on(cb){cri?cal.generate({base:‘./’,src:‘index.html’,css:[‘assets/css/main.css’],dimensions:[{width:320,height:480},{width:768,height:1024},{width:1280,height:960}],dest:‘dist/index.html’,minify:true,inline:true,
)};)};gulp.task(‘default’,[‘cri?cal’]);
grunt-critical معرفی پالگین
Grun]ile.jsgrunt.initConfig({cri?cal:{dist:{op?ons:{base:‘./’,css:[‘assets/css/bootstrap.css’,‘assets/css/main.css’
],},dimensions:[
],files:[{src:‘index.html’,dest:‘dist/index.html’},
],.
{width:1300,height:900}{width:768,height:500}
{src:‘generic.html’,dest:‘dist/generic.html’},
..
مقایسه با روش معمول
قبل از اعمال تغییرات
بعد از اعمال تغییرات
مقایسه با روش معمول
چالشها
لود دوباره کدهای حیاتی در فایل استایلشیت خارجی.
برگشت به عقب، به سالهای اولیه توسعه وب و استفاده از روشهای قدیمی.
عدم توانایی در کش کردن استایلشیتهای حیاتی.
بخش above-the-fold در صفحه الزامًا به عنوان بخش حیاتی تلقی نمیشود.
عدم توانایی توسعهدهنده در انتخاب عناصر حیاتی با استفاده از نظرات شخصی خود.
Jacket استفاده از کتابخانه
_shared.scss
@includejacket(cri?cal){.header{color:red;}
}
@includejacket(non-cri?cal){
}.footer{color:blue;}
.header,.footer{background-color:green;
}
@includefont-face(…)...
cri?cal.scss$jacket:cri?cal;
non-cri?cal.scss
@import“shared.scss”;
$jacket:non-cri?cal;@import“shared.scss”;
نتیجهگیری
کدهای حیاتی باید به واقع حیاتی بوده و تا حد امکان کم حجم باشند.
هرچند این روش یادآور سالهای دور توسعه وب، اما در کارکرد عملیاتی نتایج افزایش پرفورمنس
را در بر دارد.
هرچند نسخه دوم از پروتکل HTTP احساس نیاز به استفاده از این روش را کمتر میکند، اما
استفاده توأم آنها بهرهوری دو چندان را در پی خواهد داشت.
تشخیص اینکه استفاده از این روش میتواند مفید باشد یا خیر، بر عهده توسعهدهنده و شناخت
او از پروژه مربوطه است.
با تشکر از توجه شما
سؤالی هست که بتونم جواب بدم؟