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

1. 1
‫اﻫﻤﯿﺖ‬‫اﺳﺘﺎﯾﻞ‬‫واﮐﻨﺶ‬ ‫ﻃﺮاﺣﯽ‬ ‫در‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻧﻮﯾﺴﯽ‬‫ﮔﺮا‬
‫واﮐﻨﺶ‬ ‫ﻃﺮاﺣﯽ‬ ‫ﺗﺨﺼﺼﯽ‬ ‫ﻫﻤﺎﯾﺶ‬ ‫دوﻣﯿﻦ‬‫ﮔﺮا‬
‫ﻣﻨﻄﻘﯽ‬ ‫آرش‬
‫ﺑﻪ‬ ‫ﻣﻘﺎﻟﻪ‬ ‫اﯾﻦ‬ ‫در‬ ‫آﻧﭽﻪ‬‫اﺳﺘﺎﯾﻞ‬ ‫اﻫﻤﯿﺖ‬ ،‫ﭘﺮداﺧﺖ‬ ‫ﺧﻮاﻫﯿﻢ‬ ‫آن‬‫و‬ ‫اﺳﺖ‬ ‫وب‬ ‫ﺻﻔﺤﺎت‬ ‫ﭘﺮﻓﻮرﻣﻨﺲ‬ ‫اﻓﺰاﯾﺶ‬ ‫ﺟﻬﺖ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻧﻮﯾﺴﯽ‬
‫ا‬ ‫دﯾﺪ‬ ‫ﺧﻮاﻫﯿﻢ‬‫ﻣﯽ‬ ‫ﭼﮕﻮﻧﻪ‬ ‫و‬ ‫ﭼﺮا‬ ‫ﺗﮑﻨﯿﮏ‬ ‫ﯾﻦ‬‫ﺗﺄ‬ ‫ﺗﻮاﻧﺪ‬‫ﻃﺮاﺣﯽ‬ ‫در‬ ‫ﻣﺜﺒﺘﯽ‬ ‫ﺛﯿﺮات‬‫واﮐﻨﺶ‬ ‫ﻫﺎي‬.‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫ﮔﺮا‬
‫ﭼﺎﻟﺶ‬ ‫از‬ ‫وب‬ ‫ﺻﻔﺤﺎت‬ ‫ﺑﺎرﮔﺬاري‬ ‫ﺳﺮﻋﺖ‬ ‫در‬ ‫ﺗﺴﺮﯾﻊ‬ ‫و‬ ‫ﭘﺮﻓﻮرﻣﻨﺲ‬ ‫اﻓﺰاﯾﺶ‬ ،‫اﻣﺮوز‬ ‫ﺑﻪ‬ ‫ﺗﺎ‬ ‫ﮔﺬﺷﺘﻪ‬ ‫از‬‫ﺗﻮﺳﻌﻪ‬ ‫و‬ ‫ﻃﺮاﺣﯽ‬ ‫ﻫﺎي‬
‫ﺳﺎل‬ ‫در‬ ‫و‬ ‫ﺑﻮده‬‫دﯾﻮاﯾﺲ‬ ‫در‬ ‫وﺑﮕﺮدي‬ ‫ﺷﯿﻮع‬ ‫ﺑﺎ‬ ‫اﺧﯿﺮ‬ ‫ﻫﺎي‬‫ﻫﺎي‬‫ﻫﻤﺮاه‬‫ﻣﺮزﻫﺎي‬ ‫ﺑﻪ‬ ‫ﭼﺎﻟﺶ‬ ‫اﯾﻦ‬ ،‫واﮐﻨﺶ‬ ‫ﻃﺮاﺣﯽ‬‫رﺳﯿﺪه‬ ‫ﻧﯿﺰ‬ ‫ﮔﺮا‬
،‫ﻫﻤﺮاه‬ ‫اﯾﻨﺘﺮﻧﺖ‬ ‫ﻣﺎﻫﯿﺖ‬ ‫دﻟﯿﻞ‬ ‫ﺑﻪ‬ ‫ﺣﺘﯽ‬ ‫و‬ ‫اﺳﺖ‬‫اﯾ‬ ‫در‬ ‫ﻧﯿﺎز‬‫ﻦ‬‫ﺣﯿﻄﻪ‬.‫اﺳﺖ‬ ‫ﺷﺪه‬ ‫ﺣﺲ‬ ‫ﺑﯿﺸﺘﺮ‬
‫روش‬‫ﺑﻬﯿﻨﻪ‬ ‫ﺑﺮاي‬ ‫ﻣﺘﻌﺪدي‬ ‫ﻫﺎي‬‫ﺗﮑﻨﯿﮏ‬ ‫از‬ .‫دارد‬ ‫وﺟﻮد‬ ‫وب‬ ‫ﺻﻔﺤﺎت‬ ‫ﺳﺎزي‬‫ﺳﺎده‬ ‫ﻫﺎي‬‫ﻣﺜﻞ‬ ‫اي‬‫ﻓﺸﺮده‬‫ﺳﺎزي‬‫اﺳﮑﺮﯾﭙﺖ‬‫ﻫﺎ‬
‫از‬ ‫اﺳﺘﻔﺎده‬ ‫اﺳﺘﻔﺎده‬ ‫ﺗﺎ‬ ‫ﮔﺮﻓﺘﻪ‬CDN‫ﺷﯿﻮه‬ ‫ﯾﺎ‬ ‫و‬ ‫ﻫﺎ‬‫ﻣﺨﺘﻠﻒ‬ ‫ﻫﺎي‬‫ﺗﺼﺎوﯾﺮ‬ ‫ﺑﺎرﮔﺰاري‬،‫ﺑﺎ‬ ‫ﻣﺘﻨﺎﺳﺐ‬‫اﺑﻌﺎد‬‫از‬ ‫ﯾﮑﯽ‬ ‫اﻣﺎ‬ .‫ﻧﻤﺎﯾﺶ‬ ‫ﺻﻔﺤﻪ‬
‫ﺳﺮوﯾﺲ‬ ،‫وب‬ ‫ﺻﻔﺤﺎت‬ ‫ﺑﺮاي‬ ‫ﭘﺮﻓﻮرﻣﻨﺲ‬ ‫ﺗﺴﺖ‬ ‫اﺑﺰارﻫﺎي‬InsightspageSpeed‫ﻣﺨﺘﻠﻔﯽ‬ ‫زواﯾﺎي‬ ‫از‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﮔﻮﮔﻞ‬
‫و‬ ‫ﮐﺮده‬ ‫آﻧﺎﻟﯿﺰ‬ ‫را‬ ‫ﺷﻤﺎ‬ ‫وب‬ ‫ﺻﻔﺤﻪ‬‫ا‬ ‫ﮔﺰارﺷﯽ‬‫ﺣﻞ‬ ‫راه‬ ‫و‬ ‫اﯾﺮادات‬ ‫ز‬‫ﻣﯽ‬ ‫ﻗﺮار‬ ‫ﺷﻤﺎ‬ ‫اﺧﺘﯿﺎر‬ ‫در‬ ‫را‬ ‫آن‬ ‫ﻫﺎي‬.‫دﻫﺪ‬
‫وب‬ ‫از‬ ‫ﯾﮑﯽ‬ ‫اﮔﺮ‬ ‫ﺷﺎﯾﺪ‬‫ﺳﺎﯾﺖ‬‫ﻣﯽ‬ ‫درﯾﺎﻓﺖ‬ ‫ﮐﻪ‬ ‫ﺧﻄﺎﻫﺎﯾﯽ‬ ‫از‬ ‫ﯾﮑﯽ‬ ،‫ﮐﻨﯿﺪ‬ ‫ﺗﺴﺖ‬ ‫اﺑﺰار‬ ‫اﯾﻦ‬ ‫در‬ ‫را‬ ‫ﺧﻮد‬ ‫ﻫﺎي‬:‫ﺑﺎﺷﺪ‬ ‫زﯾﺮ‬ ‫ﭘﯿﺎم‬ ‫ﮐﻨﯿﺪ‬
‫ﺗﺼﻮﯾﺮ‬1-‫اﺑﺰار‬ ‫ﮔﺰارش‬InsightspageSpeed
‫ﻣﯽ‬ ‫ﮔﻔﺘﻪ‬ ‫اﯾﻨﺠﺎ‬ ‫در‬ ‫آﻧﭽﻪ‬ ‫ﻣﺨﺘﺼﺮ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬‫ﺷﻮد‬،‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫اﯾﻦ‬‫رﻧﺪر‬‫رﯾﺴﻮرس‬ ‫وﺟﻮد‬ ‫دﻟﯿﻞ‬ ‫ﺑﻪ‬ ،‫ﺷﻤﺎ‬ ‫وب‬ ‫ﺻﻔﺤﻪ‬‫ﻫﺎي‬
CSS‫ﻣﯽ‬ ‫ﺗﺄﺧﯿﺮ‬ ‫ﺑﻪ‬‫اﺳﺘﺎﯾﻞ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﺷﺪه‬ ‫ﭘﯿﺸﻨﻬﺎد‬ ‫و‬ ‫اﻓﺘﺪ‬‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اﯾﻨﻼﯾﻦ‬‫رﯾﺴﻮرس‬ ‫و‬ ‫ﺷﻮﻧﺪ‬ ‫ﻧﻮﺷﺘﻪ‬‫ﮐﻪ‬ ‫ﻫﺎﯾﯽ‬
‫ﺑﺎﻋﺚ‬‫در‬ ‫ﺗﺄﺧﯿﺮ‬‫رﻧﺪر‬‫ﺷﺪن‬‫ﻣﯽ‬ ‫ﺻﻔﺤﻪ‬‫ﺷﻮ‬‫ﻧ‬‫آﺳﻨﮑﺮون‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ،‫ﺪ‬‫ﺑﺎرﮔﺬ‬‫ﺷﻮ‬ ‫اري‬‫ﻧ‬.‫ﺪ‬
‫ﺳﺎل‬ ‫اواﺳﻂ‬ ‫از‬ ‫ﮔﻮﮔﻞ‬2014‫اﯾﻦ‬‫ﮔﺮﻓﺘﻪ‬ ‫ﻧﻈﺮ‬ ‫در‬ ‫را‬ ‫وﯾﮋﮔﯽ‬‫اﺳﺖ‬‫اﮔﺮ‬ ‫و‬ ‫اﻣﺎ‬ ‫روش‬ ‫اﯾﻦ‬ ‫ﻫﺮﭼﻨﺪ‬ .‫اﺳﺖ‬ ‫ﺑﻬﺘﺮ‬ ‫اﻣﺎ‬ ،‫دارد‬ ‫ﻫﺎﯾﯽ‬
‫ﻗ‬‫ﺑﺎر‬ ‫ﻫﻨﮕﺎم‬ ‫در‬ ‫ﻣﺮورﮔﺮ‬ ‫رﻓﺘﺎر‬ ‫ﺑﺎ‬ ‫ﭼﯿﺰ‬ ‫ﻫﺮ‬ ‫از‬ ‫ﺒﻞ‬‫ﺣ‬ ‫راه‬ ‫ﺳﭙﺲ‬ ‫و‬ ‫ﺷﻮﯾﻢ‬ ‫آﺷﻨﺎ‬ ‫ﺻﻔﺤﻪ‬ ‫ﮔﺬاري‬‫ﮐﻪ‬ ‫ﭼﺮا‬ ‫ﮐﻨﯿﻢ؛‬ ‫ﺑﺮرﺳﯽ‬ ‫را‬ ‫ﺷﺪه‬ ‫ﻣﻄﺮح‬ ‫ﻞ‬
‫ﭘﺲ‬ ‫در‬ ‫ﺑﺪاﻧﯿﻢ‬ ‫ﻣﺎ‬ ‫اﮔﺮ‬،‫اﺳﺖ‬ ‫رﺧﺪاد‬ ‫ﺣﺎل‬ ‫در‬ ‫اﺗﻔﺎﻗﺎﺗﯽ‬ ‫ﭼﻪ‬ ،‫ﻣﺎﺟﺮا‬ ‫زﻣﯿﻨﻪ‬‫ﻣﯽ‬‫ﺗﻮاﻧﯿﻢ‬‫ﺻﻔ‬.‫ﮐﻨﯿﻢ‬ ‫اﯾﺠﺎد‬ ‫را‬ ‫ﮐﺎراﺗﺮي‬ ‫وب‬ ‫ﺤﺎت‬
‫ﻣﯽ‬ ‫ﺻﺎدر‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﯾﮏ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫درﺧﻮاﺳﺖ‬ ‫ﮐﺎرﺑﺮ‬ ‫وﻗﺘﯽ‬‫ﻣﯽ‬ ‫داده‬ ‫ﺳﺮور‬ ‫ﻃﺮف‬ ‫از‬ ‫ﮐﻪ‬ ‫ﭘﺎﺳﺨﯽ‬ ‫اوﻟﯿﻦ‬ ‫در‬ ،‫ﮐﻨﺪ‬‫ﺷﻮد‬،‫ﻓﺎﯾﻞ‬
‫اﺳﺘﺎﯾﻞ‬‫ﻧﻤﯽ‬ ‫ﺷﯿﺖ‬‫ﻓﺎﯾﻞ‬ ‫ﺗﻤﺎم‬ ‫ﺗﺎ‬ ‫اﺳﺖ‬ ‫اﻧﺘﻈﺎر‬ ‫در‬ ‫ﮐﺎرﺑﺮ‬ ‫ﻣﺮورﮔﺮ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﺣﺎﻟﯽ‬ ‫در‬ ‫اﯾﻦ‬ .‫ﺷﻮد‬ ‫ﻣﻨﺘﻘﻞ‬ ‫ﮐﻼﯾﻨﺖ‬ ‫ﺑﻪ‬ ‫ﺳﺮور‬ ‫از‬ ‫ﺗﻮاﻧﺪ‬

