1

گرانویسی حیاتی در طراحی واکنشاستایل اهمیت

گرادومین همایش تخصصی طراحی واکنش آرش منطقی

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

هاي طراحی و توسعه از گذشته تا به امروز، افزایش پرفورمنس و تسریع در سرعت بارگذاري صفحات وب از چالشگرا نیز رسیده طراحی واکنش، این چالش به مرزهاي همراههاي هاي اخیر با شیوع وبگردي در دیوایسبوده و در سال

بیشتر حس شده است. حیطه ننیاز در ایاست و حتی به دلیل ماهیت اینترنت همراه، ها اسکریپت سازيفشردهاي مثل هاي سادهسازي صفحات وب وجود دارد. از تکنیکهاي متعددي براي بهینهروش

صفحه نمایش. اما یکی از ابعاد متناسب با ،بارگزاري تصاویرهاي مختلف ها و یا شیوهCDNگرفته تا استفاده استفاده از گوگل است که از زوایاي مختلفی Insights pageSpeedابزارهاي تست پرفورمنس براي صفحات وب، سرویس

دهد.هاي آن را در اختیار شما قرار میز ایرادات و راه حلگزارشی ا صفحه وب شما را آنالیز کرده و کنید پیام زیر باشد:هاي خود را در این ابزار تست کنید، یکی از خطاهایی که دریافت میسایتشاید اگر یکی از وب

Insights pageSpeedگزارش ابزار -1تصویر

هاي صفحه وب شما، به دلیل وجود ریسورس رندر این است که ،شودبه صورت مختصر آنچه در اینجا گفته می

CSS هایی که نوشته شوند و ریسورس اینالینهاي حیاتی به صورت افتد و پیشنهاد شده است که استایلبه تأخیر می د. ناري شوبارگذد، به صورت آسنکرون نشوصفحه می شدن رندر تأخیر درباعث

هایی دارد، اما بهتر است . هرچند این روش اما و اگراست ویژگی را در نظر گرفتهاین 2014گوگل از اواسط سال ل مطرح شده را بررسی کنیم؛ چرا که گذاري صفحه آشنا شویم و سپس راه حبل از هر چیز با رفتار مرورگر در هنگام بارق

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

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

2

شیت به پردازد. پس تا زمانی که فایل استایلشود، سپس به پارس کردن آن و رندر صفحه می شیت بارگذارياستایلتواند به می CSSیک درخواست براي فایل بنابرایندر به نمایش صفحه نیست. اصورت کامل بارگذاري نشود، مرورگر ق

کدهایی مربوط به دیگر CSSدر این فایل رندر شدن صفحه را باال ببرد. این در حالیست که تأخیراي طور قابل مالحظهاز همین نیست. حتی کدهایی يها نیازي مورد درخواست کاربر به آنسایت هم وجود دارد که در صفحهصفحات وب

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

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

headها را به صورت اینالین در داخل کیلوبایت دانست و آن 14 ین کدهاي حیاتی را محدود بهتوان اانتقال است، میشیت را تواند کدهاي حیاتی خود را داشته باشد. از طرف دیگر، مابقی کدهاي استایلهر صفحه نوشت. هر صفحه می

وان بعداً بارگذاري کرد. تمی ن ایده است. این ایده با عنوانگونگی پیاده سازي این ایده کاري نداریم، مهم درك مفهوم ایـبه چ فعالً

Optimizing the Critical Rendering Path شناسایی اما بخش حیاتی یک صفحه را چگونه شود.یز شناخته مینگیرد به سرعت در دارد، این است که آن بخش از صفحه که در صفحه نمایشش جاي می آنچه براي کاربر الویت؟ کنیم

منظور آن قسمت از صفحه است که نامند. خوردگی مییا بخش باالي تا above-the-fold دسترس باشد. این بخش را شود. از باالترین قسمت صفحه محاسبه می گیريگیرد، و مرز اندازهکاربر جاي میصورت عمودي در صفحه نمایش ب

