سایتهای خود را سرعت ببخشید
نویسنده حامد در شهریور ۱۱م, ۱۳۸۹تکنیکهای بسیاری برای بهبود سرعت بارگزاری صفحات وجود دارند که با یک جستجوی ساده در گوگل بهترین نتایج را خواهید دید. مسلما نوشتن این پست نیز تکرار مکررات است اما از آن مکرراتی است که باید بارها تکرارش کرد. متاسفانه در صنعت طراحی وب سایت ایران, تعداد کمی از طراحان وب آگاهی کاملی از جنبه های مختلف طراحی سایت از کدنویسی بهینه گرفته تا تنظیمات مربوط به سرور دارند و تعداد کمتری این دانسته ها را واقعا به کار میگیرند. در این مطلب تکنیکهای را معرفی خواهم کرد که به چشم تاثیراتش را در سایتهای مختلف دیده ام.
به کار انداختن فشرده سازیGZIP
با یقین میگویم که این مورد مهمترین موردی است که در این مطلب میخوانید. gzip که مخفف Gnu Zip میباشد ابزاری برای فشرده سازی انواع مختلف فایل است که گاها میتواند تا حدود ۸۰ درصد از حجم صفحات وب شما بکاهد. اگر برای فایلهای js و css خود این قابلیت را فعال کنید کاهش حجم زیادی را در صفحات خود خواهید و در اینترنت کاهش حجم یعنی سرعت و سرعت یعنی همه چیز.
برای فعال کردن gzip در سرورهای apache میتوانید تکه کد زیر را به فایل .htaccess که در روت هاست شما وجود دارد اضافه کنید.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
تکه کد بالا فشرده سازی را برای فایلهای text, html, javascript, css, xml فعال خواهد کرد. و یا اینکه میتوانید با استفاده از کد زیر فشرده سازی را بر حسب پسوند فایلها فعال کنید.
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|TTF)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
برای اینکه بدانید gzip در صفحات شما فعال است یا خیر میتوانید از این سایت استفاده کنید.
افزودن http Expire Headers
تقریبا تمام طراحان وب با عبارت caching آشنایی دارند. سیستم cache بدین گون عمل میکند که پس از اولین بارگزاری یک صفحه وب تعدادی از عناصر صفحه بر روی سیستم کاربر ذخیره میشوند تا دفعات بعد به جای خواندن فایل از سرور, آنها از روی سیستم خوانده شود. اینکار هم پهنای باند را حفظ خواهد کرد و هم سرعت را بهبود چشمگیری خواهد بخشید. اما اگر به مرورگر نفهمانیم که هر عنصر چقدر باید در کش بماند مشکلات زیادی از قبیل نمایش عناصر قدیمی به جای عناصر جدید و یا کلا عدمcaching پیش خواهد آمد.
برای فعال سازی کش از طریق سرور باید خطوط زیر را به فایل .htaccess خود اضافه کنید.
<IfModule mod_headers.c>
# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>
</IfModule>
استفاده از سرورهای تحویل محتوا (Content Delivery Networks)
cdn ها کارشان این است که فایلهایی را که استفاده زیادی در وبسایتهای امروزه دارند را در خود جای دهند و در موقع نیاز انها را به کاربر تحویل دهند. برای مثال کتابخانه جاوا اسکریپت JQuery را تصور کنید. کتابخانهی بسیار معروفی که سیستم ورد پرس و بسیاری از سیستمهای دیگر به طور پیشفرض از آن استفاده میکنند. شما میتوانید به جای اینکه این فایل ها را از درون هاست خود در سایتتان استفاده کنید از آدرس زیر استفاده کنید.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
گوگل میتواند با سرورهای فدرتمندی که در اختیار دارد محتوای مورد نظر را بسیار سریعتر از سرورهای دیگر ارایه دهد. استفاده از cdn ها مزیت دیگری نیز دارند که آن صرفه جویی در پهنای باند پر ارزش است. برای لیستی از کتابخانه هایی که میتوانید از طریق گوگل بارگزاری کنید به این آدرس مراجعه کنید.
ترکیب کردن جاوا اسکریپت و CSS در یک فایل
هر بار که فایلی از طریق مرورگر کاربر درخواست میشود, مرورگر درخواستی برای سرور ارسال میکند که تا تحویل درخواست, پردازش آن توسط سرور و پاسخ درخواست از طرف سرور مدت زمان محدودی طول خواهد کشید. حال هرچه این درخواستها کمتر باشند مسلما زمان کمتری نیز صرف خواهد شد. اگر شما تا آنجا که امکان دارد تمام فایلهای جاوا اسکریپت را درون یک فایل و فایلهای css را نیز به همین منوال در یک فایل قرار دهید شاهد بهبود سرعت و کاهش هدر رفتن زمان خواهید بود.
بهینه سازی تصاویر
به جرات میتوان گفت امروزه تصاویر بیشترین حجم صفحات وب را بخود اختصاص داده اند و روزانه هزاران گیگابایت پهنای باند را مصرف میکنند. تصاویری که گاها بدلیل استاندارد نبودنشان برای وب حجمی بسیار بیشتر از آنچه نیاز دارند اشغال میکنند. در بسیاری موارد میتوان حجم تصاویر را تا ۸۰ درصد بدون افت کیفیت کاهش داد. ابزارهای زیادی نیز برای اینکار موجود هستند. درسیستمهای لینوکسی دو ابزار بسیار مفید jpegoptim و optipng میتوانند تعداد زیادی تصویر را در زمان کمی بدون افت کیفیت بهینه کنند. برای ویندوز نیز ابزارهای مخصوصی وجود داردند.+ + +
کوچک کردن JavaScript و CSS
فایلهای css و js اگر به همان صورتی که نوشته میشوند استفاده شوند دارای فاصلها و خطوط بسیاری هستند که اینها نیز به خودی خود فضا اشغال میکنند. میتوانید با استفاده از ابزارهایی مشابه این ابزار فایلهای css خود را فشرده کنید. فایلهای جاوا اسکریپت هم قابلیت فشرده سازی دارند. با استفاده از این ابزار میتوانید کدهای جاوا اسکریپت خود را به اصطلاح pack کنید. با اینکار دو نشان را با یک تیر زده اید. هم کدهای خود را از شر دزدی حفظ کرده اید و هم آن را فشرده کرده اید.
و در آخر این نکته را متذکر میشوم که گرچه افزایش سرعت برای سایتها بسیار مفید خواهد بود اما نباید محتوا را فدای سرعت کرد. به یاد داشته باشید محتوای خوب ارزش منتظر ماندن را خواهد داشت.
اخیرا گوگل 
دیدگاه های اخیر