برای سایت های پر بازدید، بهینه بودن سایت از اهمیت زیادی برخوردار است. بهینه بودن یعنی اینکه سایت در کمترین زمان ممکن بارگزاری (load) شود و همچنین مصرف منابع سرور هم به حداقل ممکن برسد.
می تواند فرایند بهینه سازی را به دو بخش سمت کاربر و سمت سرور تقسیم کرد.
بهینه سازی سمت سرور یعنی بهینه کردن برنامه و کد های سمت سرور برای اینکه حداقل منابع را مصرف کند و در حداقل زمان ممکن اجرا شود. که این قسمت از بهینه سازی فعلا موضوع بحث ما نیست.
بهینه سازی سمت کاربر شامل کلیه اقداماتی است که برای کاهش مصرف پهنای باند و افزایش سرعت بارگزاری صفحات سایت انجام می شود.
در ادامه این مقاله، که در واقع بر گرفته از کتاب «High Performance Web Sites» است به اهمیت و راهکارهای بهینه سازی سمت کاربر می پردازیم. لازم به ذکر است که این کتاب نوشته Steve Souders مسئول performance سایت یاهو است.
از ملاک های اصلی جلب رضایت کاربران، کارایی و سرعت سایت است. بررسی ها نشان داده که کمتر از 20 درصد از زمان بارگزاری سایت صرف لود شدن html و مابقی یعنی بیش از 80 درصد از زمان، صرف بارگزاری آنچه درون صفحه است می شود. که توجه به بهینه سازی این قسمت (ملحقات صفحه) تا حدود زیادی سرعت و کارایی سایت را افزایش می دهد.
1- کاهش تعداد درخواست های HTTP
2- استفاده از CDN
یک CDN مجموعه ای از وب سرورها است که در نقاط مختلف دنیا توزیع شده اند و معمولا محتوای static رو میزبانی می کنند. تا بازدید کننده ها بتوانند از نزدیکترین سرور فایل ها را دریافت کنند. این تکنیک برای سایت های کوچک مقرون به صرفه نیست.
3- افزودن Expires Header
مرورگرها می توانند پاسخ درخواست های HTTP را کش کنند. با ارسال هدر Expires میتوان به مرورگر گفت که پاسخ را تا چه زمانی کش کند. برای مثال برای محتوای استاتیک میتوان این مقدار را بر روی یکسال گذاشت تا در درخواست های بعدی مرورگر از کش استفاده نماید.
4- استفاده از gzip
تقریبا اکثر مرورگرها از gzip پشتیبانی می کنند. فشرده سازی gzip بر روی محتوای متنی نظیر css ها و اسکریپت ها و html کارایی خوبی دارد و بیش از 50 درصد حجم درخواست ها را کاهش می دهد.
5- stylesheet ها را در ابتدای صفحه قرار دهید
در بعضی مرورگرها درصورتی که stylesheet در انتهای صفحه قرار گیرد باعث می گردد که محتوای صفحه دوبار رندر و زمان بیشتری صرف شود و ضمنا دفعه اول بدون style رندر می شود که ظاهر خوشایندی ندارد. در بعضی مرورگرها هم موجب می شود رندر بعد از لود شدن محتوا و ملحقات صفحه انجام شود که باعث می شود ابتدا یک صفحه خالی نمایش و سپس رندر با کمی تاخیر انجام شود.
ضمنا قرار دادن stylesheet ها در ابتدای صفحه باعث رندر شدن به شکل مطلوب می گردد و به صورت تدریجی همزمان با لود شدن محتوا انجام می شود.
6- اسکریپت ها را در انتهای صفحه قرار دهید
قرار دادن اسکریپت ها در ابتدای صفحه باعث می گردد جلوی رندر شدن و دانلود شدن سایر محتویات صفحه تا اتمام لود شدن اسکریپت گرفته شود. و اما قرار دادن اسکریپت ها در انتهای صفحه باعث می شود ابتدا محتوا رندر و سپس سایر ملحقات و اسکریپت ها در پس زمینه لود شوند.
7- از CSS Expression ها پرهیز کنید
CSS Expression ها فقط در IE پشتیبانی می شوند. با استفاده از این قابلیت می توان برای مقدار دادن به یک خصوصیت در CSS از جاوااسکریپت استفاده کرد و این کد اسکریپت در مواقعی نظیر resize شدن صفحه و یا حرکت موس مجددا مقدار رو محاسبه می کند. این اجرای مکرر می تواند باعث کاهش کیفیت و یا حتی هنگ شدن مرورگر شود. پس بهتره است از این CSS Expression ها استفاده نکنید.
8- جاوااسکریپت ها و CSS ها را از HTML جدا کنید
گرچه این کار قاعده شماره 1 رو نقض می کند ولی با توجه به اینکه با جدا کردن CSS و JS ها و ذخیره آنها در فایل های استاتیک، می شود قواعد 3،2 و 4 را در موردشان بکار بست پس این کار به صرفه است.
9- تعداد DNS Lookup ها را کم کنید
مرورگرها برای ارتباط با سرورها از IP آنها استفاده می کنند بنابراین مجبورند به ازای هر Hostname ابتدا یک درخواست به DNS سرور ارسال کنند و IP را بدست بیاورند. ضمن اینکه مرورگر می تواند از قابلیت Keep-Alive در مورد درخواست هایی که مربوط به یک Hostname هستند استفاده کند که باعث می شود چندین درخواست از طریق یک کانکشن انجام شود.
پس بهتر است محتویات سایت تان از Hostname های مختلف نباشد. (دقت کنید که www.example.com و example.com دو Hostname متفاوت هستند)
10- جاوا اسکریپت ها را فشرده کنید
کوچک کردن (Minify) یعنی حذف اضافات (شامل کامنت ها، فضاها، و کاراکترهای اضافی) از درون اسکریپت ها برای کاهش حجم فایل. البته یک گام فراتر هم می شود رفت با استفاده از روش مبهم نویسی (Obfuscation) که در این روش علاوه بر حذف اضافات، شناسه های استفاده شده در کد را هم با شناسه های کوتاه تر جایگزین می کنند.
روش Obfuscation را در مورد CSS هم می شود به کار برد ولی تاثیرش در مورد CSS ها کمتر است. البته در مورد CSS می شود با بهینه کردن کد تا حدی از حجم CSS کم کرد. (در این مورد آقایان الوانی و ستاری به طور مفصل توضیح دادند.)
11- از Redirect کردن پرهیز کنید
هر Redirect مستلزم یک درخواست اضافه است و ضمنا این درخواست به صورت موازی هم نیست یعنی تا کامل نشود درخواست های بعدی ارسال نمی شوند. پس تا جائیکه ممکنه از Redirect پرهیز کنید.
12- اسکریپت های تکراری را حذف کنید
گاهی ممکن است پیش بیاید که یک اسکریپت 2 بار در صفحه درج شده باشد مثلا در کار تیمی ممکن است یک نفر یک اسکریپت را در یک جای صفحه درج کند و یک نفر دیگر که از این موضوع خبر ندارد مجددا آن را در جای دیگری درج کند.
این کار 2 مشکل ایجاد می کند:
البته مورد اول فقط در IE و آن هم در حالتی که اسکریپت قابل کش شدن نباشد اتفاق می افتد.
13- پیکربندی ETag ها (افزایش سرعت وب سایت شما با چند راه کار ساده)
مرورگرها از هدر ETag برای کش کردن محتوای استاتیک تا زمانی که تغییر نکرده استفاده می کنند (مشابه هدر Last-Modified). ولی ETag در صورتی که سایت بر روی بیش از یک سرور میزبانی شده باشد می تواند مشکل ساز شود. مثلا آپاچی به طور پیش فرض برای تولید ETag از «inode – حجم – زمان ویرایش» استفاده می کند و inode در مورد یک فایل روی سرورهای مختلف فرق می کند و در صورتی که مرورگر یک فایل را از یک سرور دریافت کند و در مراجعه بعدی به آن فایل برای چک کردن تغییرات از سرور دیگری استفاده کند، با توجه به اختلاف ETag ها، سرور مجددا فایل را می فرستد که باعث می شود مرورگر از کش استفاده نکند. IIS هم مشکل مشابهی دارد.
اما راهکار این است که یا کلا ETag رو حذف کنید و یا اینکه اصلاحش کنید برای مثال در آپاچی باید inode رو از ETag حذف کنید. (این کار رو با htaccess می شود انجام داد.)
14- Ajax را قابل کش شدن کنید
یک برنامه ی وب دویی را در نظر بگیرید که مثلا برای لود کردن لیست ایمیل ها از آژاکس استفاده می کند. در این حالت می توان تا زمانی که لیست آدرس ها تغییر نکرده است این درخواست را با استفاده از هدر Expires قابل کش کرد.
ضمنا قواعد 4، 9، 10، 11 و 13 هم در مورد درخواست های اجکسی قابل استفاده هستند.
اینها مواردی بود که در کتاب ذکر شده بودند. بعدها موارد دیگه ای هم به اینها اضافه شد و الان تعدادش به 34 مورد رسیده است که می توانید اینجا ببینید.
یاهو یک پلاگین برای فایرفاکس برای چک کردن این فاکتورها نوشته به نام YSlow که البته با Firebug کار می کند.
این پلاگین بر اساس این فاکتورها کیفیت سایت شما رو چک می کند و مواردی که رعایت نشده اند را مشخص می کند و یک نمره هم از 100 به سایت شما می دهد.
ابزارهای مختلفی وجود دارد که پیاده سازی این موارد را ساده می کند.
مثلا برای فشرده سازی جاوااسکریپت ها (مورد 10) می توانید از ابزارهایی مثل JSMin, Packer و YUI Compressor استفاده کنید.
ابزارهایی هم هستند که با نصب آنها روی سایت، به صورت خودکار بعضی از این موارد را روی سایت شما اعمال می کند. مثل Minify, PHPSpeedy و SmartOptimizer.
برای مثال SmartOptimizer می تواند موارد 10،4،3،1 و 13 را روی سایت شما اعمال کند و نمره YSlow شما را حدود 10-20 واحد افزایش دهد.
