بهینه‌سازی زمان بارگذاری صفحه
چگونه زمان بارگذاری صفحه را بهینه‌سازی کنیم؟
زمان بارگذاری صفحه یا Page Load Time معیاری برای سنجش میزان سرعت بارگذاری محتوای یک صفحه اینترنتی است.
چگونه زمان بارگذاری صفحه سنجیده می شود؟
دو روش برای سنجش زمان بارگذاری صفحه وجود دارد:
- زمان بارگذاری صفحه: میزان زمانی که از ارسال درخواست از سمت مرورگر به سرور تا بارگذاری کامل صفحه صرف می شود.
- زمان رسیدن اولین بایت: میزان زمان صرف شده از ارسال درخواست به سرور تا مرورگر اولین بایت از داده را دریافت کند.
با استفاده از هر یک از این دو روش، در انتها همیشه بایستی صفحه ای سریعتر داشته باشید. بهرحال بایستی بدانید که معیار گوگل برای سنجش سرعت بارگذاری یک صفحه به صورت سررسید اولین بایت از داده است که اغلب به صورت اختصاری TTFB خوانده می شود.
چرا زمان بارگذاری صفحه مهم است؟
سرعت بارگذاری صفحه بخش حیاتی از کاربردپذیر بودن یک وبسایت است. گوگل سرعت صفحه را یکی از ۲۰۰ عامل رتبه بندی الگوریتم خود می داند که بر موقعیت یک وبسایت در نتایج طبیعی جستجوی گوگل نقش مهمی ایفا می کند و قطعا تجربه کاربری غنی تری را در پی خواهد داشت. با توجه به اینکه قطعا بیشمار وبسایت در حوزه کاری شما فعال هستند، رقابت برای به دست آوردن ترافیک بیشتر و حفظ کاربر از طریق کاربردی بودن وبسایت هر روز بیش از گذشته اهمیت حیاتی تری می یابد. اگر وبسایت شما سریع بارگذاری نمی شود، شانس از دست دادن بازدیدکننده در این رقابت افزایش می یابد.
داشتن زمان بارگذاری سریع صفحه همچنین نرخ خزش در وبسایت شما را افزایش می دهد. هرچه صفحات وبسایت شما از زمان بارگذاری سریعتری برخوردار باشند، گوگل نیز صفحات بیشتری را در یک بازه زمانی مشخص می تواند مرور کند یا اصطلاحا بخزد.
همچنین بایستی توجه کنید که نقش شرکت میزبان وبسایت شما و پلن خریداری شده از آن شرکت از جانب شما نیز نقش غیرقابل انکاری در زمان بارگذاری صفحه دارد.
چگونه زمان بارگذاری صفحه را بهبود بخشیم
۱۰ نکته ساده اما کاربردی وجود دارد که می تواند باعث افزایش سرعت بارگذاری صفحات وبسایت شما شود:
۱. بهینه سازی فرمت و اندازه تصویر
تصاویر در وبسایت شما می توانند پهنای باند زیادی مصرف کنند که بر زمان بارگذاری صفحه شما تاثیرگذار است. کاهش حجم تصاویر وبسایت در قالب HTML کافی نیست چرا که تنها ظاهر تصویر و نه اندازه واقعی را تغییر خواهد داد. از ابزارهای ویرایشگر تصویر مانند فتوشاپ برای تغییر اندازه تصویر استفاده کنید و dpi تصاویر را روی ۷۲ تنظیم کنید.
علاوه بر این، از ابزارهای بهینه سازی تصویر استفاده کنید که فشرده سازی بیشتری به منظور کاهش اندازه تصویر صورت می دهند:
- تغییراندازه PNG و JPEG
- Smush.it
- بهینه ساز آنلاین تصویر
- SuperGIT
برای بهینه سازی زمان بارگذاری صفحه بهتر است که به فرمت های استاندارد تصویر مانند JPG، PNG و GIF بچسبید.
۲. عوامل دیگر در بهینه سازی
افزونه ها: یک وبسایت نیازمند افزونه هایی است که باعث افزایش کارایی وبسایت اما در عین حال باعث کاهش سرعت بارگذاری صفحه می شود. البته که برخی افزونه ها ضروری هستند، برای مثال افزونه های به اشتراک گذاری نوشته در شبکه های اجتماعی که امروزه به ابزاری ضروری در وبسایت ها بدل شده اند. بنابراین همیشه بررسی صورت دهید شاید جایگزین بهتری برای افزونه وجود داشته باشند مثلا استفاده از CMS با قابلیت های پیش‌فرض مشابه.
اسکریپت‌های ردگیری: در حالیکه توصیه می شود آمار بازدیدکننده ها و رفتار آنها در وبسایت خود را همیشه نظارت کرده و ردگیری کنید، استفاده از چند نرم افزار آمارگیری توصیه نمی‌شود چرا که به مانعی برای زمان بارگذاری صفحه وبسایت شما بدل خواهند شد. اگر از وردپرس استفاده می کنید، یا بایستی از افزونه WP stats برای آمارگیری استفاده کنید یا نرم افزار Google Analytics نه هر دو!
نرم افزار CMS: اگر از سیستم های مدیریت محتوا مانند وردپرس استفاده می کنید حتما همیشه به‌روزرسانی‌های موجود برای این نرم افزار را نیز بررسی کنید. برای ارتقا نسخه CMS حتما ابتدا اینکار را در یک سرور جداگانه انجام دهید. به‌روزنگاه‌داشتن نرم افزار بر روی سرور نقش مهمی در بهبود سرعت وبسایت ایفا می کند.
۳. ممانعت از فایل های inline جاوا اسکریپت و CSS
تکه کدهای CSS و جاوا اسکریپت خود را در فایل های بیرونی نگاه دارید. وقتیکه صفحه بارگذاری می شود، مرورگر این فایل ها را به صورت بیرونی کش می کند که از زمان بارگذاری صفحه در درخواست های بعدی می کاهد. به علاوه داشتن فایل های جاوا اسکریپت و CSS بیرونی اجازه نگهداری راحت تر وبسایت را می دهد.
۴. بهینه سازی کش
هر باری که بازدیدکننده یک وبسایت را بارگذاری می کند، فایل های تصویر صفحه وب، فایل های جاوا و CSS وبسایت شما نیز بارگذاری می شوند که زمان بارگذاری صفحه را بالا می برد. وقتیکه کش به صورت درست تنظیم شود، مرورگر شما می تواند این منابع یا فایل ها را برای درخواست های بعدی ذخیره کند. در بارگذاری مداوم صفحه این فایل ها را به جای فراخوانی شدن دوباره و دانلود از کل شبکه خیلی ساده از کش فراخوانی می کند. این روش به کاهش پهنای باند و هزینه های هاست منجر می شود.
می توانید از روش Expires headers برای اجزای ثابت وبسایت و Cache-Control headers برای بخش های پویا استفاده کنید. با استفاده از این هدرها، اجزای متنوعی از وبسایت شما از جمله تصاویر، استایل ها، اسکریپت و فلش ها قابل کش شدن می شوند. این اتفاق به نوبه خود درخواست های HTTP را حداقل سازی کرده و منجربه بهبود زمان بار صفحه می شود. با استفاده از Expires headers یا هدرهای انقضاشدنی می توانید مدت زمانیکه اجزای یک صفحه وب می توانند کش شوند را تعیین کنید.
۵. ممانعت از رندر اسکریپت های سطح بلاک
فایل های جاوا اسکریپت را در انتهای بدنه HTML خود قرار دهید یا از خصوصیت async برای بارگذاری غیرهمزمان آنها استفاده کنید.
۶. جلوگیری از بازنشانی یا Redirect
با اجتناب از بازنشانی می توانید به سرعت بارگذاری صفحه بیافزایید. برخی از بازنشانی ها غیرقابل اجتناب هستند و بایستی از آنها استفاده کنید اما همچنین بایستی به خاطر داشته باشید که اینکار نیازمند درخواست HTTP بیشتری است که منجربه افزایش زمان بارگذاری صفحه می شود. لینک های شکسته وبسایت خود را بررسی کرده و فورا آنها را اصلاح کنید.
۷. از G-Zip برای وبسایت خود استفاده کنید
به مانند قضیه فایل ها روی کامپیوتر شخصی خود که آنها به جهت کاهش اندازه برای انتقال آنلاین فشرده سازی می کنید، فایل های سنگین بر روی وبسایت نیز بایستی با روشی که G-Zip Compression نامیده می شود فشرده سازی شوند. این کار باعث حفظ پهنای باند و زمان دانلود و کاهش سرعت بارگذاری صفحه می شود. شما بایستی سرور را به شکلی پیکربندی کنید که محتوای فشرده شده را بازگرداند.
۸. کاهش درخواست های HTTP
با استفاده از اسکریپت های CSS می توان تعداد درخواست های تصویر را کاست. تصاویر پس زمینه را در یک تصویر با استفاده از قابلیت پس زمینه CSS و عنصر موقعیت پس زمینه background-position ترکیب کنید. تصاویر خطی inline را در استایل های کش شده خود ترکیب کنید. همینطور تمام فایل های جاوا اسکریپت خود را در یک فایل و فایل های CSS را در فایلی دیگر ترکیب کنید.
۹. کوچک سازی CSS و جاوا اسکریپت
کوچک سازی یا minification روند فشرده سازی کد با تغییر نام متغیرها به نام هایی کوتاه تر است که به کاهش اندازه و در نتیجه کوتاهی زمان بارگذاری صفحه می انجامد. توصیه می کنیم که از uglify.js برای اینکار استفاده کنید.
۱۰. کاهش اندازه کوکی
کوکی ها برای ذخیره داده های حاضر در درخواست ها استفاده می شوند. این داده ها در هر درخواست ارسال شده و زمانیکه بزرگ باشند به افزایش زمان بارگذاری صفحه منتهی می شود. از این رو با کاهش اندازه کوکی ها می توانید به کاهش اندازه داده هایی که انتقال داده می شود کمک کنید و در نتیجه به افزایش سرعت زمان بارگذاری صفحه کمک کنید. کوکی های نالازم را حذف کرده و از اندازه کوکی ها نیز بکاهید.
دیدگاهتان را بنویسید