هاي حیاتی و شته باشیم و بخشمثال بد نیست اگر نگاهی به سایت کافه بازار در نسخه دسکتاپ آن دابراي با خطچین قرمز از above-the-foldبینید بخش ی آن را با هم مقایسه کنیم. همانطور که در تصویر پایین میتحیاغیر

گشته است. حیاتی جدا بخش غیر

3

جداسازي بخش حیاتی و غیرحیاتی صفحه وب -2تصویر

4

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

تواند به صورت زیر باشد:کدهاي صفحه میبدین ترتیب ساختار

شماي اولیه از ساختار کد پیشنهادي -3تصویر

به صورت اینالین قرار دادیم styleصفحه را درون تگ هاي Critical CSS کنید که مادر تصویر باال مشاهده می

استفاده کردیم. loadCSS هاي مورد نیاز، از تابعو براي بارگذاري ناهمگام باقیه کدصفحه بسته به ابعاد صفحه نمایشگر هاي خود را داشته باشد. از طرف دیگر، هر Critical CSSتواند هر صفحه می

هاي Critical CSSحه وب، تواند متغیر باشد. پس نیاز است که براي هر نسخه از صفآن می above-the-foldبخش در تصویر زیر حالت .هاي مجزاي خود را داشته باشد Critical CSSاي نیز باید صفحهاندازه از مجزا نوشته شود و هر

بینید. موبایل سایت کافه بازار را می نمایش نسخه

5

بخش حیاتی صفحه در نسخه موبایل -4تصویر

گرا می توانند طوري طراحی شوند که بسته به سایز صفحه همانطور که مطلع هستید، رابط کاربري صفحات واکنش

هاي هاي حیاتی متفاوتی در نسخهتواند بخشي وب مینمایش، پاسخگوي نیاز کاربران باشند. به این ترتیب یک صفحه مختلف موبایل، تبلت و یا دسکتاپ داشته باشد.

هاي هر صفحه کار دشواري است. ها و اینالین نویسی کدآن CSSهاي ی، استخراج کدهاي حیاتن بخششناسایی ایهایی با چندین و چند صفحه انجام دهید. این را هم در نظر بگیرید که مخصوصاً اگر بخواهید این پروسه را براي سایت

تواند چندین نقطه شکست متفاوت داشته باشد. هر صفحه میهم در حالی که این روش نرخ چیست؟ آیا باید به راحتی از این روش بهبود پرفورمنس دست کشید؟ آن پس چاره

ءافزار جزپذیري نرمدانید دسترسدهد. همانطور که میافزایش می پذیري صفحه وب را براي کاربر نهاییدسترسري بهتر، براي کاربر نهایی دارد و به این ربشود و ارتباط مستقیمی با خلق تجربه کاکیفت خدمات محسوب می معیارهاي توانیم تأخیر به نمایش درآمدن بخش حیاتی صفحه را کاهش دهیم. ترتیب می

آوري که در باال به آن اشاره کردیم را بنابراین فعاالن حوزه وب کوشیدند تا با خلق ابزارهایی روند پروسه ماللها بر اساس قواعد و سازي این ایده ایجاد شده که بسیاري از آنبراي تسهیل پیادهکنون ابزارهاي زیادي تاتر کنند. راحت

نگاهی را نوشته آن Addy Osmani که Criticalکنند. در ادامه به پکیج قانون مشابه به هم این پروسه را طی میو در انتها دیگر نام نهادخودکار سازي این پروسه آن را بهترین ابزار بتوان که شاید در حال حاضر خواهیم انداخت

معرفی خواهیم کرد.در این زمینه را موجودهاي ابزار

6

از آن استفاده Grunt و یا Gulpهایی مثل در تسک منیجر تواناست که می ode.jsN یک ماژول Criticalپکیج ن ابعاد صفحه را از طریق کپچر کرد fold-the-aboveتواند بخش می Phantom.js گیري ازکرد. این ماژول با بهره هاي آن را تشخیص دهد. Critical CSS ومرورگر، شناسایی کند

