چگونه سایتی سریع داشته باشیم ؟
همیشه سایتها و وبلاگهایی که سریعتر هستند مورد پسند بقیه قرار می گیرند . حتی گوگل در رده بندی سایتها سرعت لود (بارگذاری) رو ملاک قرار میده .
برای تعین سرعت سایت خودتون به آدرس google pagespeed مراجعه کنید و آدرس سایت یا وبلاگتون رو تو کادر وارد کنید و رویAnalyze کلیک کنید گوگل با بررسی سایت شما سرعت لود سایت رو مشخص میکنه این عدد از ۰ تا ۱۰۰ هست و هر چه عدد پیج اسپید سایت شما به ۱۰۰ نردیکتر باشه یعنی سرعت لود (بارگذاری) بیشتری داره و سرعتر باز میشه .
برای بررسی راحت تر و ریز تر بخشهای مختلف سایت میتونین از افزونه PageSpeed برای کروم و فایرفاکس استفاده کنید . البته این ابزار کمی حرفه ای هست و بیشتر به درد برنامه نویسها میخوره .
در ضمن برای استفاده از افزونه PageSpeed در مروگر فاریرفاکس نیاز به نصب افزونه Firebug دارید . برای نصب فایرباگ کلیک کنید .
راههایی برای افزایش سرعت سایت وجود داره . اگر شما از Cms های معروف مثل وردپرس و جوملا و … استفاده می کنید میتونین با استفاده از افزونه های Optimize به راحتی سایت خودتون رو بهینه کنید .
استفاده از هاست و سرور مناسب : انتخاب میزبان مناسب برای سایت اولین و مهم ترین عامل تو بهینه سازی سرعت سایت هست . هر چقدر مکان سرور به محل زندگی و کشور ما نزدیک تر باشه افزایش بیشتری تو سرعت سایت ایجاد میشه مثلا وقتی سایت تو آمریکا میزبانی میشه سرعت کمتر و وقتی تو انگلستان باشه سرعت سایت بیشتره و اگر تو ایران میزبانی بشه چند برابر بیشتره . فقط مشکل هزینه بالای میزبانی تو ایران هست . تا حد امکان سعی کنید از شرکتهای معتبر هاست تهیه کنید و کمی بیشتر پول پرداخت کنید تا مشکلاتتون کمتر باشه .
آپلود عکس و فایل : آپلود کردن عکسها و فایلهای مختلف تو هاست هم یکی از دلایل افت سرعت سایت میتونه باشه وقتی کاربر درخواست بازدید از یک صفحه رو داشته باشه درخواست به سمت سرور ارسال میشه تا اون صفحه تو مرورگر کاربر نمایش داده بشه خب اگر عکسهای موجود در مطالب رو هم اضافه کنیم این مساله باعث بالا رفتن حجم صفحه و فشار بیشتر بروی سرور سایت هست . تا حد امکان حجم و سایز عکسها رو کاهش بدین در غیر اینصورت بهترین کار آپلود عکسها تو سروهای رایگان مثل دراپ باکس هست .حجم اولیه ۲ گیگابایت هست که تا ۱۶ گیگ قابل ارتقا هست . (البته برای استفاده از حجم بیشتر باید تمامی مراحل بعد ثبت نام رو کامل کنید ) .
فشرده سازی فایلهای Css و javascript : با فشرده سازی فایلهایCss و javascript میتونه یکی از راههای مفید دیگه باشه . برای این کار میتونین از سایتهای آنلاین استفاده کنید .
برای نمونه از سایتهای زیر استفاده کنید :
|
1 2 3 4 5 6 7 |
http://www.cssoptimiser.com http://www.cleancss.com http://www.refresh-sf.com/yui/ http://iceyboard.no-ip.org/projects/css_compressor |
تا حجم فایلها Css و javascript رو کاهش بدین . البته از این دست سایتها بسیار زیاد هستن و میتونین با جستجو به اونها دسترسی پیدا کنین .
کش (Cache) کردن صفحات سایت : کش کردن سایت یعنی چی ؟ حتما تجربه کردین وقتی برای اولین بار وارد یک سایت جدید میشین سرعت سایت ممکنه کند باشه اما دفعات بعد وقتی وارد همون سایت بشین سرعتش بیشتر از قبل باشه دلیل این موضوع دانلود شدن صفحات اون سایت و عکسها و کلا چیزهایی که باعث ایجاد صفحه مورد نظر میشن رو سیستم شماست .
برای سیستمهایی مثل وردپرس افزونه های مختلفی وجود داره که میتونین با استفاده از اونها سرعت لود سایتتون رو افزایش بدین و تو پهنای باند هاست صرفه جویی کنید . نمونه مناسب و پر کاربرد افزونه w3 total cache هست
برای سایر سیستمها و استاندارها مثل html و یا php هم راهکارهای زیادی وجود داره با کمی جستجو میتونین از اونها استفاده کنید .
با این روش سرعت بارگذاری سایت شما سریعتر از هر زمانی میشه .
استفاده از gzip : gzip یک الگوی فشرده سازی صفحات سایت هست که تقریبا همه مروگرها از این روش پشتیبانی میکنن به این صورت که مثلا حجم یک صفحه سایت شما ۱۲۰ کیلوبایت هست با استفاده از gzip ممکنه حجمش به زیر ۳۰ کیلو بایت و حتی بیشتر کاهش پیدا کنه .
تنظیمات gzip کمی ممکنه سخت باشه برای هر سیستمی کدها و افزونه های مختلفی وجود داره حتی برای اونهایی که از هاست شخصی استفاده میکنن میتونن از تو تنظیمات هاست این بخش رو فعال کنن .
برای سیستمهایی مثل وردپرس افزونه وجود داره برای سایتها با فرمت صفحات html و php هم کدهای متفاوتی هست که بسته به نوع سایت شما باید از اونها استفاده کنید
نمونه کدهایی که میتونی اونها رو تو فایل htaccess اضافه کنید تا روند فشرده شدن صفحات انجام بشه تو سایتهای مختلف و مرجع موجود هستند جستجو کنید تا کد مناسب سایت خودتون رو پیدا کنید .
نمونه کدهایی که میتونی اونها رو تو فایل htaccess اضافه کنید تا روند فشرده شدن صفحات انجام بشه :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
# BEGIN Compress text files <ifModule mod_deflate.c> <filesMatch "\.(css|js|x?html?|php)$"> SetOutputFilter DEFLATE </filesMatch> </ifModule> # END Compress text files # BEGIN Expire headers <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> # END Expire headers # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "max-age=604800, public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "max-age=216000, private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "max-age=600, private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers # BEGIN Turn ETags Off <ifModule mod_headers.c> Header unset ETag </ifModule> FileETag None # END Turn ETags Off # BEGIN Remove Last-Modified Header <ifModule mod_headers.c> Header unset Last-Modified </ifModule> # END Remove Last-Modified Header |
مثلا کد زیر رو هم میتونین برای صفحات php تو فایل سربرگ(Header) قرار بدین بطوریکه تو همه صفحات تکرار بشه :
|
1 2 3 |
<?php ob_start("ob_gzhandler"); ?> |
خب بعد از استفاده از gzip با استفاده از سایت gidnetwork.com میتونین متوجه بشین که رو سایتتون اعمال شده و یا خیر .
نمونه تست gzip برای سایت خودم halachin.com رو انجام دادم نتیجه تو عکس مشخصه
استفاده از Ajax در صفحات : استفاده از آژاکس (ایجکس و یا اسامی مشابه ) باعث میشه وقتی صفحه برای اولین بار لود شد بقیه عناصر صفحه بعد از نمایش اولیه لود بشن و با اینکار کاربر میتونه در ابتدا مطلب موجود در صفحه رو به راحتی مطالعه کنه و سایر بخشهای صفحه کم کم بارگذاری میشن و این باعث افزایش سرعت لود صفحات میشه .
نمونه یک سایت با استفاده از Ajax همین سایت خودم هست اگه شما روی لینکهای داخلی کلیک کنید متوجه میشین که صفحه دوباره بارگذاری نمیشه و تقریبا ثابته و محتوای جدید تو همین صفحه فعلی بارگذاری میشه .
چون سیستم سایت من وردپرس هست من از افزونه Advanced Ajax Page Loader استفاده میکنم و کل کار تبدیل سایت رو بصورت خودکار انجام داده البته برای سایر سایتها باید دنبال راه مناسب باشین برای بغضی Cms ها افزونه وجود داره و برای بعضی ها هم باید کدنویسی مناسب انجام بدین .
با استفاده از این روش علاوه بر افزایش سرعت سایت به زیبایی سایتتون هم اضافه میشه
امیدوارم با استفاده از این روشها و تجربه خودتون سایتی سریعتر داشته باشین . اگر سوالی داشتین حتما بپرسید و تجربه خودتون رو با من و سایر کاربران در میان بگذارید .
سپاس فراوان از راهنمایی خوبتان
رضا پاسخ در تاريخ سپتامبر 20th, 2013 12:52 ق.ظ:
خواهش دوست عزیز .