مسیر یادگیری

افزایش سرعت سایت

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

  • ۱۰ درس
  • رایگان، بدون ثبت نام

آن یک نمره، و شش چیزی که زیرش هستند

نمره ای که همه نگاه می کنند

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

سطح آب: اینجاست که خواندن گزارش تمام می شود و کار شروع
  • پاسخ سرور

    تا اولین بایت نرسد، مرورگر هیچ کاری برای شروع ندارد. اینجا کش و هاست تصمیم می گیرند، نه قالب.

  • مسیر رندر

    چه چیزی جلوی اولین رنگ آمیزی را می گیرد و چه چیزی نمی گیرد. کوتاه ترین درس این مسیر و پرکاربردترینش.

  • وزن تصویر

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

  • جاوااسکریپت شخص ثالث

    چت، آمارگیر، پیکسل تبلیغات. کدی که خودتان ننوشته اید و معمولا کسی هم مسئولش نیست.

  • فونت فارسی

    مسئله ای که سایت فارسی دارد و سایت انگلیسی ندارد. یک درس کامل از این مسیر مال همین است.

  • لایه های کش

    عمیق ترین لایه، چون بیشتر از یکی است و وقتی خراب شود شبیه خرابی چیز دیگری به نظر می رسد.

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

مسیر، قدم به قدم

درس ها به ترتیبی چیده شده اند که هر کدام روی قبلی می ایستد. از هر جایی هم می شود وارد شد.

  1. ۱چرا سرعت سایت مهم استسرعت سایت مهم است، ولی نه به آن دلیلی که معمولا فروخته می شود: اثرش روی رتبه گوگل کوچک و مشروط است و اثرش روی کسی که پشت صفحه منتظر مانده بزرگ و فوری. این درس مرز این دو را با سند خود گوگل و اندازه گیری خودمان مشخص می کند.مقدماتی
  2. ۲مرورگر چگونه صفحه را می سازدمرورگر HTML را از اولین بایت می خواند و همزمان درخت صفحه را می سازد، ولی تا وقتی CSS را نفهمیده باشد چیزی روی صفحه نمی کشد، و اگر به یک اسکریپت معمولی برسد همان جا می ایستد. هر توصیه ای درباره سرعت که در ادامه این مسیر می شنوید، از همین دو جمله بیرون می آید.مقدماتی
  3. ۳آشنایی عمیق با Core Web VitalsCore Web Vitals سه عدد است که سه چیز کاملا متفاوت را می سنجند: LCP سرعت دیده شدن بزرگ ترین عنصر صفحه، INP سرعت پاسخ به کلیک و لمس کاربر، و CLS مقدار جابه جایی ناخواسته چیدمان. گوگل هر سه را نه از تست شما، بلکه از صدک ۷۵ بازدیدکننده های واقعی و به تفکیک موبایل و دسکتاپ قضاوت می کند.میانی
  4. ۴آموزش اندازه گیری سرعت سایتاندازه گیری سرعت سایت یعنی یک گزارش آزمایشگاهی گرفتن، آن را کنار داده کاربران واقعی گذاشتن، و از دل هر دو یک کار انتخاب کردن. سخت ترین بخشش نه گرفتن گزارش است و نه فهمیدن اعداد، بلکه مقاومت در برابر وسوسه درست کردن هر چیزی که ابزار قرمز کرده.مقدماتی
  5. ۵بهینه سازی تصاویر برای وببهینه سازی تصویر سه کار است و به همین ترتیب اهمیت دارد: کوچک کردن به همان اندازه ای که واقعا نمایش داده می شود، فرستادن در فرمت مدرن، و اعلام صریح ابعاد در HTML. تصویری که به درد نمی خورد اما، بهتر است اصلا فرستاده نشود؛ همین اول از همه است.مقدماتی
  6. ۶کش چیست و انواع آنکش یعنی نگه داشتن نتیجه یک کار، تا دفعه بعد همان کار دوباره انجام نشود. روی همین سایت، همان صفحه با تقریبا همان تعداد بایت، از کش ۲۳.۵ میلی ثانیه و بدون کش ۱۵۵.۵ میلی ثانیه طول می کشد تا اولین بایتش برسد.مقدماتی
  7. ۷بهینه سازی CSS و جاوااسکریپتبهینه سازی CSS و جاوااسکریپت سه کار است و به همین ترتیب هم ارزش دارند: حذف کردن آنچه لازم نیست، دیرتر فرستادن آنچه فورا لازم نیست، و کوچک کردن آنچه می ماند. روی همین سایت، کوچک سازی شیت اصلی ۱۶.۳ کیلوبایت روی سیم صرفه جویی کرد و یک فایل تحلیلی که خودمان ننوشته ایم ۱۷۱.۱ کیلوبایت می گیرد.میانی
  8. ۸فونت فارسی و سرعت سایتقلم فارسی از قلم لاتین معادلش سنگین تر است، ولی بزرگ ترین صرفه جویی از سبک کردن فایل نمی آید؛ از نفرستادن فایل هایی می آید که لازم نیستند. این سایت پنج وزن در استایلش می نویسد و فقط سه فایل قلم می فرستد، جمعا ۷۴.۶ کیلوبایت.میانی
کرنومتر سیاه غول پیکر با چهار دروازه نورانی قرمز، سبز، آبی و سفید و یک رد نور که دور آن می دود

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

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

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

سوال هایی که واقعا پرسیده می شوند

برای شروع این مسیر باید برنامه نویسی بلد باشم؟

برای شش درس اول نه. آنها درباره فهمیدن اند و با یک مرورگر و سایت خودتان پیش می روند. دو درس بهینه سازی کد و وردپرس فرض می کنند که به تنظیمات سایت دسترسی دارید، ولی باز هم کدنویسی نمی خواهند.

سایتم وردپرسی است، مستقیم بروم سراغ درس وردپرس؟

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

چرا در این مسیر فهرست بهترین افزونه های سرعت نیست؟

چون چنین فهرستی ظرف یک سال کهنه می شود و مهم تر از آن، انتخاب درست به سایت شما بستگی دارد نه به رتبه بندی کسی. جایی که افزونه لازم است، درس می گوید آن افزونه باید چه کاری بکند و چطور بفهمید کرده یا نه؛ نام بردن کار ساده تری است و کمتر به درد می خورد.

این مسیر برای کسی نوشته شده که می خواهد خودش بفهمد وقت صفحه اش کجا می رود. اگر عدد سایتتان واقعا بد است و می خواهید کسی این کار را انجام بدهد، همان جا هم می توانید سایتتان را با موتور Lighthouse تست کنید؛ صفحه افزایش سرعت سایت را ببینید