2. 2
‫اﺳﺘﺎﯾﻞ‬‫ﺑﺎرﮔﺬاري‬ ‫ﺷﯿﺖ‬‫ﻣﯽ‬ ‫ﺻﻔﺤﻪ‬ ‫رﻧﺪر‬ ‫و‬ ‫آن‬ ‫ﮐﺮدن‬ ‫ﭘﺎرس‬ ‫ﺑﻪ‬ ‫ﺳﭙﺲ‬ ،‫ﺷﻮد‬‫اﺳﺘﺎﯾﻞ‬ ‫ﻓﺎﯾﻞ‬ ‫ﮐﻪ‬ ‫زﻣﺎﻧﯽ‬ ‫ﺗﺎ‬ ‫ﭘﺲ‬ .‫ﭘﺮدازد‬‫ﺑﻪ‬ ‫ﺷﯿﺖ‬
‫ﻗ‬ ‫ﻣﺮورﮔﺮ‬ ،‫ﻧﺸﻮد‬ ‫ﺑﺎرﮔﺬاري‬ ‫ﮐﺎﻣﻞ‬ ‫ﺻﻮرت‬‫ﺎ‬.‫ﻧﯿﺴﺖ‬ ‫ﺻﻔﺤﻪ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺑﻪ‬ ‫در‬‫ﺑﻨﺎﺑﺮاﯾﻦ‬‫ﻓﺎﯾﻞ‬ ‫ﺑﺮاي‬ ‫درﺧﻮاﺳﺖ‬ ‫ﯾﮏ‬CSS‫ﻣﯽ‬‫ﺑﻪ‬ ‫ﺗﻮاﻧﺪ‬
‫ﻣﻼﺣﻈﻪ‬ ‫ﻗﺎﺑﻞ‬ ‫ﻃﻮر‬‫اي‬‫ﺗﺄﺧﯿﺮ‬‫ﮐﻪ‬ ‫ﺣﺎﻟﯿﺴﺖ‬ ‫در‬ ‫اﯾﻦ‬ .‫ﺑﺒﺮد‬ ‫ﺑﺎﻻ‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﺷﺪن‬ ‫رﻧﺪر‬‫ﻓﺎﯾﻞ‬ ‫اﯾﻦ‬ ‫در‬CSS‫دﯾﮕﺮ‬ ‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫ﮐﺪﻫﺎﯾﯽ‬
‫وب‬ ‫ﺻﻔﺤﺎت‬‫ﺻﻔﺤﻪ‬ ‫در‬ ‫ﮐﻪ‬ ‫دارد‬ ‫وﺟﻮد‬ ‫ﻫﻢ‬ ‫ﺳﺎﯾﺖ‬‫آن‬ ‫ﺑﻪ‬ ‫ﮐﺎرﺑﺮ‬ ‫درﺧﻮاﺳﺖ‬ ‫ﻣﻮرد‬ ‫ي‬‫ﻧﯿﺎز‬ ‫ﻫﺎ‬‫ي‬‫ﮐﺪﻫﺎﯾﯽ‬ ‫ﺣﺘﯽ‬ .‫ﻧﯿﺴﺖ‬‫ﻫﻤﯿﻦ‬ ‫از‬
‫آن‬ ‫ﺑﻪ‬ ‫اول‬ ‫وﻫﻠﻪ‬ ‫در‬ ‫ﮐﻪ‬ ‫دارد‬ ‫وﺟﻮد‬ ‫ﻫﻢ‬ ‫درﺧﻮاﺳﺖ‬ ‫ﻣﻮرد‬ ‫ﺻﻔﺤﻪ‬.‫ﻧﯿﺴﺖ‬ ‫ﻧﯿﺎزي‬ ‫ﻫﺎ‬
‫ﻣﯽ‬ ‫ﺷﮑﻞ‬ ‫اﯾﺪه‬ ‫اﯾﻦ‬ ‫ﺗﺮﺗﯿﺐ‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬‫ﮔﯿﺮد‬‫ﺻﻔﺤﻪ‬ ‫اوﻟﯿﻪ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺑﺮاي‬ ‫ﮐﺎرﺑﺮ‬ ‫ﮐﻪ‬ ‫ﮐﺪﻫﺎﯾﯽ‬ ‫از‬ ‫دﺳﺘﻪ‬ ‫آن‬ ‫ﻓﻘﻂ‬ ‫ﺑﺘﻮاﻧﯿﻢ‬ ‫ﻣﺎ‬ ‫اﮔﺮ‬ ‫ﮐﻪ‬
‫آن‬ ‫ﺑﻪ‬‫ﮐﻨﯿﻢ‬ ‫ﻣﻨﺘﻘﻞ‬ ‫ﮐﺎرﺑﺮ‬ ‫ﺑﻪ‬ ،‫ﺳﺮور‬ ‫از‬ ‫ﭘﺎﺳﺦ‬ ‫اوﻟﯿﻦ‬ ‫در‬ ‫را‬ ‫دارد‬ ‫اﺣﺘﯿﺎج‬ ‫ﻫﺎ‬،‫ﻣﯽ‬‫را‬ ‫ﻧﻈﺮ‬ ‫ﻣﻮرد‬ ‫ﺻﻔﺤﻪ‬ ‫ﺗﻮاﻧﯿﻢ‬‫ﺳﺮﯾﻊ‬‫ﺗﺮ‬‫ﮐﺎرﺑﺮ‬ ‫اﺧﺘﯿﺎر‬ ‫در‬
‫ﻣﯽ‬ ‫ﮔﻔﺘﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ،‫ﮐﺪﻫﺎ‬ ‫از‬ ‫دﺳﺘﻪ‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬ .‫دﻫﯿﻢ‬ ‫ﻗﺮار‬‫آﻧﺠﺎ‬ ‫از‬ ‫و‬ ‫ﺷﻮد‬‫در‬ ‫ﮐﻪ‬ ‫ﯾﯽ‬‫اوﻟﯿﻦ‬‫ﺳﺮور‬ ‫ﭘﺎﺳﺦ‬14‫ﻗﺎﺑﻞ‬ ‫ﮐﺪ‬ ‫ﮐﯿﻠﻮﺑﺎﯾﺖ‬
‫ﻣﯽ‬ ،‫اﺳﺖ‬ ‫اﻧﺘﻘﺎل‬‫ا‬ ‫ﺗﻮان‬‫ﺑﻪ‬ ‫ﻣﺤﺪود‬ ‫را‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫ﯾﻦ‬14‫آن‬ ‫و‬ ‫داﻧﺴﺖ‬ ‫ﮐﯿﻠﻮﺑﺎﯾﺖ‬‫داﺧﻞ‬ ‫در‬ ‫اﯾﻨﻼﯾﻦ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫را‬ ‫ﻫﺎ‬head
‫ﻣﯽ‬ ‫ﺻﻔﺤﻪ‬ ‫ﻫﺮ‬ .‫ﻧﻮﺷﺖ‬ ‫ﺻﻔﺤﻪ‬ ‫ﻫﺮ‬‫اﺳﺘﺎﯾﻞ‬ ‫ﮐﺪﻫﺎي‬ ‫ﻣﺎﺑﻘﯽ‬ ،‫دﯾﮕﺮ‬ ‫ﻃﺮف‬ ‫از‬ .‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫را‬ ‫ﺧﻮد‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫ﺗﻮاﻧﺪ‬‫را‬ ‫ﺷﯿﺖ‬
‫ﻣﯽ‬‫ﺗ‬.‫ﮐﺮد‬ ‫ﺑﺎرﮔﺬاري‬ ً‫ا‬‫ﺑﻌﺪ‬ ‫ﻮان‬
ً‫ﻼ‬‫ﻓﻌ‬‫ﭼ‬ ‫ﺑﻪ‬‫ـ‬‫اﯾ‬ ‫ﻣﻔﻬﻮم‬ ‫درك‬ ‫ﻣﻬﻢ‬ ،‫ﻧﺪارﯾﻢ‬ ‫ﮐﺎري‬ ‫اﯾﺪه‬ ‫اﯾﻦ‬ ‫ﺳﺎزي‬ ‫ﭘﯿﺎده‬ ‫ﮕﻮﻧﮕﯽ‬‫ﻋﻨﻮان‬ ‫ﺑﺎ‬ ‫اﯾﺪه‬ ‫اﯾﻦ‬ .‫اﺳﺖ‬ ‫اﯾﺪه‬ ‫ﻦ‬
Optimizing the Critical Rendering Path‫ﻧ‬‫ﻣﯽ‬ ‫ﺷﻨﺎﺧﺘﻪ‬ ‫ﯿﺰ‬.‫ﺷﻮد‬‫ﭼﮕﻮﻧﻪ‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﯾﮏ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﺑﺨﺶ‬ ‫اﻣﺎ‬‫ﺷﻨﺎﺳﺎﯾﯽ‬
‫ﮐﻨﯿﻢ‬‫؟‬‫اﻟﻮﯾﺖ‬ ‫ﮐﺎرﺑﺮ‬ ‫ﺑﺮاي‬ ‫آﻧﭽﻪ‬‫ﻣﯽ‬ ‫ﺟﺎي‬ ‫ﻧﻤﺎﯾﺸﺶ‬ ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫ﮐﻪ‬ ‫ﺻﻔﺤﻪ‬ ‫از‬ ‫ﺑﺨﺶ‬ ‫آن‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫اﯾﻦ‬ ،‫دارد‬‫در‬ ‫ﺳﺮﻋﺖ‬ ‫ﺑﻪ‬ ‫ﮔﯿﺮد‬
‫را‬ ‫ﺑﺨﺶ‬ ‫اﯾﻦ‬ .‫ﺑﺎﺷﺪ‬ ‫دﺳﺘﺮس‬above-the-fold‫ﺗﺎ‬ ‫ﺑﺎﻻي‬ ‫ﺑﺨﺶ‬ ‫ﯾﺎ‬‫ﻣﯽ‬ ‫ﺧﻮردﮔﯽ‬.‫ﻧﺎﻣﻨﺪ‬‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﺻﻔﺤﻪ‬ ‫از‬ ‫ﻗﺴﻤﺖ‬ ‫آن‬ ‫ﻣﻨﻈﻮر‬
‫ﺑ‬‫ﻧﻤﺎﯾﺶ‬ ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫ﻋﻤﻮدي‬ ‫ﺼﻮرت‬‫ﻣﯽ‬ ‫ﺟﺎي‬ ‫ﮐﺎرﺑﺮ‬‫اﻧﺪازه‬ ‫ﻣﺮز‬ ‫و‬ ،‫ﮔﯿﺮد‬‫ﮔﯿﺮي‬‫ﻣﯽ‬ ‫ﻣﺤﺎﺳﺒﻪ‬ ‫ﺻﻔﺤﻪ‬ ‫ﻗﺴﻤﺖ‬ ‫ﺑﺎﻻﺗﺮﯾﻦ‬ ‫از‬.‫ﺷﻮد‬
‫ﺑﺮاي‬‫دا‬ ‫آن‬ ‫دﺳﮑﺘﺎپ‬ ‫ﻧﺴﺨﻪ‬ ‫در‬ ‫ﺑﺎزار‬ ‫ﮐﺎﻓﻪ‬ ‫ﺳﺎﯾﺖ‬ ‫ﺑﻪ‬ ‫ﻧﮕﺎﻫﯽ‬ ‫اﮔﺮ‬ ‫ﻧﯿﺴﺖ‬ ‫ﺑﺪ‬ ‫ﻣﺜﺎل‬‫ﺑﺨﺶ‬ ‫و‬ ‫ﺑﺎﺷﯿﻢ‬ ‫ﺷﺘﻪ‬‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬
‫ﻏﯿﺮ‬‫ﺣﯿﺎ‬‫ﺗ‬‫ﻣﯽ‬ ‫ﭘﺎﯾﯿﻦ‬ ‫ﺗﺼﻮﯾﺮ‬ ‫در‬ ‫ﮐﻪ‬ ‫ﻫﻤﺎﻧﻄﻮر‬ .‫ﮐﻨﯿﻢ‬ ‫ﻣﻘﺎﯾﺴﻪ‬ ‫ﻫﻢ‬ ‫ﺑﺎ‬ ‫را‬ ‫آن‬ ‫ﯽ‬‫ﺑﺨﺶ‬ ‫ﺑﯿﻨﯿﺪ‬above-the-fold‫از‬ ‫ﻗﺮﻣﺰ‬ ‫ﺧﻄﭽﯿﻦ‬ ‫ﺑﺎ‬
‫ﻏﯿﺮ‬ ‫ﺑﺨﺶ‬‫ﺟﺪا‬ ‫ﺣﯿﺎﺗﯽ‬.‫اﺳﺖ‬ ‫ﮔﺸﺘﻪ‬

