4 مولفه حیاتی در بهینه سازی سرعت بارگذاری وب سایت

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

امروزه، کاربران اینقدر بی صبر و حوصله شده اند که نمی خواهند یک ثانیه تاخیر هم در هنگام وب گردیشان رخ دهد. کاربران اطلاعاتی که به خاطر آن وارد وب سایت شده اند را نیاز داشته و انتظار دارند که در یک چشم به هم زدن آن اطلاعات بارگذاری شود. برای اینکه دقیقتر بگوییم حتی ۴۰۰ میلی ثانیه نیز یک زمان بسیار طولانی برای بازدیدکنندگان یک وب سایت می باشد. این امر به قول مهندسین گوگل باعث می شوداغلب کاربران به وب سایت های دیگری رجوع کنند.

در آخر سرعت بارگذاری یک وب سایت بسیار بر موفقیت آن تاثیر گذار است. به هر حال، گوگل اعلام کرده که سرعت بارگذاری یک وب سایت جزو عوامل کلیدی SEO در رتبه بندی وب سایت ها هنگام جستجو می باشد.

در ادامه برخی روش های مناسب و موثر در رابطه با بهینه سازی صفحات وب سایت جهت بارگذاری هرچه سریعتر آنها را آموزش می دهیم.

مسئله ی بغرنج و پیچیده Query String ها

هنگامیکه از وردپرس استفاده می کنید ممکن است متوجه شوید که هنگامیکه یک CSS را بارگذاری می کنید معمولا وردپرس اقدام به ایجاد Query string های خودکار در URL می کند که با علامت “؟” مشخص می شود. این Query string ها نسخه پارامتر هایی که استفاده می شوند را مشخص می کند.

مشکل String ها این است که کشِ برخی از سرور های Proxy با این Query string ها رابطه خوبی ندارند. به همین علت اطلاعات موجود در این صفحات را به سختی کش می کنند و در اخر باعث می شوند که عملکرد وب سایت به میزان قابل توجهی کاهش یابد.

در ادامه یک Query string را به عنوان مثال می توانید مشاهده نمایید که ممکن است در برخی صفحات اسکریپت ها و CSS های وب سایت خود مشاهده کرده باشید.

Query String

نمونه کدی از Query String های به کار رفته در سیستم مدیریت محتوای وردپرس

این یک اسکرین شاتی می باشد که از نتیجه عملکرد یک وب سایت در  GTmetrix تهیه شده است و میزان بهینه بودن وب سایت را در رابطه با عدم استفاده از Query string ها شرح می دهد.

نتیجه بهینه سازی Query string ها در GTmetrix

نتیجه ارزیابی وب سایت GTmetrix از Query string های به کار رفته در وب سایت نمونه

برای بهبود عملکرد یک وب سایت به همان روشی که GTmetrix اعلام کرده شما می بایست این Query string های اضافی را از وب سایت خود حذف کنید و پارامتر های آنها را داخل نام فایل ها قرار دهید ( Encode the parameters into filenames ).

در صورتیکه از CMS ها معروف استفاده می کنید در سطح وب راهکارهای متنوعی برای حذف Query string ها در هرکدام از CMS ها ارائه شده است؛ در صورتیکه از طراحی وب سایت انحصاری استفاده می کنید می بایست این مورد را با طراح وب سایت خود مطرح سازید.

تصاویر وب سایت را بهینه سازی کنید

یکی از عاملان پشت پرده کندی سرعت یک وب سایت حجم و تعداد بالای تصاویر آن وب سایت است.

همانطور که می دانید مرورگر ابتدا تصاویر را از سرور دانلود نموده و سپس انها را به کاربر نشان می دهد. اگر محتوای مطالب وب سایت حجیم باشد، زمان بیشتری نیاز خواهد بود تا این اطلاعات دانلود شود و به العکس٫ هرچه بیشتر مرورگر زمان سپری نماید تا یک صفحه را بارگذاری کند، کاربر نیز بیشتر نا امید می شود و در نهایت شما نیز بازدیدکننده کمتری خواهید داشت. به همین سادگی!

برای جلوگیری از بروز موارد منفی از این قبیل شما می بایست تکنیک های مختلف بهینه سازی را پیش بگیرید.

