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

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

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

اهمیت زمان بارگذاری وب سایت

 امروزه کاربران برای وبسایت هایی با سرعت بارگذاری ضعیف یا عملکرد ناکافی، صبر ندارند.

در مطالعه ای که توسط Akamai انجام شده است ، حدود نیمی از کاربران وب انتظار دارند که سایتی در مدت زمان 2 ثانیه یا کمتر بارگیری شود. اگر ظرف 3 ثانیه بارگیری نشود، این کاربران تمایل به ترک سایت دارند.

یک آمار حتی نگران کننده تر این است که 64٪ از خریداران که از تجربه و زمان بارگیری یک فروشگاه اینترنتی ناراضی هستند، کار خود را در سایت دیگری پیگیری می کنند.

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

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

اجازه دهید نگاهی به راه های بهینه سازی وبسایت خود برای بهترین عملکرد ممکن بیندازیم.

1. درخواست های HTTP را به حداقل برسانید

HTTP  پروتکل انتقال (Hypertext) هر زمان که یک مرورگر یک فایل، صفحه یا تصویر را از یک سرور وب بدست می آورد، درخواست می دهد.

طبق گفته های یاهو، این درخواست ها حدود 80٪ از زمان بارگذاری یک صفحه را در بر می گیرد. مرورگر همچنین درخواست ها را بین 4-8 اتصال همزمان در هر دامنه محدود می کند، به این معنی که بارگذاری 30+ درخواست بطور همزمان یک انتخاب نیست.

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

چگونه در خواست های HTTP را کاهش دهیم؟

اگرچه به نظر می رسد طراحی صفحات شما با ساده نگه داشتن آنها محدود می شود، چندین تاکتیک وجود دارد که می توانید برای کاهش درخواست های HTTP برای رهایی مرورگر خود استفاده کنید.

ترکیب پرونده های  CSS / JS به جای مجبور کردن مرورگر برای بازیابی چندین فایل CSS یا Javascript برای بارگیری، سعی کنید فایل های CSS خود را در یک فایل بزرگتر ترکیب کنید(برای فایل های JS نیز به همین شکل). اگرچه اگر stylesheets و scripts  شما در صفحه ای نسبت به صفحه دیگر متفاوت باشد، این می تواند چالش برانگیز باشد، اما مدیریت ترکیب آنها در نهایت باعث کمک به زمان بارگیری شما خواهد شد.

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

تعداد تصاویری را که استفاده می کنید کاهش دهید – اگر می بینید بعضی از صفحات شما بخاطر عکس ها حجم زیادی دارند، سعی کنید برخی از آنها را حذف کنید، به خصوص اگر اندازه فایل آنها بزرگ باشد. اینکار ممکن است نه تنها به کاهش درخواست HTTP تصویر کمک کند بلکه ممکن است UX شما را با از بین بردن تصاویر نامربوط که با محتوای متنی شما مطابقت ندارند، بهبود بخشد.

CSS sprites  – در صورت کاربرد، ترکیب تصاویر با استفاده نسبتاً زیاد از وبسایت خود در یک صفحه برگه ای و دسترسی به تصاویر با استفاده از CSS پس زمینه-تصویر و موقعیت پس زمینه مانع مرورگر شما می شود که مرتباً سعی کند چندین بار تصاویر مختلف را بارگیری کند. به این ترتیب، مرورگر تنها موردی را بازیابی می کند که می توانید چندین بار در صفحه با قرار دادن صحیح تصویر مناسب برای مشاهده در هر منطقه از صفحه، دوباره بازیابی کنید.

2. از CDN ها استفاده کنید و اسکریپت ها یا فایل های استفاده نشده را حذف کنید

احتمالاً بسیاری از کاربران شما در نزدیکی وب سرور شما نخواهند بود.

کاهش این فاصله با پخش محتوا در سرورهای پراکنده جغرافیایی گزینه مناسبی نیست و اجرای آن کمی پیچیده است.

اینجاست که یک شبکه تحویل محتوا (CDN) وارد می شود. CDN مجموعه ای از سرورهای وب است که در چندین مکان مختلف توزیع می شوند تا محتوا بتواند با کارایی بیشتری به کاربران تحویل داده شود. CDN ها معمولاً برای محتوای استاتیک یا فایل هایی استفاده می شوند که پس برای بارگذاری باید یکبار فراخوانی شوند.

سرورها بر اساس اندازه گیری کاربر از نزدیکی شبکه انتخاب می شوند. به عنوان مثال، سرور با سریعترین زمان پاسخگویی و یا کمترین هاپ شبکه انتخاب شده است.

شرکت های بزرگتر تمایل دارند CDN خود را داشته باشند، در حالی که کسب و کار های متوسط از ارائه دهنده CDN مانند ابر آروان استفاده می کنند.

شرکت های کوچکتر ممکن است CDN را غیر ضروری یا خارج از بودجه خود بدانند، بنابراین با استفاده از وبسایت هایی مانند CNDjs که دارای یک کتابخانه از فایلها و فریم ورک های JS و CSS است می تواند به شما کمک کند ضمن افزایش زمان بارگذاری، مانع از وجود فایل های خاص روی سرورهای خود شوید.

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