3. 3
‫ﺗﺼﻮﯾﺮ‬2-‫وب‬ ‫ﺻﻔﺤﻪ‬ ‫ﻏﯿﺮﺣﯿﺎﺗﯽ‬ ‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﺑﺨﺶ‬ ‫ﺟﺪاﺳﺎزي‬

4. 4
‫ﻣﯽ‬ ‫اول‬ ‫ﻧﮕﺎه‬ ‫در‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﺑﺨﺶ‬ ‫ﻧﻬﺎﯾﯽ‬ ‫ﮐﺎرﺑﺮ‬ ،‫اﺳﺖ‬ ‫ﻣﺸﺨﺺ‬ ‫ﻣﺜﺎل‬ ‫در‬ ‫ﮐﻪ‬ ‫ﻫﻤﺎﻧﻄﻮر‬ ‫ﭘﺲ‬‫ﮐﻪ‬ ‫ﺑﻬﺘﺮ‬ ‫ﭼﻪ‬ ‫ﭘﺲ‬ .‫ﺑﯿﻨﺪ‬
‫اﻟﻤﺎن‬ ‫ﻧﯿﺎز‬ ‫ﻣﻮرد‬ ‫ﮐﺪﻫﺎي‬.‫ﺑﻨﻮﯾﺴﯿﻢ‬ ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫اﯾﻨﻼﯾﻦ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫از‬ ‫ﻗﺴﻤﺖ‬ ‫اﯾﻦ‬ ‫ﻫﺎي‬
‫ﺳﺎﺧﺘﺎر‬ ‫ﺗﺮﺗﯿﺐ‬ ‫ﺑﺪﯾﻦ‬‫ﻣﯽ‬ ‫ﺻﻔﺤﻪ‬ ‫ﮐﺪﻫﺎي‬:‫ﺑﺎﺷﺪ‬ ‫زﯾﺮ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫ﺗﻮاﻧﺪ‬
‫ﺗﺼﻮﯾﺮ‬3-‫ﭘﯿﺸﻨﻬﺎدي‬ ‫ﮐﺪ‬ ‫ﺳﺎﺧﺘﺎر‬ ‫از‬ ‫اوﻟﯿﻪ‬ ‫ﺷﻤﺎي‬
‫ﻣﯽ‬ ‫ﻣﺸﺎﻫﺪه‬ ‫ﺑﺎﻻ‬ ‫ﺗﺼﻮﯾﺮ‬ ‫در‬‫ﻣﺎ‬ ‫ﮐﻪ‬ ‫ﮐﻨﯿﺪ‬Critical CSS‫ﻫﺎي‬‫ﺗﮓ‬ ‫درون‬ ‫را‬ ‫ﺻﻔﺤﻪ‬style‫دادﯾﻢ‬ ‫ﻗﺮار‬ ‫اﯾﻨﻼﯾﻦ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬
‫ﮐﺪ‬ ‫ﺑﺎﻗﯿﻪ‬ ‫ﻧﺎﻫﻤﮕﺎم‬ ‫ﺑﺎرﮔﺬاري‬ ‫ﺑﺮاي‬ ‫و‬‫ﺗﺎﺑﻊ‬ ‫از‬ ،‫ﻧﯿﺎز‬ ‫ﻣﻮرد‬ ‫ﻫﺎي‬loadCSS.‫ﮐﺮدﯾﻢ‬ ‫اﺳﺘﻔﺎده‬
‫ﻣﯽ‬ ‫ﺻﻔﺤﻪ‬ ‫ﻫﺮ‬‫ﺗﻮاﻧﺪ‬Critical CSS‫ﻫﺮ‬ ،‫دﯾﮕﺮ‬ ‫ﻃﺮف‬ ‫از‬ .‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫را‬ ‫ﺧﻮد‬ ‫ﻫﺎي‬‫ﻧﻤﺎﯾﺸﮕﺮ‬ ‫ﺻﻔﺤﻪ‬ ‫اﺑﻌﺎد‬ ‫ﺑﻪ‬ ‫ﺑﺴﺘﻪ‬ ‫ﺻﻔﺤﻪ‬
‫ﺑﺨﺶ‬above-the-fold‫ﻣﯽ‬ ‫آن‬‫ﺻﻔ‬ ‫از‬ ‫ﻧﺴﺨﻪ‬ ‫ﻫﺮ‬ ‫ﺑﺮاي‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﻧﯿﺎز‬ ‫ﭘﺲ‬ .‫ﺑﺎﺷﺪ‬ ‫ﻣﺘﻐﯿﺮ‬ ‫ﺗﻮاﻧﺪ‬،‫وب‬ ‫ﺤﻪ‬Critical CSS‫ﻫﺎي‬
‫ﻫﺮ‬ ‫و‬ ‫ﺷﻮد‬ ‫ﻧﻮﺷﺘﻪ‬ ‫ﻣﺠﺰا‬‫از‬ ‫اﻧﺪازه‬‫ﺻﻔﺤﻪ‬‫ﺑﺎﯾﺪ‬ ‫ﻧﯿﺰ‬ ‫اي‬Critical CSS‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫را‬ ‫ﺧﻮد‬ ‫ﻣﺠﺰاي‬ ‫ﻫﺎي‬.‫ﺣﺎﻟﺖ‬ ‫زﯾﺮ‬ ‫ﺗﺼﻮﯾﺮ‬ ‫در‬
‫ﻧﺴﺨﻪ‬ ‫ﻧﻤﺎﯾﺶ‬‫ﻣﯽ‬ ‫را‬ ‫ﺑﺎزار‬ ‫ﮐﺎﻓﻪ‬ ‫ﺳﺎﯾﺖ‬ ‫ﻣﻮﺑﺎﯾﻞ‬.‫ﺑﯿﻨﯿﺪ‬