فرمت تصاویر: برای اینکه به کاربران خود تجربه وب گردی سریعی ارائه دهید می بایست از JPEG، PNG یا GIF استفاده نمایید و همواره از TIFF یا BMP بپرهیزید. اگر کیفیت تصاویر بیشترین ارزش را برای شما دارد، می توانید از JPEG استفاده کنید و از PNG نیز می توانید برای لوگو وب سایت، ایکن ها و غیره استفاده کنید.

حجم و ابعاد تصاویر: جدای از تاثیر استفاده تصاویر متعدد، حجم آنها نیز می تواند منجر به نابود شدن تجربه وب گردی سریع بازدیدکنندگان شما شود. بنابراین پیشنهاد می شود حجم تصاویر  را کاهش دهید بدون اینکه کیفیت تصاویر را از بین ببرید. (در سطح وب ابزار های آنلاین و آفلاین متعددی برای انجام این کار وجود دارد)

اگر می خواهید تصاویر را برای دستگاه های همراه بهینه سازی کنید، پیشنهاد می شود با استفاده از کد های CSS3 اقدام به مخفی کردن بعضی از انها نمایید و یا از تصاویری استفاده کنید که Responsive می باشند و قابل نمایش در دستگاه های همراه باشند.

از CSS3 برای سفارش سازی و طرح دهی تصاویر استفاده کنید. ایجاد و استفاده از تصاویر مختلف جهت ایجاد طرحهایی مانند سایه و طیف باعث می شود که درخواست های متعددی برای HTTP ایجاد شود و سرعت بارگذاری را بسیار کاهش دهد. بنابراین به جای ایجاد فایل های متعدد اقدام به بهره برداری از قدرت CSS3 نموده و به تصاویر خود طرح دهید.

استفاده از CSS3 Image Sprite: چه در دستگاه های خانگی و چه در همراه، تصاویری هستند که به صورت معمول در صفحات وب یک وب سایت استفاده می شوند. به عنوان مثال به PNG های اشاره شده در گزارش GTmetrix زیر نگاه کنید.

نمونه هشدار عدم استفاده از CSS3 Sprites

نمونه هشدار دریافتی در نتایج وب سایت GTmetrix در رابطه با وجود عکس های متعدد با یک محتوا

اگر شما فایل ها متعددی را با یک محتوای تصویری استفاده کنید، تعداد درخواست های HTTP را افزایش می دهید که نهایتا منجربه افزایش سرعت بارگذاری می شود.بنابراین به جای استفاده از تصاویر متعدد با یک محتوای مشترک می توانید از CSS image sprite ها استفاده کنید تا آن تصاویر را به یک تصویر واحد تبدیل کرده و با این کار درخواست های HTTP را به عدد یک برسانید و در اخر باعث افزایش سرعت بارگذاری وب سایت خود شوید.

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

کش Static/Dynamic محتوا

هنگامیکه یک مرورگر وب سایتی را بارگذاری می کند، مرورگر درخواست های HTTP را به سرور ارسال می کند و هر مولفه به صورت مجزا دانلود می شود، این موارد شامل Style sheet ها، Script ها و غیره می شود. درخواست های HTTP متعدد و مولفه های آنها هر بار که وب سایت بازدید می شود دانلود می شوند، این امر برای کاربران نا امید کننده بوده و باعث می شود تا میزان رضایت انها از وب سایت کاهش یافته و به صفحات دیگر وب رجوع کنند.

یک راهکار ساده برای این مورد حیاتی، کش می باشد. اگر مرورگر قابلیت کش را فعال کرده باشد، مرورگر اقدام به دانلود همه محتوا در هر بازدید نمی کند و تنها کپی قسمت های کش شده (ذخیره شده) وب سایت (Static) را از بازدید اولیه بارگذاری می کند. این کار باعث می شود ثانیه هایی را ذخیره کنید که باعث شود تا بازدید کننده شما در وب سایت باقی مانده و نهایتا به سودآوری برسد.

در ادامه نتیجه یک بررسی در رابطه با کش و تاثیر آن در بارگذاری صفحات را می توانید مشاهده نمایید.

نمودار سرعت بارگذاری بدون کش

نمودار سرعت بارگذاری وب سایت Yahoo.com بدون کش