را در قالب یک دموي استفاده از آندهنده آن، نیست، اما توسعه Gulpبراي یاین پکیج داراي پالگینمتأسفانه workflow ایم:شیوه استفاده از آن را قرار دادهقرار داده است. ما نیز در اینجا یک نمونه کد اولیه از در گیتهاب

Gulpدر Criticalنمونه کد استفاده شده از پکیج -5تصویر

نوشته شده و ابعاد مورد نظر براي صفحه نمایش را به توان صفحه مبداء، فایل استایلبینید، میهمانطور که می

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

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

7

تان موجود است را که در پروژهاي شیت و یا صفحهن براي شما وجود خواهد داشت که هر تعداد فایل استایلاین امکا critical-gruntعنوان ورودي مشخص کنید و به همان تعداد صفحه را در خروجی دریافت کنید. با استفاده از پالگین ب

هاي بیشتري نشان خواهیم داد:با وروديبه نحو دیگري مثال فوق را

Gruntدر critical-gruntنمونه کد استفاده شده از پالگین -6تصویر

مقصد ، با تعیین رودي صفحات وارد کرده و در خروجیتوانید کل پوشه سورس پروژه خود را به عنوان وشما حتی می یافت کنید. ها را با تغییرات حاصل شده دریلخروجی تمام فا

یا riticalCSScهاي دیگري مانند سازي فقط محدود به آنچه گفته شده نیست و ابزارالبته ابزارهاي خودکارPenthouse و یاcriticalClass کنند.توان گفت تا حدودي اهدافی یکسان را دنبال مید که میننیز وجود دار

8

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

:قابل رویت استهاي تکراري همان صفحه و نمایش

Critical CSSقبل از اعمال -7تصویر

Critical CSSبعد از اعمال -8تصویر

گیریم، حال آنکه می بهتربه مراتب ینتایجبینید، با استفاده از این تکنیک، در اولین نمایش از صفحه همانطور که می

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

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

حیاتی، در هاي حیاتی از غیرمجزاسازي بخش سازي تشخیص وهر ترتیب ابزارهاي خودکاربه بارگذاري خواهند شد. اند. مراحل اولیه از حیات خود هستند و هنوز به بلوغ و تکامل نرسیده

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

ع مؤثر است. هاي حیاتی صفحه به واقتر بخشروش در کاهش تأخیر رندر شدن و نمایش هرچه سریعالزاماً fold-the-aboveمعتقدند که بخش هرچند که با ماهیت این روش موافق هستند، ولی اما ياي دیگرعده

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

اراده دهنده بتواند باتوسعهاینکه وجود دارد. هاییهاي حیاتی صفحه نیز اختالف نظرپس در تعریف و تشخیص بخشبر این است ترجیحچرا که این روزها ي زیبایی است. حیاتی یک صفحه را مجزا کند، ایدههاي حیاتی و غیرخود بخش

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

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

کمتري را شاهد خواهیم بود. توان در این زمینه به نتایج مثبتی رسید. به عنوان مثال، با استفاده از یکی از می CSSهاي پردازندهبا استفاده از پیش

توان به این دستاورد رسید. می Jacketبه نام Sassهاي پالگین

9

حیاتی در آن غیر عناصر حیاتی و هاي کدنویسیروش کار به این صورت است که از یک فایل مشترك که بخش پردازیم. مجزا شده است استفاده کرده و به توسعه رابط کاربري خود می

Sassدر Jacketنحوه جداسازي کدهاي حیاتی و غیرحیاتی با استفاده از -9تصویر

کنیم، البته حیاتی وارد میو یکبار دیگر در فایل کدهاي غیر سپس این فایل مشترك را یکبار در فایل کدهاي حیاتی

و critical با این تفاوت که قبل از وارد کردن این فایل، مقدار مشخصه مورد نظر را با استفاده از عنوانی مانندcritical-none کنیم.دهی میمقدار

Sassنحوه فراخوانی کدهاي حیاتی در -10تصویر

Sassنحوه فراخوانی کدهاي غیرحیاتی در -11تصویر