5. 5
‫ﺗﺼﻮﯾﺮ‬4-‫ﻣﻮﺑﺎﯾﻞ‬ ‫ﻧﺴﺨﻪ‬ ‫در‬ ‫ﺻﻔﺤﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﺑﺨﺶ‬
‫واﮐﻨﺶ‬ ‫ﺻﻔﺤﺎت‬ ‫ﮐﺎرﺑﺮي‬ ‫راﺑﻂ‬ ،‫ﻫﺴﺘﯿﺪ‬ ‫ﻣﻄﻠﻊ‬ ‫ﮐﻪ‬ ‫ﻫﻤﺎﻧﻄﻮر‬‫ﺻﻔﺤﻪ‬ ‫ﺳﺎﯾﺰ‬ ‫ﺑﻪ‬ ‫ﺑﺴﺘﻪ‬ ‫ﮐﻪ‬ ‫ﺷﻮﻧﺪ‬ ‫ﻃﺮاﺣﯽ‬ ‫ﻃﻮري‬ ‫ﺗﻮاﻧﻨﺪ‬ ‫ﻣﯽ‬ ‫ﮔﺮا‬
‫ﺻﻔﺤﻪ‬ ‫ﯾﮏ‬ ‫ﺗﺮﺗﯿﺐ‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬ .‫ﺑﺎﺷﻨﺪ‬ ‫ﮐﺎرﺑﺮان‬ ‫ﻧﯿﺎز‬ ‫ﭘﺎﺳﺨﮕﻮي‬ ،‫ﻧﻤﺎﯾﺶ‬‫ﻣﯽ‬ ‫وب‬ ‫ي‬‫ﺑﺨﺶ‬ ‫ﺗﻮاﻧﺪ‬‫ﻧﺴﺨﻪ‬ ‫در‬ ‫ﻣﺘﻔﺎوﺗﯽ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫ﻫﺎي‬
.‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫دﺳﮑﺘﺎپ‬ ‫ﯾﺎ‬ ‫و‬ ‫ﺗﺒﻠﺖ‬ ،‫ﻣﻮﺑﺎﯾﻞ‬ ‫ﻣﺨﺘﻠﻒ‬
‫اﯾ‬ ‫ﺷﻨﺎﺳﺎﯾﯽ‬‫ﺑﺨﺶ‬ ‫ﻦ‬‫ﺣﯿﺎﺗ‬ ‫ﻫﺎي‬‫ﮐﺪ‬ ‫اﺳﺘﺨﺮاج‬ ،‫ﯽ‬‫ﻫﺎي‬CSS‫آن‬‫ﮐﺪ‬ ‫ﻧﻮﯾﺴﯽ‬ ‫اﯾﻨﻼﯾﻦ‬ ‫و‬ ‫ﻫﺎ‬.‫اﺳﺖ‬ ‫دﺷﻮاري‬ ‫ﮐﺎر‬ ‫ﺻﻔﺤﻪ‬ ‫ﻫﺮ‬ ‫ﻫﺎي‬
‫ﺳﺎﯾﺖ‬ ‫ﺑﺮاي‬ ‫را‬ ‫ﭘﺮوﺳﻪ‬ ‫اﯾﻦ‬ ‫ﺑﺨﻮاﻫﯿﺪ‬ ‫اﮔﺮ‬ ً‫ﺎ‬‫ﻣﺨﺼﻮﺻ‬‫ﮐﻪ‬ ‫ﺑﮕﯿﺮﯾﺪ‬ ‫ﻧﻈﺮ‬ ‫در‬ ‫ﻫﻢ‬ ‫را‬ ‫اﯾﻦ‬ .‫دﻫﯿﺪ‬ ‫اﻧﺠﺎم‬ ‫ﺻﻔﺤﻪ‬ ‫ﭼﻨﺪ‬ ‫و‬ ‫ﭼﻨﺪﯾﻦ‬ ‫ﺑﺎ‬ ‫ﻫﺎﯾﯽ‬
‫ﻣﯽ‬ ‫ﺻﻔﺤﻪ‬ ‫ﻫﺮ‬.‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫ﻣﺘﻔﺎوت‬ ‫ﺷﮑﺴﺖ‬ ‫ﻧﻘﻄﻪ‬ ‫ﭼﻨﺪﯾﻦ‬ ‫ﺗﻮاﻧﺪ‬
‫ﭼﺎره‬ ‫ﭘﺲ‬‫آن‬ ‫ﮐﺸﯿﺪ؟‬ ‫دﺳﺖ‬ ‫ﭘﺮﻓﻮرﻣﻨﺲ‬ ‫ﺑﻬﺒﻮد‬ ‫روش‬ ‫اﯾﻦ‬ ‫از‬ ‫راﺣﺘﯽ‬ ‫ﺑﻪ‬ ‫ﺑﺎﯾﺪ‬ ‫آﯾﺎ‬ ‫ﭼﯿﺴﺖ؟‬‫ﻧﺮخ‬ ‫روش‬ ‫اﯾﻦ‬ ‫ﮐﻪ‬ ‫ﺣﺎﻟﯽ‬ ‫در‬ ‫ﻫﻢ‬
‫دﺳﺘﺮس‬‫ﻧﻬﺎﯾﯽ‬ ‫ﮐﺎرﺑﺮ‬ ‫ﺑﺮاي‬ ‫را‬ ‫وب‬ ‫ﺻﻔﺤﻪ‬ ‫ﭘﺬﯾﺮي‬‫ﻣﯽ‬ ‫اﻓﺰاﯾﺶ‬‫ﻣﯽ‬ ‫ﮐﻪ‬ ‫ﻫﻤﺎﻧﻄﻮر‬ .‫دﻫﺪ‬‫دﺳﺘﺮس‬ ‫داﻧﯿﺪ‬‫ﻧﺮم‬ ‫ﭘﺬﯾﺮي‬‫ﺟﺰ‬ ‫اﻓﺰار‬‫ء‬
‫ﻣﻌﯿﺎرﻫﺎي‬‫ﻣﯽ‬ ‫ﻣﺤﺴﻮب‬ ‫ﺧﺪﻣﺎت‬ ‫ﮐﯿﻔﺖ‬‫ﮐﺎ‬ ‫ﺗﺠﺮﺑﻪ‬ ‫ﺧﻠﻖ‬ ‫ﺑﺎ‬ ‫ﻣﺴﺘﻘﯿﻤﯽ‬ ‫ارﺗﺒﺎط‬ ‫و‬ ‫ﺷﻮد‬‫رﺑ‬‫اﯾﻦ‬ ‫ﺑﻪ‬ ‫و‬ ‫دارد‬ ‫ﻧﻬﺎﯾﯽ‬ ‫ﮐﺎرﺑﺮ‬ ‫ﺑﺮاي‬ ،‫ﺑﻬﺘﺮ‬ ‫ﺮي‬
‫ﻣﯽ‬ ‫ﺗﺮﺗﯿﺐ‬.‫دﻫﯿﻢ‬ ‫ﮐﺎﻫﺶ‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﺑﺨﺶ‬ ‫درآﻣﺪن‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺑﻪ‬ ‫ﺗﺄﺧﯿﺮ‬ ‫ﺗﻮاﻧﯿﻢ‬
‫ﻣﻼل‬ ‫ﭘﺮوﺳﻪ‬ ‫روﻧﺪ‬ ‫اﺑﺰارﻫﺎﯾﯽ‬ ‫ﺧﻠﻖ‬ ‫ﺑﺎ‬ ‫ﺗﺎ‬ ‫ﮐﻮﺷﯿﺪﻧﺪ‬ ‫وب‬ ‫ﺣﻮزه‬ ‫ﻓﻌﺎﻻن‬ ‫ﺑﻨﺎﺑﺮاﯾﻦ‬‫را‬ ‫ﮐﺮدﯾﻢ‬ ‫اﺷﺎره‬ ‫آن‬ ‫ﺑﻪ‬ ‫ﺑﺎﻻ‬ ‫در‬ ‫ﮐﻪ‬ ‫آوري‬
‫راﺣﺖ‬.‫ﮐﻨﻨﺪ‬ ‫ﺗﺮ‬‫ﺗﺎ‬‫زﯾﺎدي‬ ‫اﺑﺰارﻫﺎي‬ ‫ﮐﻨﻮن‬‫ﭘﯿﺎده‬ ‫ﺗﺴﻬﯿﻞ‬ ‫ﺑﺮاي‬‫آن‬ ‫از‬ ‫ﺑﺴﯿﺎري‬ ‫ﮐﻪ‬ ‫ﺷﺪه‬ ‫اﯾﺠﺎد‬ ‫اﯾﺪه‬ ‫اﯾﻦ‬ ‫ﺳﺎزي‬‫و‬ ‫ﻗﻮاﻋﺪ‬ ‫اﺳﺎس‬ ‫ﺑﺮ‬ ‫ﻫﺎ‬
‫ﻣﯽ‬ ‫ﻃﯽ‬ ‫را‬ ‫ﭘﺮوﺳﻪ‬ ‫اﯾﻦ‬ ‫ﻫﻢ‬ ‫ﺑﻪ‬ ‫ﻣﺸﺎﺑﻪ‬ ‫ﻗﺎﻧﻮن‬‫ﭘﮑﯿﺞ‬ ‫ﺑﻪ‬ ‫اداﻣﻪ‬ ‫در‬ .‫ﮐﻨﻨﺪ‬Critical‫ﮐﻪ‬Addy Osmani‫آن‬‫ﻧﻮﺷﺘﻪ‬ ‫را‬‫ﻧﮕﺎﻫﯽ‬
‫اﻧﺪاﺧﺖ‬ ‫ﺧﻮاﻫﯿﻢ‬‫ﺣﺎﺿﺮ‬ ‫ﺣﺎل‬ ‫در‬ ‫ﺷﺎﯾﺪ‬ ‫ﮐﻪ‬‫ﺑﺘﻮان‬‫اﺑﺰار‬ ‫ﺑﻬﺘﺮﯾﻦ‬ ‫را‬ ‫آن‬‫ﭘﺮوﺳﻪ‬ ‫اﯾﻦ‬ ‫ﺳﺎزي‬ ‫ﺧﻮدﮐﺎر‬‫ﻧﻬﺎد‬ ‫ﻧﺎم‬‫دﯾﮕﺮ‬ ‫اﻧﺘﻬﺎ‬ ‫در‬ ‫و‬
‫اﺑﺰار‬‫ﻫﺎي‬‫ﻣﻮﺟﻮد‬‫را‬ ‫زﻣﯿﻨﻪ‬ ‫اﯾﻦ‬ ‫در‬.‫ﮐﺮد‬ ‫ﺧﻮاﻫﯿﻢ‬ ‫ﻣﻌﺮﻓﯽ‬