در تصویر فوق وب سایت yahoo.com با کش خالی باز شد و مشخص شد که وب سایت ۲٫۴ ثانیه زمان می برد تا بارگذاری شود و این امر به خاطر ۳۰ مولفه ای بود که می بایست دانلود می شدند.

نمودار سرعت بارگذاری وب سایت با کش

نمودار سرعت بارگذاری وب سایت Yahoo.com با فعال بودن قابلیت کش

در تصویر فوق همانطور که مشاهده می کنید پس از کش شدن محتوای وب سایت، سرعت بارگذاری کاهش بسیار چشمگیری داشته و سرعت بارگذاری به ۰٫۹ ثانیه رسیده است.

در سرویس های میزبانی اشتراکی ایران هاست این قابلیت به صورت کامل پشتیبانی شده و می توانید با قرار دهی قطعه کد زیر در web.config وب سایت خود این قابلیت را فعال کنید.

pagespeed06

هنگامیکه بحث در رابطه با وب سایت های Dynamic می باشد، یک تکنیک ساده کشینگ به تنهایی مشکل شما را رفع نمی کند (به علت تغییر محتوای وب سایت  به صورت پیاپی). در اینجا می توانیم از کش تکه ای استفاده کنیم.

در این تکنیک مولفه های کوچکتری از محتوای Dynamic کش می شوند تا سرعت را افزایش دهند. به عنوان مثال شما ممکن است یک هدر در وب سایت خود داشته باشید که برای همه بازدیدکنندگان ثابت می باشد، اما ممکن است محتوای داخلی داشته باشد که هر هفته تغییر کند. اینجا شما می توانید هدر را برای مدت کوتاهی کش نمایید. مثلا یک هفته.

فشرده سازی و کاهش حجم Javascript، CSS و فایل های HTML

شما ممکن است از قبل با تکنیک های فشرده سازی آشنا باشید. هرچه باشد شما از این روش برای کاهش حجم فایل های خود در سیستم خانگی استفاده نموده اید. تکنیکی مشابه در اینجا نیز قابل انجام است. به عنوان مثال شما می توانید از فشرده سازی G-Zip استفاده کنید. این فشرده سازی باعث کاهش حجم فایل های حجیم وب سایت شما شده و معمولا بین ۶۰ تا ۸۵ درصد از حجم فایل ها کاهش می یابد.

این قابلیت نیز به صورت کامل در سرویس های اشتراکی میزبانی وب ایران هاست پشتیبانی می شود. جهت فعال سازی این مورد کافیست قطعه کد زیر را در فایل web.config وب سایت خود قرار دهید.

pagespeed07

در کنار فشرده سازی شما می توانید کوچک سازی Sytlesheet و Javascript را نیز در نظر بگیرید. کوچک سازی عملیاتی می باشد که در آن کارکاتر های اضافه مانند Comments و غیره حذف می شوند و این امر باعث کاهش حجم مناسبی در فایل های شما می شود.با این کار هم می توانید سرعت بارگذاری وب سایت خود را بهینه سازی نمایید و هم تاثیر بسزایی در پهنای باند مصرفی وب سایت خود بگذارید. برای انجام این کار می توانید از JSMin یا YUI Compressor استفاده نمایید.

زمان جمع بندی فرارسیده

راهکارهایی که در بالا اشاره شد جزو راهکارهای حیاتی برای کاهش سرعت بارگذاری وب سایت می باشد. مولفه های دیگری هم هستند که در بارگذاری وب سایت شما تاثیر گذاشته و دستکاری انها باعث بهبود سرعت بارگذاری صفحات می شود. مانند محل قرار دهی script و Stylesheet، حذف Script های زائد و غیره. برای ارزیابی عملکرد وب سایت خود می توانید از وب سایت هایی مانند Google’s Pagespeed Insights  یا GTmetrix  استفاده کنید.

منتشر شده در بلاگ ایران هاست توسط: نصیری

ایران هاست، ارائه دهنده سرويس های ثبت دامنه، ميزباني وب، میزبانی ایمیل، میزبانی اختصاصی و سرورهای اختصاصی و مجازی مطابق با استانداردهای جهانی

شما ممکن است علاقه داشته باشید:

0 تفکر بر روی “۴ مولفه حیاتی در بهینه سازی سرعت بارگذاری وب سایت”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شبکه های مجازی ما

دسته بندی ها