بهینه سازی CSS و جاوااسکریپت

قبل از هر بهینه سازی، وزن واقعی را بگیرید

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

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

curl -s https://example.com/ \
  | grep -oE 'src="[^"]+\.js[^"]*"' | cut -d'"' -f2 | sort -u \
  | while read u; do printf '%8s  %s\n' \
      "$(curl -s -o /dev/null -H 'Accept-Encoding: gzip' -w '%{size_download}' "$u")" "$u"; done

یک تله در همین دستور هست که خودمان خوردیم: اگر آدرسی در HTML علامت & داشته باشد، به شکل & نوشته می شود و آن خط صفر بایت گزارش می دهد. صفر یعنی اندازه گیری نشد، نه اینکه فایل سبک است. آن یک خط را دستی درست کنید یا نادیده بگیرید.

خروجی این دستور روی یکی از صفحه های خود ما، مرتب شده از سنگین به سبک، این بود: ۱۷۱.۱ کیلوبایت برای فایل تحلیلی گوگل، ۲۹.۹ کیلوبایت برای جی کوئری، ۵.۹ کیلوبایت برای اسکریپت اصلی خودمان، ۱.۹ کیلوبایت برای ماشین حساب قیمت و کمتر از یک کیلوبایت برای اسکریپت کپچا. اسکریپت کپچای کلادفلر روی دامنه خودشان است و از خط فرمان اندازه اش صفر برگشت، پس آن را در حساب نیاوردیم و همین جا می گوییم که اندازه اش را نمی دانیم.

حالا جمع بزنید. آنچه ما نوشته ایم ۷.۸ کیلوبایت است و آنچه ننوشته ایم ۲۰۱.۵ کیلوبایت. یعنی ۹۶.۳ درصد وزن جاوااسکریپتی که آن صفحه می فرستد، کد کسی دیگر است. هیچ مقدار کوچک سازی این نسبت را جابه جا نمی کند.

کوچک سازی چقدر کم می کند؟ عدد را بعد از فشرده سازی بخوانید

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

شیت اصلی همین سایت را در دو حالت اندازه گرفتیم، یک بار خام و یک بار فشرده شده با gzip، همان طور که واقعا فرستاده می شود. نسخه اصلی ۱۲۹.۰ کیلوبایت است و فشرده شده اش ۳۲.۳ کیلوبایت. نسخه کوچک شده ۷۹.۱ کیلوبایت است و فشرده شده اش ۱۶.۳ کیلوبایت.

حالا دو صرفه جویی متفاوت را کنار هم بگذارید. روی کاغذ، کوچک سازی ۴۹.۹ کیلوبایت کم کرده، یعنی نزدیک ۳۹ درصد، و همین عدد است که در گزارش ابزار به شما نشان داده می شود. روی سیم، همان کار ۱۶.۰ کیلوبایت کم کرده. هر دو عدد درست اند و فقط دومی روی سرعت اثر دارد.

پس چرا اصلا مهم است؟ چون اگر عدد کاغذی را ملاک بگیرید، تصمیم های بعدی تان را اشتباه اولویت بندی می کنید. یک بهینه سازی که روی کاغذ ۴۰ درصد صرفه جویی نشان می دهد ممکن است روی سیم چند کیلوبایت باشد، در حالی که حذف یک اسکریپت کوچک ولی فشرده نشدنی می تواند چند برابرش ارزش داشته باشد. عدد بعد از فشرده سازی، تنها عددی است که بازدیدکننده حس می کند.

یک نکته که کمتر گفته می شود: بخش بزرگی از سود کوچک سازی روی این سایت از حذف توضیح های داخل فایل می آید. فایل اصلی ما توضیح های فارسی مفصلی دارد که برای آدم نوشته شده اند؛ gzip آنها را خوب فشرده می کند ولی حذفشان نمی کند. اگر فایل شما توضیح ندارد، فاصله فشرده و کوچک شده کمتر خواهد بود و این عادی است.

defer یا async؛ کدام و کجا

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

با defer مرورگر فایل را همان لحظه شروع به دانلود می کند ولی اجرایش را تا پایان ساخت صفحه نگه می دارد، و چند اسکریپت با این صفت به همان ترتیبی اجرا می شوند که در صفحه آمده اند. با async هم دانلود فورا شروع می شود ولی اجرا به محض آماده شدن فایل انجام می شود، هر جای کار که باشد، و ترتیب هیچ تضمینی ندارد.

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

