نکاتی درباره‌ی ایجاد صفحات HTML سریع

نکات زیر بر اساس دانش و تجربه به دست آمده‌اند.

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

بهینه‌سازی عملکرد یک صفحه فقط برای کاربران با اینترنت کم سرعت مطرح نیست. بلکه برای آن دسته از کاربران با اینترنت پرسرعت نیز تاثیر به سزایی دارد.

نکته‌ها

کاهش دادن وزن صفحه

وزن صفحه، یکی از مهم‌ترین فاکتورهای بارگیری یک صفحه است.

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

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

کاهش تعداد فایل‌ها

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

بسته به تنظیمات حافظه‌ی نهان مرورگر، ممکن است درخواست If-Modified-Since به وب‌سرور برای هر فایل CSS، جاوااسکریپت یا تصویر فرستاده شود که در آن مشخص می‌شود آیا فایل نسبت به آخرین باری که دانلود شده، تغییر کرده است یا خیر.

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

اگر از تصاویر پس‌زمینه در فایل CSS خود به نسبت زیادی استفاده می‌کنید می‌توانید با استفاده از تکینیکی به نام image sprite این تصاویر را با هم ترکیب کنید تا تعداد درخواست‌های ارسالی به سرور کاهش یابد. تنها کافی است با تغییر موقعیت تصویر در صفحه نحوه‌ی نمایش آن را در حالت‌های مختلف تنظیم کنید. این تکنیک برای عنصرهایی که ابعاد محدودی در صفحه دارند به خوبی کار می‌کند. اگرچه تعداد درخواست‌های http کمتر و cache کردن هر تصویر نیز می‌تواند به عنوان راه حل جایگزین مطرح باشد.

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

کاهش تعداد ارجاع‌ها به دامنه‌های مختلف

از آن‌جایی که هر دامنه‌ی منحصر به فرد در فرآیند DNS Lookup هزینه‌ی زمانی دارد، زمان بارگذاری صفحه با توجه به تعداد دامنه‌های مختلف در فایل‌های CSS ،جاوااسکریپت و تصویرها افزایش می‌یابد.

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

محتوای کاربردی را Cache کنید

اطمینان یابید هر محتوایی که قابل cache شدن است، این اتفاق برایش افتاده باشد و زمان پایانی cache نیز دارا باشد.

در حقیقت باید به فایل سرآیند (header) با نام Last-Modified توجه خاصی داشت. کار این فایل ذخیره‌سازی آخرین زمانی است که به صفحات ثابت (html و css و ...) از طریق user agent یا همان مرورگر بر اساس زمان موجود در وب سرور، ارجاع شده است. البته این موضوع در رابطه با صفحات پویا (php و aspx و ...) اتفاق نمی‌افتد، یعنی این فایل سرآیند ارسال نمی‌شود.

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

ترتیب بهینه‌ی اجزای تشکیل دهنده‌ی صفحه

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

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

کاهش تعداد اسکریپت‌های برخط (inline)

این نوع اسکریپت‌ها می‌توانند زمان زیادی را به خود اختصاص دهند، چرا که parser باید در نظر بگیرد که یک اسکریپت برخط می‌تواند ساختار صفحه را هنگامی که خود صفحه در حال parse شدن است، تغییر دهد. کاهش تعداد این اسکریپت‌ها به صورت عمومی، و کاهش استفاده از document.write به صورت اختصاصی، می‌تواند منجر به افزایش سرعت در بارگذاری صفحات شود. همچنین استفاده از روش‌های پیشرفته در AJAX جهت تغییر در محتوای صفحه به جای استفاده از document.write توصیه می‌شود.

استفاده از CSS پیشرفته و عنصرهای معتبر

استفاده از CSS به صورت صحیح می‌تواند تعداد عنصرهای مورد نیاز در صفحه را به شکل قابل ملاحظه‌ای کاهش دهد. از جمله این تکنیک‌ها می‌توان به جایگزین کردن برخی تصاویر (که به spacer معروف هستند) با معادل CSS آن‌ها جهت قالب‌بندی صفحه اشاره کرد.

استفاده از عنصرهای معتبر نیز مزایای خود را دارد. اول از همه، مرورگرها دیگر نیازی ندارند تا فرآیند بررسی خطا در کد HTML را انجام دهند. ((البته این موضوع با بحث فلسفی آن که ابتدا کاربر محتوای خود را وارد می‌کند سپس به صورت منطقی فرآیند بررسی آن محتوا آغار می‌شود، متفاوت است)).

به علاوه، استفاده از عنصرهای معتبر این امکان را در اختیار سایر ابزار می‌گذارد تا صفحات سایت شما را بررسی (pre-process) کنند. برای نمونه، HTML Tidy می‌تواند فضای خالی در صفحات و تگ‌های پایانی اختیاری را حذف کند; اگرچه این ابزار در صفحاتی که دارای خطاهای بسیار در عنصرها باشند، اجرا نمی‌شود.

محتوا را طبقه‌بندی کنید

استفاده از جدول‌ها در قالب‌بندی صفحات یک روش منسوخ است که دیگر نباید استفاده شود. در عوض از عنصر <div> و در آینده‌ی نزدیک از ساختار چند ستونی CSS3 یا ساختار منعطف جعبه‌ای CSS3 باید استفاده شود.

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

به جای این‌که از ساختاری مانند این استفاده کنید:

<TABLE>
  <TABLE>
    <TABLE>
          ...
    </TABLE>
  </TABLE>
</TABLE>

در عوض از جدول‌هایی که جداگانه هستند یا divها استفاده کنید.

<TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>

همچنین می‌توانید مستندات CSS3 Multi-column Layout یا CSS3 Flexible Box Layout را مشاهده کنید.

مشخص کردن اندازه‌ی تصویرها و جدول‌ها

اگر مرورگر به محض دریافت تصویر یا جدول بتواند اندازه‌ی آن را تشخیص دهد، این امر موجب نمایش هر چه بهتر محتوای صفحه در زمان بارگذاری خواهد شد. به همین منظور استفاده از height و width برای تصویرها در هر جایی که ممکن است باید استفاده گردند.

برای جدول‌ها نیز می‌توان از قطعه کد CSS زیر استفاده کرد:

  table-layout: fixed;

همچنین باید از تگ‌های COL و COLGROUP برای مشخص کردن عرض جدول‌های استفاده کرد.

حداقل محدودیت‌های مرورگر را در نظر بگیرید

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

در حقیقت، حداقل پیش‌نیازهای شما باید منطبق با مرورگرهای پیشرفته‌ای باشند که استانداردهای وب را رعایت می‌کنند که این مرورگرها شامل Firefox 3.6 به بالا برای تمامی پلتفرم‌ها، Internet Explorer 8 به بالا در ویندوز، Opera 10 به بالا در ویندوز و Safari 4 به بالا در Mac OS X هستند.

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

ساختار صفحه‌ی مورد نظر ما

· HTML

· HEAD

· LINK ...

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

· SCRIPT ...

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

· BODY

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