10

در CSSبه Sassبعد از کامپایل را حیاتی مورد نظر، کدهاي حیاتی و غیر صهدهی مشخبه این ترتیب بسته به مقدارحیاتی است و البته هاي حیاتی از غیرسعه کامپوننت محور با رویکرد جداسازي کامپوننتاختیار داریم. حاصل این کار تو حیاتی تکرار نخواهد شد. هاي غیرحیاتی ما، در کد مطمئن خواهیم بود که کدهاي

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

توان صفحه وب را هم کش ، شاهد کاهش پرفورمنس باشیم. هرچند میدندششیت کش میه تمام فایل استایلسنتی کرسیم که آیا این روش مفید است یا کرد، اما این راه حل معقولی براي صفحات داینامیک نیست. پس به این سوال می

اي است که باید پیاده شود. از ته به ماهیت پروژهخیر؟ جواب این است که بستگی دارد. انتخاب استفاده از این روش بسترین طرف دیگر، تأکیید فراوان وجود دارد مبنی بر اینکه کدهاي حیاتی باید واقعاً آن دسته از کدهایی باشند که در سریع

باشند تا سربار نامیم. بنابراین باید حجم کمی داشته ها را حیاتی میها نیاز داریم. به همین دلیل آنزمان ممکن به آنبه هاي این روش به راحتی گذر کنیم. الزم ها در بازدیدهاي مکرر، به حدي نباشد که از مزیتحاصل از دانلود مجدد آن

حیاتی همواره قابلیت کش شدن را دارند.هاي غیرذکر است که استایلنتایج گرفته شده دارد، اما به دلیل رویکردي که در این مقاله به تشریح آن پرداختیم، هرچند تأثیري قابل لمس در

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

ها و دیگر منابع شیت، صفحه وب و عکسفایل استایلاست. بدین ترتیب به صورت موازي و همزمان دریافت پاسخ توانند به صورت موازي به کاربر ارسال شوند. مورد نیاز می

، 2015سال مبرکنند و در نواهاي مرورگرهاي متداول، این پروتکل را پشتیبانی میهرچند تا به امروز آخرین نسخهکنند، اما هنوز فاصله زیادي تا استفاده گسترده آن از ده میلیون وبسایت پربازدید دنیا از این پروتکل استفاده می 2.3%

ها فروکش نخواهد کرد؛ چرا که باعث افزایش دو وجود دارد و حتی در آن صورت هم میل براي استفاده توأم این روش چندان پرفورمنس خواهد شد.

هاي قابل استفاده آن و اهمیت این سعی بر این بود که به معرفی این روش، نقاط ضعف و قوت، پتانسیل در این مقاله گرا پرداخته شود.روش در طراحی واکنش

منابع

https://www.filamentgroup.com/lab/performance-rwd.html https://developers.google.com/speed/docs/insights/mobile https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/ http://www.smashingmagazine.com/2015/08/understanding-critical-css/ http://dbushell.com/2015/02/19/critical-css-and-performance/ https://github.com/addyosmani/critical-path-css-tools https://css-tricks.com/authoring-critical-fold-css/ http://fourword.fourkitchens.com/article/use-gulp-automate-your-critical-path-css https://github.com/addyosmani/critical http://www.drewbolles.com/blog/2015/04/23/inline-critical-css-using-jekyll-and-gulp/ http://ryantvenge.com/2015/04/criticalcss-with-gulp-js/ https://github.com/addyosmani/critical-path-css-demo https://paul.kinlan.me/detecting-critical-above-the-fold-css/ https://github.com/filamentgroup/criticalCSS http://fourword.fourkitchens.com/article/automating-critical-css-without-blocking-rendering http://fourword.fourkitchens.com/examples/critical-css-blocking/

11

https://github.com/at-import/jacket http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/ http://fourword.fourkitchens.com/article/use-gulp-automate-your-critical-path-css https://github.com/bezoerb/grunt-critical https://github.com/filamentgroup/loadCSS/ https://github.com/pocketjoso/penthouse