6. 6
‫ﭘﮑﯿﺞ‬Critical‫ﻣﺎژول‬ ‫ﯾﮏ‬ode.jsN‫ﻣﯽ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬‫ﺗﻮان‬‫ﻣﻨﯿﺠﺮ‬ ‫ﺗﺴﮏ‬ ‫در‬‫ﻣﺜﻞ‬ ‫ﻫﺎﯾﯽ‬Gulp‫ﯾﺎ‬ ‫و‬Grunt‫اﺳﺘﻔﺎده‬ ‫آن‬ ‫از‬
‫ﺑﻬﺮه‬ ‫ﺑﺎ‬ ‫ﻣﺎژول‬ ‫اﯾﻦ‬ .‫ﮐﺮد‬‫از‬ ‫ﮔﯿﺮي‬Phantom.js‫ﻣﯽ‬‫ﺑﺨﺶ‬ ‫ﺗﻮاﻧﺪ‬fold-the-above‫ﮐﺮد‬ ‫ﮐﭙﭽﺮ‬ ‫ﻃﺮﯾﻖ‬ ‫از‬ ‫را‬ ‫ﺻﻔﺤﻪ‬‫اﺑﻌﺎد‬ ‫ن‬
‫ﮐﻨﺪ‬ ‫ﺷﻨﺎﺳﺎﯾﯽ‬ ،‫ﻣﺮورﮔﺮ‬‫و‬Critical CSS.‫دﻫﺪ‬ ‫ﺗﺸﺨﯿﺺ‬ ‫را‬ ‫آن‬ ‫ﻫﺎي‬
‫ﻣﺘﺄﺳﻔﺎﻧﻪ‬‫ﭘﻼﮔﯿﻨ‬ ‫داراي‬ ‫ﭘﮑﯿﺞ‬ ‫اﯾﻦ‬‫ﯽ‬‫ﺑﺮاي‬Gulp‫ﺗﻮﺳﻌﻪ‬ ‫اﻣﺎ‬ ،‫ﻧﯿﺴﺖ‬،‫آن‬ ‫دﻫﻨﺪه‬‫آن‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫دﻣﻮي‬‫ﯾﮏ‬ ‫ﻗﺎﻟﺐ‬ ‫در‬ ‫را‬
workflow‫ﮔﯿﺘﻬﺎب‬ ‫در‬‫از‬ ‫اوﻟﯿﻪ‬ ‫ﮐﺪ‬ ‫ﻧﻤﻮﻧﻪ‬ ‫ﯾﮏ‬ ‫اﯾﻨﺠﺎ‬ ‫در‬ ‫ﻧﯿﺰ‬ ‫ﻣﺎ‬ .‫اﺳﺖ‬ ‫داده‬ ‫ﻗﺮار‬‫داده‬ ‫ﻗﺮار‬ ‫را‬ ‫آن‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺷﯿﻮه‬:‫اﯾﻢ‬
‫ﺗﺼﻮﯾﺮ‬5-‫ﭘﮑﯿﺞ‬ ‫از‬ ‫ﺷﺪه‬ ‫اﺳﺘﻔﺎده‬ ‫ﮐﺪ‬ ‫ﻧﻤﻮﻧﻪ‬Critical‫در‬Gulp
‫ﻣﯽ‬ ‫ﮐﻪ‬ ‫ﻫﻤﺎﻧﻄﻮر‬‫ﻣﯽ‬ ،‫ﺑﯿﻨﯿﺪ‬‫اﺳﺘﺎﯾﻞ‬ ‫ﻓﺎﯾﻞ‬ ،‫ﻣﺒﺪاء‬ ‫ﺻﻔﺤﻪ‬ ‫ﺗﻮان‬‫ﺑﻪ‬ ‫را‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺻﻔﺤﻪ‬ ‫ﺑﺮاي‬ ‫ﻧﻈﺮ‬ ‫ﻣﻮرد‬ ‫اﺑﻌﺎد‬ ‫و‬ ‫ﺷﺪه‬ ‫ﻧﻮﺷﺘﻪ‬
‫ورودي‬ ‫ﻋﻨﻮان‬‫ﮔﺮﻓﺖ‬ ‫ﺗﺤﻮﯾﻞ‬ ‫را‬ ‫ﻓﺎﯾﻠﯽ‬ ،‫ﻣﻘﺼﺪ‬ ‫ﺧﺮوﺟﯽ‬ ‫در‬ ‫و‬ ‫ﮐﺮد‬ ‫ﻣﺸﺨﺺ‬ ‫ﭘﮑﯿﺞ‬ ‫اﯾﻦ‬ ‫ﻫﺎي‬‫ﮐﻪ‬‫اﺳﺘﺎﯾﻞ‬‫ﺑﺮ‬ ‫آن‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬
‫اﺳﺘﺎﯾﻞ‬ ‫اﺻﻠﯽ‬ ‫ﻓﺎﯾﻞ‬ ‫و‬ ‫اﺳﺖ‬ ‫ﮔﺮﻓﺘﻪ‬ ‫ﻗﺮار‬ ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫اﯾﻨﻼﯾﻦ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ،‫ﺷﺪه‬ ‫ﺗﻌﯿﯿﻦ‬ ‫اﺑﻌﺎد‬ ‫و‬ ‫ﺷﺪه‬ ‫ﻧﻮﺷﺘﻪ‬ ‫ﮐﺪ‬ ‫اﺳﺎس‬‫ﺑﻪ‬ ‫ﻫﻢ‬ ‫ﺷﯿﺖ‬
‫ﺻﻮرت‬.‫ﺷﺪ‬ ‫ﺧﻮاﻫﺪ‬ ‫ﻟﻮد‬ ‫ﻧﺎﻫﻤﮕﺎم‬

7. 7
‫اﻣﮑﺎ‬ ‫اﯾﻦ‬‫اﺳﺘﺎﯾﻞ‬ ‫ﻓﺎﯾﻞ‬ ‫ﺗﻌﺪاد‬ ‫ﻫﺮ‬ ‫ﮐﻪ‬ ‫داﺷﺖ‬ ‫ﺧﻮاﻫﺪ‬ ‫وﺟﻮد‬ ‫ﺷﻤﺎ‬ ‫ﺑﺮاي‬ ‫ن‬‫ﺻﻔﺤﻪ‬ ‫ﯾﺎ‬ ‫و‬ ‫ﺷﯿﺖ‬‫اي‬‫ﭘﺮوژه‬ ‫در‬ ‫ﮐﻪ‬‫را‬ ‫اﺳﺖ‬ ‫ﻣﻮﺟﻮد‬ ‫ﺗﺎن‬
‫ﺑ‬‫ﭘﻼﮔﯿﻦ‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ .‫ﮐﻨﯿﺪ‬ ‫درﯾﺎﻓﺖ‬ ‫ﺧﺮوﺟﯽ‬ ‫در‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﺗﻌﺪاد‬ ‫ﻫﻤﺎن‬ ‫ﺑﻪ‬ ‫و‬ ‫ﮐﻨﯿﺪ‬ ‫ﻣﺸﺨﺺ‬ ‫ورودي‬ ‫ﻌﻨﻮان‬critical-grunt
‫را‬ ‫ﻓﻮق‬ ‫ﻣﺜﺎل‬ ‫دﯾﮕﺮي‬ ‫ﻧﺤﻮ‬ ‫ﺑﻪ‬‫ورودي‬ ‫ﺑﺎ‬:‫داد‬ ‫ﺧﻮاﻫﯿﻢ‬ ‫ﻧﺸﺎن‬ ‫ﺑﯿﺸﺘﺮي‬ ‫ﻫﺎي‬
‫ﺗﺼﻮﯾﺮ‬6-‫ﭘﻼﮔﯿﻦ‬ ‫از‬ ‫ﺷﺪه‬ ‫اﺳﺘﻔﺎده‬ ‫ﮐﺪ‬ ‫ﻧﻤﻮﻧﻪ‬critical-grunt‫در‬Grunt
‫ﻣﯽ‬ ‫ﺣﺘﯽ‬ ‫ﺷﻤﺎ‬‫و‬ ‫ﻋﻨﻮان‬ ‫ﺑﻪ‬ ‫را‬ ‫ﺧﻮد‬ ‫ﭘﺮوژه‬ ‫ﺳﻮرس‬ ‫ﭘﻮﺷﻪ‬ ‫ﮐﻞ‬ ‫ﺗﻮاﻧﯿﺪ‬‫ﺧﺮوﺟﯽ‬ ‫در‬ ‫و‬ ‫ﮐﺮده‬ ‫وارد‬ ‫ﺻﻔﺤﺎت‬ ‫رودي‬‫ﺗﻌﯿﯿﻦ‬ ‫ﺑﺎ‬ ،‫ﻣﻘﺼﺪ‬
‫ﻓﺎ‬ ‫ﺗﻤﺎم‬ ‫ﺧﺮوﺟﯽ‬‫ﯾﻞ‬‫در‬ ‫ﺷﺪه‬ ‫ﺣﺎﺻﻞ‬ ‫ﺗﻐﯿﯿﺮات‬ ‫ﺑﺎ‬ ‫را‬ ‫ﻫﺎ‬.‫ﮐﻨﯿﺪ‬ ‫ﯾﺎﻓﺖ‬
‫ﺧﻮدﮐﺎر‬ ‫اﺑﺰارﻫﺎي‬ ‫اﻟﺒﺘﻪ‬‫اﺑﺰار‬ ‫و‬ ‫ﻧﯿﺴﺖ‬ ‫ﺷﺪه‬ ‫ﮔﻔﺘﻪ‬ ‫آﻧﭽﻪ‬ ‫ﺑﻪ‬ ‫ﻣﺤﺪود‬ ‫ﻓﻘﻂ‬ ‫ﺳﺎزي‬‫ﻣﺎﻧﻨﺪ‬ ‫دﯾﮕﺮي‬ ‫ﻫﺎي‬riticalCSSc‫ﯾﺎ‬
Penthouse‫ﯾﺎ‬ ‫و‬criticalClass‫دار‬ ‫وﺟﻮد‬ ‫ﻧﯿﺰ‬‫ﻧ‬‫ﻣﯽ‬ ‫ﮐﻪ‬ ‫ﺪ‬‫ﻣﯽ‬ ‫دﻧﺒﺎل‬ ‫را‬ ‫ﯾﮑﺴﺎن‬ ‫اﻫﺪاﻓﯽ‬ ‫ﺣﺪودي‬ ‫ﺗﺎ‬ ‫ﮔﻔﺖ‬ ‫ﺗﻮان‬.‫ﮐﻨﻨﺪ‬

