چگونه سرعت Load سایتمان را افزایش دهیم؟

چگونه سرعت Load سایتمان را افزایش دهیم؟
برای درک اهمیت سرعت Load بالا , همین بس که 75% کاربران اینترنت به سایت شما باز نخواهند گشت اگر زمان انتظارشان بیش از 4 ثانیه باشد و یا به طور میانگین کاربرانی که از طریق گوشی یا تبلت وارد سایت شما می شوند 3 ثانیه می توانند منتظر بارگذاری کامل سایت شما بمانند.
در نسل فعلی وب , جایی برای وب سایت های کند نیست...
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید

زمان Load سایت کاملا با میزان درخواست های سرور مرتبط است. هر چقدر درخواست های HTTP که به سمت سرور ارسال می شود بیشتر باشد سرعت سایت کمتر می شود.
چند نمونه از درخواست های HTTP عبارتند از:
  • بارگذاری CSS
  • بارگذاری script ها
  • بارگذاری تصاویر
  • بارگذاری HTML
عامل مهم دیگر در سرعت بارگذاری سایت , حجم فایل و تصاویر استفاده شده در صفحه است. تصاویر بزرگ و یا با رزولوشن بالا می توانند زمان مصرف شده برای بارگذاری کامل را تا 10 برابر افزایش دهد. فایل های غیرضروری هم میتوانند در نوع خود باعث کاهش سرعت سایت شوند. هدف از سرعت بخشیدن به بارگذاری یک سایت تاثیرگذاری بیشتر آن سایت است که با اعمال اصلاحات در کدنویسی و بهینه سازی تصاویر ممکن می شود.

بررسی کردن سرعت سایت

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

یک مثال

برای درک مراحل کار از یک وب سایت استفاده می کنیم. این سایت از 100 امتیاز ممکن توسط گوگل 48 امتیاز را کسب کرده.

امتیاز کسب شده در ابتدا : 48 از 100

گام اول - فشرده سازی تصاویر

در گام اول باید تمامی تصاویر را برای استفاده در وب فشرده سازی کنیم. برای این کار می توان از image compressor که در پلاگین تست سرعت گوگل موجود می باشد استفاده کنیم. تصویر فشرده شده را ذخیره و سپس دوباره در سایت بارگذاری می کنیم تا جایگزین تصویر قبل شود.
امتیاز بعد از گذر از گام اول : 61 از 100

گام دوم -  scale کردن تصاویر

بعد از فشرده سازی تصاویر , حال باید به سراغ تغییر مقیاس تصاویر برویم. می توان در فتوشاپ سایز تصاویر را دقیقا با توجه به سایزشان در زمان نمایش تغییر داد. این کار از بروز وقفه برای تغییر سایز در سرور جلوگیری می کند.
امتیاز بعد از گذر از گام دوم : 72 از 100

گام سوم - استفاده از caching مرورگر

Caching مرورگر , منابع سایت رو به صورت نسخه های cach شده در خود نگهداری می کند. این کار باعث کاهش وقفه های سرور شده و در نتیجه به افزایش سرعت کمک می کند. برای فعال کردن حالت caching باید تکه کد زیر را در فایل .htaccess وارد کنید. 
# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
# END Expire headers
امتیاز بعد از گذر از گام سوم : 78 از 100

گام چهارم - ترکیب کردن تصاویر و استفاده از تکنیک CSS Sprite

تصاویر را می توان در یک CSS Sprite ترکیب کرد تا تعداد درخواست های HTTP برای واکشی تصاویر کمتر شود. در واقع با استفاده از این تکنیک یک تصویر بزرگ تر دارید که از تصاویر کوچک تشکیل شده است. در نتیجه مرورگر به جای واکشی چند تصویر نیاز است فقط یک تصویر را واکشی کند. ابزارهای زیادی برای این کار وجود دارد که به چند نمونه از آن ها در زیر اشاره خواهیم کرد.

spritepad , instantsprite , spritegen , spriteme
امتیاز بعد از گذر از گام چهارم : 82 از 100
 

گام پنجم - به تعویق انداختن پردازش جاوا اسکریپت

وجود جاوا اسکریپت در بالای HTML می تواند باعث به تعویق افتادن Load صفحه شود از این رو بهتر است که کدهای جاوا اسکریپت را در انتهای HTML فراخوانی کنیم و یا همچنین می توان از ویژگی defer استفاده کرد تا کدهای جاوا اسکریپت بعد از Load کامل صفحه اتفاق بیفتد. 
<script type="text/javascript" src="includes/general.js" defer="defer"></script>
امتیاز بعد از گذر از گام پنجم : 86 از 100

گام ششم - minify کردن کدهای HTML , CSS و جاوا اسکریپت

تمامی کدهای HTML , CSS و جاوا اسکریپت قابلیت فشرده سازی یا minify شدن دارند. با این کار حجم کدها را کاهش و در نتیجه به افزایش سرعت بارگذاری سایت کمک قابل توجهی خواهیم کرد.
امتیاز بعد از گذر از گام ششم : 90 از 100
 

نتیجه گیری

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

رضا از سال 87 برنامه نویسی را با زبان های خانواده C شروع کرد و بعد از 4 سال به سمت طراحی و برنامه نویسی تحت وب رفت. وی همزمان با تحصیل در مقطع کارشناسی رشته مهندسی کامپیوتر به امر ترجمه کتاب در حوزه برنامه نویسی مشغول بود که کتاب او در مرحله ویراستاری قرار دارد. به روز بودن و افزایش مستمر اطلاعات شخصی در زمینه وب دغدغه ی اصلی و همیشگی رضاست.

این مطالب را هم ببینید

نظرات و سوالات کاربران

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