در حالی که ساده ترین (در عین حال زمانبر ترین) این است که برنامه نویس شما وبسایت را مرور کند و هر صفحه را بررسی کند، چند ابزار مانند UnCSS وجود دارد که می توانندstyle  های بلااستفاده را از وبسایت شما حذف کرده و اندازه فایل CSS را کاهش دهند.

3. حافظه پنهان مرورگر (Browser caching)

حافظه پنهان مرورگر به دارایی های (assets ) وبسایت شما امکان می دهد یک بار در حافظه پنهان یا یک فضای ذخیره موقت در هارد دیسک شما بارگیری شوند. این فایل ها اکنون به صورت محلی در سیستم شما ذخیره می شوند، این امکان را می دهد که بارگذاری های صفحه بعدی با سرعت بیشتری انجام شود.

Tenni Theurer، توضیح می دهد که 40-60٪ بازدید کنندگان روزانه سایت شما با یک حافظه پنهان خالی وارد می شوند. بنابراین وقتی کاربران بازدید می کنند، باید آن را بسازید تا در اولین صفحه که بارگذاری را به اندازه کافی سریع مشاهده می کند، به ناچار از طریق صفحات دیگر وبسایت شما (با سرعت بیشتری) ادامه یابد.

دارایی های استاتیک حداقل یک هفته طول عمر دارند، در حالی که third party items مانند ابزارک (widgets) یا تبلیغات فقط یک روز طول می کشد.

CSS ، JS، تصاویر، و فایل های رسانه ای باید یک هفته انقضا داشته باشند.

در اینجا می توانید اطلاعات بیشتری درباره فعال کردن حافظه پنهان کسب کنید.

4. فشرده سازی تصاویر و بهینه سازی فایل ها

در حال حاضر تصاویر 60٪ از میانگین بایت های بارگیری شده در هر صفحه که حدود 1504KB است را می گیرند. با مقایسه سایر دارایی های صفحات مانند اسکریپت ها (399(KB ،  CSS (45 (KB و فیلم (294(KB ، تصاویر مقدار زیادی درخواست HTTP ارسال می کنند.

 همانطور که در ابتدا ذکر کردم، هرگونه دارایی را که فکر می کنید به آنها نیازی ندارید، حذف کنید. این شامل کتابخانه های آیکون هایی است که شما فقط از دو تا از آن سه فونت اضافی استفاده می کنید که فکر می کنید ممکن است از آنها استفاده کنید اما نکرده اید، و تصاویری که شاید با CSS جایگزین شوند (مانند زمینه های رنگی یا گردیانت ها).

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

اگر خود را در حال استفاده از تصاویر بزرگ، آنها را از طریق یک نرم افزار بهینه سازی مانند Compressor.io یا Image Optimizer اجرا کنید. تمام تصاویر زیر 150KB باشد، هیچ چیزی بالاتر از 1920px در عرض نباشد، در سطح کیفیت average​​/ medium​​/ 72dpi .

برای file extensions از این به عنوان فرمول اساسی استفاده کنید:

SVG برای تصاویر vector  که می خواهید جزئیات بالایی از آن داشته باشید مناسب است.

برای برخی از آیکون ها می توانید از کتابخانه هایی مانند FontAwesome برای ارائه نماد گرافیکی بجای تک عکس استفاده کنید.

از PNG باید برای تصویرهایی که به شما در پس زمینه شفاف نیاز دارید استفاده کنید،

JPG برای عکسها یا هر چیز دیگری که جزئیات دقیق از اهمیت کمتری برخوردار باشد، بهترین گزینه است.

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


43 پاسخ
  1. online pharmacy
    online pharmacy گفته:

    I’ve been surfing online more than three hours these
    days, yet I by no means discovered any interesting article like yours.
    It’s lovely worth sufficient for me. Personally, if all website owners and bloggers made good content material as
    you did, the web will probably be much more helpful than ever before.
    online pharmacy https://pharmaciescegs.com/ rx pharmacy

    پاسخ
  2. 바카라사이트
    바카라사이트 گفته:

    I was wondering if you ever thought of changing the structure of your site?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people
    could connect with it better. Youve got an awful lot
    of text for only having one or two images. Maybe you could space it out better?

    پاسخ
  3. viagra for women
    viagra for women گفته:

    Eating is not a problem but he is listless, hides behind chairs, will no longer
    do any of the many tricks he knows and is pooping and peeing in the house
    even though he has access to outside. buyhdpillvia.com Eating is not a problem but he is listless,
    hides behind chairs, will no longer do any of the many tricks he knows and is pooping and peeing in the house even though he has access to outside.

    پاسخ
  4. is viagra safe
    is viagra safe گفته:

    Sign up now Treatments and drugsBy Mayo Clinic Staff Controlling Your Arthritis Subscribe to our Controlling Your Arthritis e-newsletter
    for tips to manage arthritis. http://ltdviagragogo.com/ Sign up now Treatments and drugsBy Mayo Clinic Staff
    Controlling Your Arthritis Subscribe to our Controlling Your Arthritis
    e-newsletter for tips to manage arthritis.

    پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

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

*

code