8. 8
‫را‬ ‫روش‬ ‫اﯾﻦ‬ ‫دﺳﺘﺎورد‬‫ﺗﺴﺖ‬ ‫در‬‫ﻣﯽ‬ ‫زﯾﺮ‬ ‫ﻫﺎي‬‫ﺗﻮاﻧﯿﺪ‬،‫ﮐﻨﯿﺪ‬ ‫ﻣﺸﺎﻫﺪه‬‫اﯾﻦ‬ ‫اﻋﻤﺎل‬ ‫از‬ ‫ﻗﺒﻞ‬ ‫ﺗﺴﺖ‬ ‫ﻧﺘﺎﯾﺞ‬ ‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫اول‬ ‫ﺗﺼﻮﯾﺮ‬ ‫ﮐﻪ‬
‫و‬ ‫اﺳﺖ‬ ‫ﺗﻐﯿﯿﺮات‬‫ﺗﻐﯿﯿﺮات‬ ‫اﻧﺠﺎم‬ ‫از‬ ‫ﺑﻌﺪ‬ ‫ﺗﺴﺖ‬ ‫ﻫﻤﺎن‬ ‫ﻧﺘﺎﯾﺞ‬ ‫ﺑﻌﺪي‬ ‫ﺗﺼﻮﯾﺮ‬‫آن‬ ‫اﻃﻼﻋﺎت‬ ‫و‬‫وب‬ ‫ﺻﻔﺤﻪ‬ ‫از‬ ‫ﻧﻤﺎﯾﺶ‬ ‫اوﻟﯿﻦ‬ ‫ﻗﺎﻟﺐ‬ ‫در‬
‫ﻧﻤﺎﯾﺶ‬ ‫و‬‫ﺻﻔﺤﻪ‬ ‫ﻫﻤﺎن‬ ‫ﺗﮑﺮاري‬ ‫ﻫﺎي‬‫اﺳﺖ‬ ‫روﯾﺖ‬ ‫ﻗﺎﺑﻞ‬:
‫ﺗﺼﻮﯾﺮ‬7-‫اﻋﻤﺎل‬ ‫از‬ ‫ﻗﺒﻞ‬Critical CSS
‫ﺗﺼﻮﯾﺮ‬8-‫اﻋﻤﺎل‬ ‫از‬ ‫ﺑﻌﺪ‬Critical CSS
‫ﻣﯽ‬ ‫ﮐﻪ‬ ‫ﻫﻤﺎﻧﻄﻮر‬‫ﺻﻔﺤﻪ‬ ‫از‬ ‫ﻧﻤﺎﯾﺶ‬ ‫اوﻟﯿﻦ‬ ‫در‬ ،‫ﺗﮑﻨﯿﮏ‬ ‫اﯾﻦ‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ ،‫ﺑﯿﻨﯿﺪ‬‫ﻧﺘﺎﯾﺠ‬‫ﯽ‬‫ﻣﺮاﺗﺐ‬ ‫ﺑﻪ‬‫ﺑﻬﺘﺮ‬‫ﻣﯽ‬‫آﻧﮑﻪ‬ ‫ﺣﺎل‬ ،‫ﮔﯿﺮﯾﻢ‬
‫ﻧﻤﺎﯾﺶ‬ ‫در‬‫ﻫﺮ‬ ‫اﻟﺒﺘﻪ‬ .‫ﺑﻮدﯾﻢ‬ ‫ﺳﻨﺘﯽ‬ ‫روش‬ ‫ﺑﻪ‬ ‫ﻧﺴﺒﺖ‬ ‫ﭘﺮﻓﻮرﻣﻨﺲ‬ ‫اﻓﺖ‬ ‫دﭼﺎر‬ ‫ﺻﻔﺤﻪ‬ ‫ﺗﮑﺮاري‬ ‫ﻫﺎي‬‫روش‬ ‫اﯾﻦ‬ ‫ﭼﻨﺪ‬‫ﻣﺰاﯾﺎﯾﯽ‬‫ﺧﻮد‬ ‫ﺑﺎ‬
‫ﻣﯽ‬ ‫ﻫﻤﺮاه‬ ‫ﺑﻪ‬‫اداﻣﻪ‬ ‫در‬ ‫و‬ ‫دارد‬ ‫ﻧﯿﺰ‬ ‫ﻣﻌﺎﯾﺒﯽ‬ ،‫آورد‬‫ﺑﻪ‬‫ﺑﻌﻀﯽ‬‫از‬‫ﻣﯽ‬ ‫دارد‬ ‫وﺟﻮد‬ ‫روش‬ ‫اﯾﻦ‬ ‫در‬ ‫ﮐﻪ‬ ‫ﻧﻘﺪﻫﺎﯾﯽ‬ ‫و‬ ‫ﻣﻌﺎﯾﺐ‬.‫ﭘﺮدازﯾﻢ‬
‫از‬ ‫اﺳﺘﻔﺎده‬‫ﺧﻮدﮐﺎر‬ ‫اﺑﺰارﻫﺎي‬‫ﻣﯽ‬ ‫ﺑﺎﻋﺚ‬ ‫ﺳﺎزي‬‫اﺳﺘﺎﯾﻞ‬ ‫ﺑﺎرﮔﺬاري‬ ‫در‬ ‫ﺷﻤﺎ‬ ‫ﺷﻮد‬‫دوﺑﺎره‬ ‫ﺑﻪ‬ ‫ﻣﺠﺒﻮر‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫ﻣﻀﺎﻋﻒ‬ ‫ﮐﺎري‬
‫اﺳﺘﺎﯾﻞ‬ ‫ﮐﻪ‬ ‫ﭼﺮا‬ .‫ﺷﻮﯾﺪ‬‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اي‬‫ﻓﺎﯾﻞ‬ ‫ﻗﺎﻟﺐ‬ ‫در‬ ‫آﺳﻨﮑﺮون‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫ﻫﻢ‬ ‫ﺑﺎز‬ ،‫ﺷﺪه‬ ‫ﻧﻮﺷﺘﻪ‬ ‫اﯾﻨﻼﯾﻦ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫ﮐﻪ‬CSS
.‫ﺷﺪ‬ ‫ﺧﻮاﻫﻨﺪ‬ ‫ﺑﺎرﮔﺬاري‬‫ﺑﻪ‬‫ﺧﻮدﮐﺎر‬ ‫اﺑﺰارﻫﺎي‬ ‫ﺗﺮﺗﯿﺐ‬ ‫ﻫﺮ‬‫و‬ ‫ﺗﺸﺨﯿﺺ‬ ‫ﺳﺎزي‬‫ﺑﺨﺶ‬ ‫ﻣﺠﺰاﺳﺎزي‬‫ﻏﯿﺮ‬ ‫از‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫در‬ ،‫ﺣﯿﺎﺗﯽ‬
‫ﻧﺮﺳﯿﺪه‬ ‫ﺗﮑﺎﻣﻞ‬ ‫و‬ ‫ﺑﻠﻮغ‬ ‫ﺑﻪ‬ ‫ﻫﻨﻮز‬ ‫و‬ ‫ﻫﺴﺘﻨﺪ‬ ‫ﺧﻮد‬ ‫ﺣﯿﺎت‬ ‫از‬ ‫اوﻟﯿﻪ‬ ‫ﻣﺮاﺣﻞ‬.‫اﻧﺪ‬
‫ﻃﺮف‬ ‫از‬‫ﻧﯿﺴﺘﻨ‬ ‫ﮐﻢ‬ ‫دﯾﮕﺮ‬‫ﺗﻮﺳﻌﻪ‬ ‫از‬ ‫دﺳﺘﻪ‬ ‫آن‬ ‫ﺪ‬‫دﻫﻨﺪ‬‫ه‬‫ﺑﺎ‬ ‫ﮐﻪ‬ ‫ﮔﺎﻧﯽ‬‫ﻣﻌﺘﻘﺪﻧﺪ‬ ‫و‬ ‫ﻣﺨﺎﻟﻔﻨﺪ‬ ‫روش‬ ‫اﯾﻦ‬ ‫ﻣﺎﻫﯿﺖ‬‫اﺳﺘ‬‫ﺎﯾﻞ‬‫ﻧﻮﯾﺴﯽ‬
‫زﻣﺎن‬ ‫ﺑﻪ‬ ‫ﺑﺮﮔﺸﺖ‬ ‫اﯾﻨﻼﯾﻦ‬‫وب‬ ‫ﺗﻮﺳﻌﻪ‬ ‫آﻏﺎزﯾﻦ‬ ‫ﻫﺎي‬‫اﺳﺖ‬‫ﻋﻘﺐ‬ ‫ﯾﮏ‬ ‫و‬‫ﻣﯽ‬ ‫ﻣﺤﺴﻮب‬ ‫ﮔﺮد‬‫آن‬ ‫اﻋﺘﻘﺎد‬ ‫از‬ ‫ﻧﻈﺮ‬ ‫ﺻﺮف‬ .‫ﺷﻮد‬‫اﯾﻦ‬ ،‫ﻫﺎ‬
‫ﺳﺮﯾﻊ‬ ‫ﻫﺮﭼﻪ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫و‬ ‫ﺷﺪن‬ ‫رﻧﺪر‬ ‫ﺗﺄﺧﯿﺮ‬ ‫ﮐﺎﻫﺶ‬ ‫در‬ ‫روش‬‫ﺑﺨﺶ‬ ‫ﺗﺮ‬‫واﻗ‬ ‫ﺑﻪ‬ ‫ﺻﻔﺤﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬.‫اﺳﺖ‬ ‫ﻣﺆﺛﺮ‬ ‫ﻊ‬
‫ﻋﺪه‬‫دﯾﮕﺮ‬ ‫اي‬‫ي‬‫اﻣﺎ‬‫وﻟﯽ‬ ،‫ﻫﺴﺘﻨﺪ‬ ‫ﻣﻮاﻓﻖ‬ ‫روش‬ ‫اﯾﻦ‬ ‫ﻣﺎﻫﯿﺖ‬ ‫ﺑﺎ‬ ‫ﮐﻪ‬ ‫ﻫﺮﭼﻨﺪ‬‫ﺑﺨﺶ‬ ‫ﮐﻪ‬ ‫ﻣﻌﺘﻘﺪﻧﺪ‬fold-the-aboveً‫ﺎ‬‫اﻟﺰاﻣ‬
‫ﺻﻔﺤﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﺑﺨﺶ‬‫ﻧﻤﯽ‬ ‫ﻣﺤﺴﻮب‬‫ﺷﻮد‬‫ﻣﯽ‬ ‫روﯾﮑﺮد‬ ‫اﯾﻦ‬ ‫و‬‫از‬ ‫ﻋﻨﺎﺻﺮي‬ ‫ﮐﻪ‬ ‫ﺑﺴﺎ‬ ‫ﭼﻪ‬ .‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬ ‫دﯾﮕﺮي‬ ‫ﻣﻌﻨﯽ‬ ً‫ﺎ‬‫اﺳﺎﺳ‬ ‫ﺗﻮاﻧﺪ‬
‫در‬ ،‫ﺑﺎﺷﻨﺪ‬ ‫داﺷﺘﻪ‬ ‫ﻗﺮار‬ ‫ﺻﻔﺤﻪ‬ ‫ﺑﺎﻻي‬ ‫ﺑﺨﺶ‬ ‫در‬ ‫ﺻﻔﺤﻪ‬‫ﺗﻮﺳﻌﻪ‬ ‫ﮐﻪ‬ ‫ﺣﺎﻟﯽ‬‫را‬ ‫ﻋﻨﺎﺻﺮ‬ ‫آن‬ ،‫دﻫﻨﺪه‬.‫ﻧﯿﺎورد‬ ‫ﺷﻤﺎر‬ ‫ﺑﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﭼﻨﺪان‬
‫ﺑﺨﺶ‬ ‫ﺗﺸﺨﯿﺺ‬ ‫و‬ ‫ﺗﻌﺮﯾﻒ‬ ‫در‬ ‫ﭘﺲ‬‫ﻧﻈﺮ‬ ‫اﺧﺘﻼف‬ ‫ﻧﯿﺰ‬ ‫ﺻﻔﺤﻪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫ﻫﺎﯾﯽ‬.‫دارد‬ ‫وﺟﻮد‬‫اﯾﻨﮑﻪ‬‫ﺗﻮﺳﻌﻪ‬‫ﺑﺎ‬ ‫ﺑﺘﻮاﻧﺪ‬ ‫دﻫﻨﺪه‬‫اراده‬
‫ﺑﺨﺶ‬ ‫ﺧﻮد‬‫ﻏﯿﺮ‬ ‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اﯾﺪه‬ ،‫ﮐﻨﺪ‬ ‫ﻣﺠﺰا‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫ﯾﮏ‬ ‫ﺣﯿﺎﺗﯽ‬.‫اﺳﺖ‬ ‫زﯾﺒﺎﯾﯽ‬ ‫ي‬‫روزﻫﺎ‬ ‫اﯾﻦ‬ ‫ﮐﻪ‬ ‫ﭼﺮا‬‫ﺗﺮﺟﯿﺢ‬‫اﺳﺖ‬ ‫اﯾﻦ‬ ‫ﺑﺮ‬
‫ﮐﺎﻣﭙﻮﻧﻨﺖ‬ ‫ﺑﺴﺎ‬ ‫ﭼﻪ‬ ‫و‬ ‫ﺑﺎﺷﺪ‬ ‫ﻣﺤﻮر‬ ‫ﮐﺎﻣﭙﻮﻧﻨﺖ‬ ،‫ﺗﻮﺳﻌﻪ‬ ‫ﮐﻪ‬‫ﺗﻮﺳﻌﻪ‬ ‫ﻧﻈﺮ‬ ‫از‬ ‫ﻫﺎﯾﯽ‬‫روﻧﺪ‬ ‫در‬ ‫ﺑﺘﻮاﻧﯿﻢ‬ ‫ﻣﺎ‬ ‫اﮔﺮ‬ .‫ﺷﻮﻧﺪ‬ ‫ﺗﻠﻘﯽ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫دﻫﻨﺪه‬
‫اﺳﺘﺎﯾﻞ‬ ‫ﮐﺪﻧﻮﯾﺴﯽ‬‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ ‫ﻫﺎ‬‫ﻗﺎﺑﻠﯿﺖ‬‫ﻫﺎي‬‫ﺑﺨﺶ‬ ،‫ﺷﺮﻃﯽ‬‫ﻣﯽ‬ ،‫ﮐﻨﯿﻢ‬ ‫ﺟﺪا‬ ‫را‬ ‫ﻏﯿﺮﺣﯿﺎﺗﯽ‬ ‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اﻧﻌﻄﺎف‬ ‫ﺑﺎ‬ ‫ﺗﻮاﻧﯿﻢ‬
‫اﺳﺘﺎﯾﻞ‬ ‫ﺗﻮﻟﯿﺪ‬ ‫ﺑﻪ‬ ‫ﺑﯿﺸﺘﺮي‬‫ﺷﯿﺖ‬.‫ﺑﭙﺮدازﯾﻢ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اﺳﺘﺎﯾﻞ‬ ‫اﯾﻦ‬ ‫ﺟﺪاﺳﺎزي‬ ‫ﺑﻪ‬ ‫ﻣﻮﻓﻖ‬ ‫اﮔﺮ‬ ،‫دﯾﮕﺮ‬ ‫ﺳﻮي‬ ‫از‬‫ﺷﯿﺖ‬‫ﻫﺎ‬‫ﯾﮑﺪﯾﮕﺮ‬ ‫از‬
‫ﻣﯽ‬ ،‫ﺷﻮﯾﻢ‬‫اﺳﺘﺎﯾﻞ‬ ‫ﻣﺠﺪد‬ ‫ﺑﺎرﮔﺬاري‬ ‫ﻣﺎﻧﻊ‬ ‫ﺗﻮان‬‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اﺳﺘﺎﯾﻞ‬ ‫ﺑﺎرﮔﺬاري‬ ‫زﻣﺎن‬ ‫در‬‫ﻏﯿﺮ‬ ‫ﻫﺎي‬‫ﺗﺮﺗﯿﺐ‬ ‫ﺑﺪﯾﻦ‬ .‫ﺷﺪ‬ ‫ﺣﯿﺎﺗﯽ‬،‫ﺳﺮﺑﺎر‬
.‫ﺑﻮد‬ ‫ﺧﻮاﻫﯿﻢ‬ ‫ﺷﺎﻫﺪ‬ ‫را‬ ‫ﮐﻤﺘﺮي‬
‫ﭘﯿﺶ‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬‫ﭘﺮدازﻧﺪه‬‫ﻫﺎي‬CSS‫ﻣﯽ‬‫از‬ ‫ﯾﮑﯽ‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ ،‫ﻣﺜﺎل‬ ‫ﻋﻨﻮان‬ ‫ﺑﻪ‬ .‫رﺳﯿﺪ‬ ‫ﻣﺜﺒﺘﯽ‬ ‫ﻧﺘﺎﯾﺞ‬ ‫ﺑﻪ‬ ‫زﻣﯿﻨﻪ‬ ‫اﯾﻦ‬ ‫در‬ ‫ﺗﻮان‬
‫ﭘﻼﮔﯿﻦ‬‫ﻫﺎي‬Sass‫ﻧﺎم‬ ‫ﺑﻪ‬Jacket‫ﻣﯽ‬.‫رﺳﯿﺪ‬ ‫دﺳﺘﺎورد‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬ ‫ﺗﻮان‬