حالا چیزی که در آموزش ها کم گفته می شود و در عمل بیشتر اهمیت دارد: جای اسکریپت در سند. اگر همه اسکریپت ها ته بدنه باشند، اسکریپت بدون صفت هم عملا چیز زیادی را مسدود نمی کند، چون تا آنجا کل صفحه ساخته شده. روی صفحه اول همین سایت، اولین اسکریپت در ۹۶.۶ درصد سند قرار دارد و در بخش head هیچ اسکریپت بیرونی نیست. سه اسکریپت آنجا هنوز بدون صفت اند و ما درستش نکرده ایم، چون افزونه ای که آنها را می گذارد جای ما تصمیم می گیرد.

و همین جا یک هشدار که بیشتر از هر چیز دیگری در این کار سایت می شکند: defer زدن به همه چیز به صورت گروهی. افزونه هایی هستند که این کار را با یک کلید انجام می دهند، و روی سایتی که کدش به ترتیب اجرا وابسته است، نتیجه اش صفحه ای است که تصادفی کار می کند. یکی یکی، و بعد از هر تغییر یک بار امتحان کنید.

CSS بحرانی و درون خطی کردن؛ بردی که بها دارد

هر شیت بیرونی یک منبع مسدودکننده رندر است: مرورگر تا نگیردش چیزی نمی کشد. راه حل رایج CSS بحرانی است، یعنی همان تکه ای که برای نمای اول لازم است داخل خود صفحه نوشته شود و بقیه بعدا بیاید. ما یک قدم جلوتر رفته ایم و کل شیت را درون خطی می کنیم؛ روی صفحه اول این سایت هیچ تگ link rel=stylesheet وجود ندارد و همه CSS داخل چهار بلوک استایل در سر سند است.

این تصمیم برد دارد و بهایش را هم می دهیم، و چون کمتر کسی بهایش را می نویسد، عددش را اینجا می گذاریم. همان HTML را برداشتیم، بلوک استایل اصلی را با یک لینک بیرونی عوض کردیم و هر دو نسخه را فشرده کردیم. نسخه ای که واقعا فرستاده می شود ۴۱.۸ کیلوبایت است و نسخه با شیت بیرونی ۲۶.۰ کیلوبایت. یعنی درون خطی کردن ۱۵.۸ کیلوبایت به هر پاسخ HTML اضافه می کند، برای هر بازدید، هر بار.

سر به سر شدن حساب ساده ای دارد. بازدیدکننده ای که یک صفحه می بیند و می رود چیزی اضافه نمی دهد، چون آن CSS را در هر حالت باید می گرفت. بازدیدکننده ای که پنج صفحه می بیند، چهار بار همان ۱۵.۸ کیلوبایت را دوباره می گیرد، در حالی که با شیت بیرونی یک بار می گرفت و بقیه از کش مرورگر می آمد. پس این انتخاب به شکل ترافیک شما بستگی دارد و نه به یک قاعده عمومی: برای سایتی که بیشتر بازدیدش از جستجو می آید و تک صفحه ای است، درون خطی می برد.

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

و یک هشدار درباره ابزارهای CSS بحرانی: خروجی شان را باید دید. این ابزارها تصمیم می گیرند کدام قاعده ها برای نمای اول لازم اند و روی صفحه هایی که چیدمانشان با بقیه فرق دارد اشتباه می کنند. نتیجه اش صفحه ای است که یک لحظه بی قالب دیده می شود، و این از یک شیت مسدودکننده بدتر است.

کدی که خودتان ننوشته اید

اینجا جایی است که این درس موضع می گیرد، و علیه خودمان: هر کاری که در چهار بخش بالا گفتیم روی کدی که خودتان نوشته اید انجام می شود، و روی سایت متوسط، کدی که خودتان نوشته اید اقلیت است.

روی همان صفحه ما، جی کوئری ۲۹.۹ کیلوبایت است. ما یک خط از آن را استفاده نمی کنیم و یک خط از آن را هم ننوشته ایم؛ افزونه امنیتی که کپچا را می گذارد به آن نیاز دارد و وردپرس آن را می فرستد. فایل تحلیلی ۱۷۱.۱ کیلوبایت است و آن هم مال گوگل است، فقط روی سرور خودمان میزبانی می شود. جمع این دو تا با اسکریپت کپچا ۲۰۱.۵ کیلوبایت می شود، در برابر ۷.۸ کیلوبایت کد خودمان.

حالا حرف اصلی: هیچ کدام از این دو را نمی شود با بهینه سازی حل کرد. جی کوئری قبلا کوچک شده و فشرده می شود. فایل تحلیلی هم همین طور. هر دو با async یا defer از سر راه رندر کنار می روند و همچنان همان تعداد بایت را از اینترنت بازدیدکننده می گیرند و همان مقدار پردازنده گوشی اش را مصرف می کنند. تنها تصمیمی که این عددها را عوض می کند این است که آیا آن قابلیت را می خواهید یا نه.

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

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