9. 9
‫ﺑﺨﺶ‬ ‫ﮐﻪ‬ ‫ﻣﺸﺘﺮك‬ ‫ﻓﺎﯾﻞ‬ ‫ﯾﮏ‬ ‫از‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﺻﻮرت‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬ ‫ﮐﺎر‬ ‫روش‬‫ﮐﺪﻧﻮﯾﺴﯽ‬ ‫ﻫﺎي‬‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻋﻨﺎﺻﺮ‬‫ﻏﯿﺮ‬‫آن‬ ‫در‬ ‫ﺣﯿﺎﺗﯽ‬
‫ﻣﯽ‬ ‫ﺧﻮد‬ ‫ﮐﺎرﺑﺮي‬ ‫راﺑﻂ‬ ‫ﺗﻮﺳﻌﻪ‬ ‫ﺑﻪ‬ ‫و‬ ‫ﮐﺮده‬ ‫اﺳﺘﻔﺎده‬ ‫اﺳﺖ‬ ‫ﺷﺪه‬ ‫ﻣﺠﺰا‬.‫ﭘﺮدازﯾﻢ‬
‫ﺗﺼﻮﯾﺮ‬9-‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ ‫ﻏﯿﺮﺣﯿﺎﺗﯽ‬ ‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫ﺟﺪاﺳﺎزي‬ ‫ﻧﺤﻮه‬Jacket‫در‬Sass
‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫ﻓﺎﯾﻞ‬ ‫در‬ ‫ﯾﮑﺒﺎر‬ ‫را‬ ‫ﻣﺸﺘﺮك‬ ‫ﻓﺎﯾﻞ‬ ‫اﯾﻦ‬ ‫ﺳﭙﺲ‬‫ﻏﯿﺮ‬ ‫ﮐﺪﻫﺎي‬ ‫ﻓﺎﯾﻞ‬ ‫در‬ ‫دﯾﮕﺮ‬ ‫ﯾﮑﺒﺎر‬ ‫و‬‫ﻣﯽ‬ ‫وارد‬ ‫ﺣﯿﺎﺗﯽ‬‫اﻟﺒﺘﻪ‬ ،‫ﮐﻨﯿﻢ‬
‫ﻣﺎﻧﻨﺪ‬ ‫ﻋﻨﻮاﻧﯽ‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ ‫را‬ ‫ﻧﻈﺮ‬ ‫ﻣﻮرد‬ ‫ﻣﺸﺨﺼﻪ‬ ‫ﻣﻘﺪار‬ ،‫ﻓﺎﯾﻞ‬ ‫اﯾﻦ‬ ‫ﮐﺮدن‬ ‫وارد‬ ‫از‬ ‫ﻗﺒﻞ‬ ‫ﮐﻪ‬ ‫ﺗﻔﺎوت‬ ‫اﯾﻦ‬ ‫ﺑﺎ‬critical‫و‬
critical-none‫ﻣﻘﺪار‬‫ﻣﯽ‬ ‫دﻫﯽ‬.‫ﮐﻨﯿﻢ‬
‫ﺗﺼﻮﯾﺮ‬10-‫در‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫ﻓﺮاﺧﻮاﻧﯽ‬ ‫ﻧﺤﻮه‬Sass
‫ﺗﺼﻮﯾﺮ‬11-‫در‬ ‫ﻏﯿﺮﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫ﻓﺮاﺧﻮاﻧﯽ‬ ‫ﻧﺤﻮه‬Sass

10. 10
‫ﻣﻘﺪار‬ ‫ﺑﻪ‬ ‫ﺑﺴﺘﻪ‬ ‫ﺗﺮﺗﯿﺐ‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬‫ﻣﺸﺨ‬ ‫دﻫﯽ‬‫ﺼﻪ‬‫ﻏﯿﺮ‬ ‫و‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ،‫ﻧﻈﺮ‬ ‫ﻣﻮرد‬‫ﺣﯿﺎﺗﯽ‬‫را‬‫ﮐﺎﻣﭙﺎﯾﻞ‬ ‫از‬ ‫ﺑﻌﺪ‬Sass‫ﺑﻪ‬CSS‫در‬
‫ﺗﻮ‬ ‫ﮐﺎر‬ ‫اﯾﻦ‬ ‫ﺣﺎﺻﻞ‬ .‫دارﯾﻢ‬ ‫اﺧﺘﯿﺎر‬‫ﮐﺎﻣﭙﻮﻧﻨﺖ‬ ‫ﺟﺪاﺳﺎزي‬ ‫روﯾﮑﺮد‬ ‫ﺑﺎ‬ ‫ﻣﺤﻮر‬ ‫ﮐﺎﻣﭙﻮﻧﻨﺖ‬ ‫ﺳﻌﻪ‬‫ﻏﯿﺮ‬ ‫از‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫اﻟﺒﺘﻪ‬ ‫و‬ ‫اﺳﺖ‬ ‫ﺣﯿﺎﺗﯽ‬
‫ﮐﺪﻫﺎي‬ ‫ﮐﻪ‬ ‫ﺑﻮد‬ ‫ﺧﻮاﻫﯿﻢ‬ ‫ﻣﻄﻤﺌﻦ‬‫ﮐﺪ‬ ‫در‬ ،‫ﻣﺎ‬ ‫ﺣﯿﺎﺗﯽ‬‫ﻏﯿﺮ‬ ‫ﻫﺎي‬.‫ﺷﺪ‬ ‫ﻧﺨﻮاﻫﺪ‬ ‫ﺗﮑﺮار‬ ‫ﺣﯿﺎﺗﯽ‬
‫اﺳﺘﺎﯾﻞ‬ ‫ﮐﺪﻫﺎي‬ ‫از‬ ‫دﺳﺘﻪ‬ ‫آن‬ ،‫دﯾﮕﺮ‬ ‫ﻃﺮف‬ ‫از‬‫را‬ ‫ﺷﺪن‬ ‫ﮐﺶ‬ ‫ﻗﺎﺑﻠﯿﺖ‬ ،‫دارﻧﺪ‬ ‫ﻗﺮار‬ ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫اﯾﻨﻼﯾﻦ‬ ‫ﺻﻮرت‬ ‫ﺑﻪ‬ ‫ﮐﻪ‬ ‫ﺷﯿﺖ‬
‫اﺳﺘﺎﯾﻞ‬ ‫ﺑﻨﺎﺑﺮاﯾﻦ‬ .‫ﻧﺪارﻧﺪ‬‫ﻣﯽ‬ ‫داﻧﻠﻮد‬ ‫ﻫﻢ‬ ‫ﺑﺎز‬ ،‫ﺻﻔﺤﻪ‬ ‫ﻣﺠﺪد‬ ‫ﻧﻤﺎﯾﺶ‬ ‫در‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﻫﺎي‬‫ﻣﯽ‬ ‫ﺑﺎﻋﺚ‬ ‫اﯾﻦ‬ ‫و‬ ‫ﺷﻮﻧﺪ‬‫روش‬ ‫ﺑﻪ‬ ‫ﻧﺴﺒﺖ‬ ‫ﺷﻮد‬
‫ﮐ‬ ‫ﺳﻨﺘﯽ‬‫اﺳﺘﺎﯾﻞ‬ ‫ﻓﺎﯾﻞ‬ ‫ﺗﻤﺎم‬ ‫ﻪ‬‫ﻣﯽ‬ ‫ﮐﺶ‬ ‫ﺷﯿﺖ‬‫ﺷ‬‫ﺪﻧﺪ‬‫ﻣﯽ‬ ‫ﻫﺮﭼﻨﺪ‬ .‫ﺑﺎﺷﯿﻢ‬ ‫ﭘﺮﻓﻮرﻣﻨﺲ‬ ‫ﮐﺎﻫﺶ‬ ‫ﺷﺎﻫﺪ‬ ،‫ﮐﺶ‬ ‫ﻫﻢ‬ ‫را‬ ‫وب‬ ‫ﺻﻔﺤﻪ‬ ‫ﺗﻮان‬
‫ﻣﯽ‬ ‫ﺳﻮال‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬ ‫ﭘﺲ‬ .‫ﻧﯿﺴﺖ‬ ‫داﯾﻨﺎﻣﯿﮏ‬ ‫ﺻﻔﺤﺎت‬ ‫ﺑﺮاي‬ ‫ﻣﻌﻘﻮﻟﯽ‬ ‫ﺣﻞ‬ ‫راه‬ ‫اﯾﻦ‬ ‫اﻣﺎ‬ ،‫ﮐﺮد‬‫ﯾﺎ‬ ‫اﺳﺖ‬ ‫ﻣﻔﯿﺪ‬ ‫روش‬ ‫اﯾﻦ‬ ‫آﯾﺎ‬ ‫ﮐﻪ‬ ‫رﺳﯿﻢ‬
‫ﺑﺴ‬ ‫روش‬ ‫اﯾﻦ‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫اﻧﺘﺨﺎب‬ .‫دارد‬ ‫ﺑﺴﺘﮕﯽ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫اﯾﻦ‬ ‫ﺟﻮاب‬ ‫ﺧﯿﺮ؟‬‫ﭘﺮوژه‬ ‫ﻣﺎﻫﯿﺖ‬ ‫ﺑﻪ‬ ‫ﺘﻪ‬‫از‬ .‫ﺷﻮد‬ ‫ﭘﯿﺎده‬ ‫ﺑﺎﯾﺪ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫اي‬
‫ﺳﺮﯾﻊ‬ ‫در‬ ‫ﮐﻪ‬ ‫ﺑﺎﺷﻨﺪ‬ ‫ﮐﺪﻫﺎﯾﯽ‬ ‫از‬ ‫دﺳﺘﻪ‬ ‫آن‬ ً‫ﺎ‬‫واﻗﻌ‬ ‫ﺑﺎﯾﺪ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫ﮐﺪﻫﺎي‬ ‫اﯾﻨﮑﻪ‬ ‫ﺑﺮ‬ ‫ﻣﺒﻨﯽ‬ ‫دارد‬ ‫وﺟﻮد‬ ‫ﻓﺮاوان‬ ‫ﺗﺄﮐﯿﯿﺪ‬ ،‫دﯾﮕﺮ‬ ‫ﻃﺮف‬‫ﺗﺮﯾﻦ‬
‫آن‬ ‫ﺑﻪ‬ ‫ﻣﻤﮑﻦ‬ ‫زﻣﺎن‬‫آن‬ ‫دﻟﯿﻞ‬ ‫ﻫﻤﯿﻦ‬ ‫ﺑﻪ‬ .‫دارﯾﻢ‬ ‫ﻧﯿﺎز‬ ‫ﻫﺎ‬‫ﻣﯽ‬ ‫ﺣﯿﺎﺗﯽ‬ ‫را‬ ‫ﻫﺎ‬‫داﺷﺘﻪ‬ ‫ﮐﻤﯽ‬ ‫ﺣﺠﻢ‬ ‫ﺑﺎﯾﺪ‬ ‫ﺑﻨﺎﺑﺮاﯾﻦ‬ .‫ﻧﺎﻣﯿﻢ‬‫ﺳﺮﺑﺎر‬ ‫ﺗﺎ‬ ‫ﺑﺎﺷﻨﺪ‬
‫آن‬ ‫ﻣﺠﺪد‬ ‫داﻧﻠﻮد‬ ‫از‬ ‫ﺣﺎﺻﻞ‬‫ﻣﺰﯾﺖ‬ ‫از‬ ‫ﮐﻪ‬ ‫ﻧﺒﺎﺷﺪ‬ ‫ﺣﺪي‬ ‫ﺑﻪ‬ ،‫ﻣﮑﺮر‬ ‫ﺑﺎزدﯾﺪﻫﺎي‬ ‫در‬ ‫ﻫﺎ‬‫ﻻزم‬ .‫ﮐﻨﯿﻢ‬ ‫ﮔﺬر‬ ‫راﺣﺘﯽ‬ ‫ﺑﻪ‬ ‫روش‬ ‫اﯾﻦ‬ ‫ﻫﺎي‬‫ﺑﻪ‬
‫اﺳﺘﺎﯾﻞ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ذﮐﺮ‬‫ﻏﯿﺮ‬ ‫ﻫﺎي‬.‫دارﻧﺪ‬ ‫را‬ ‫ﺷﺪن‬ ‫ﮐﺶ‬ ‫ﻗﺎﺑﻠﯿﺖ‬ ‫ﻫﻤﻮاره‬ ‫ﺣﯿﺎﺗﯽ‬
‫در‬ ‫ﻟﻤﺲ‬ ‫ﻗﺎﺑﻞ‬ ‫ﺗﺄﺛﯿﺮي‬ ‫ﻫﺮﭼﻨﺪ‬ ،‫ﭘﺮداﺧﺘﯿﻢ‬ ‫آن‬ ‫ﺗﺸﺮﯾﺢ‬ ‫ﺑﻪ‬ ‫ﻣﻘﺎﻟﻪ‬ ‫اﯾﻦ‬ ‫در‬ ‫ﮐﻪ‬ ‫روﯾﮑﺮدي‬‫دﻟﯿﻞ‬ ‫ﺑﻪ‬ ‫اﻣﺎ‬ ،‫دارد‬ ‫ﺷﺪه‬ ‫ﮔﺮﻓﺘﻪ‬ ‫ﻧﺘﺎﯾﺞ‬
‫ﻋﺪه‬ ،‫رو‬ ‫اﯾﻦ‬ ‫از‬ .‫دارد‬ ‫ﻫﻤﺮاه‬ ‫ﺑﻪ‬ ‫ﺧﻮد‬ ‫ﺑﺎ‬ ‫ﻧﯿﺰ‬ ‫ﻣﺨﺎﻟﻔﺎﻧﯽ‬ ،‫دارد‬ ‫ﮐﻪ‬ ‫ﻣﺘﻔﺎوﺗﯽ‬ ‫ﺗﻮﺳﻌﻪ‬ ‫ﺷﯿﻮه‬‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﺑﻬﺘﺮ‬ ‫ﮐﻪ‬ ‫ﻣﻌﺘﻘﺪﻧﺪ‬ ‫اي‬
‫ﭘﺮوﺗﮑﻞ‬ ‫دوم‬ ‫ﻧﺴﺨﻪ‬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. 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