تکنیک‌های برنامه‌نویسی برای بهبود سرعت و بهبود عملکرد فروشگاه‌های آنلاین

طبق آمارهای رسمی از سایت‌های معتبر دنیا کاربران امروزی به دنبال تجربه کاربری سریع و روان هستند و همچنین موتور‌های جستجو مانند گوگل به سرعت بارگذاری صفحات وب اهمیت ویژه‌ای می‌دهند. مطالعات نشان داده که تقریبا نیمی از کاربران انتظار دارند که صفحات وب زیر 2 ثانیه باز شود. در این نوشته من سعی می‌کنم تا شما را با برخی بهبود‌ها در سایت آشنا کنم تا بتوانید سرعت و عملکرد فروشگاه آنلاین خود را به طور قابل‌ توجهی افزایش دهید و تجربه کاربری و رتبه موتور جستجو خود را بهبود ببخشید.

تکنیک‌های برنامه‌نویسی

1. انتخاب پلتفرم مناسب برای توسعه‌پذیر بودن سایت
2. بهینه‌سازی تصاویر
3. انتخاب درست تکنولوژی‌های برنامه‌نویسی
4. سرور با کیفیت
5. استفاده از ابزارهای سنجش خطا

انتخاب پلتفرم مناسب

بهینه‌سازی تصاویر

فشرده‌سازی تصاویر و استفاده از فرمت‌های جدیدتر مانند WebP می‌تواند به طور قابل‌ توجهی زمان بارگذاری صفحات را کاهش دهد. در سایت‌های معتبر فروشگاهی مدیریت عکس‌ها و بهینه‌سازی آن یک پوزیشن در شرکت می‌باشد

• فشرده‌سازی تصاویر: با استفاده از ابزارهای آنلاین مانند TinyPNG یا Compressor.io می‌توانید تصاویر خود را بدون افت کیفیت فشرده کنید.
• استفاده از فرمت WebP: فرمت WebP تصاویر را با کیفیت بالا و حجم کم ارائه می‌دهد.
• قاب استاندارد
• کنتراست و نور مناسب
• طول و عرض تعریف شده
• تصاویر خود را alt text مناسب تعریف کنید تا در جستجو‌ها قابل شناسایی باشد.
• از Lazy Loading برای بارگذاری تصاویر استفاده شود.

انتخاب درست تکنولوژی‌های برنامه‌نویسی

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

سرور با کیفیت

معمولا در شرایط کشور ما سرورهای داخلی سرعت و کیفیت بهتری را نسبت به سرورهای خارجی ارائه می‌دهند که همه ما می‌دانیم دلیل اصلی این مورد چیست.

 استفاده از ابزارهای سنجش

استفاده از ابزارهای سنجش مانند Google Analytics می‌تواند به شما کمک کند تا سرعت و عملکرد فروشگاه خود را به طور دقیق رصد کنید. برنامه‌های مثل Crazy Egg و Hotjar  دقیقا نشان می‌دهند که کاربر در چه سطری از صفحه توقف کرده و کلیک کرده و اسکرول کرده است.

انتخاب درست تکنولوژی‌های برنامه‌نویسی

انتخاب درست سرور

آپ تایم بالا – پشتیبانی 24 ساعته – بکاپ‌گیری – امنیت – فایروال

انتخاب درست بک‌اند و کانفیگ‌ها

• استفاده از Balancer Load: ترافیک را بین چندین سرور توزیع می‌کند.
• استفاده از Auto Scaling: تعداد سرورها را به طور خودکار تعیین می‌کند.
• حافظه پنهان سرور: ذخیره‌سازی محتوای ایستا در حافظه پنهان سرور مانند Redis.
• استفاده از ابزارهای linting.
• سمت سرور، عملکرد و پاسخگویی سیستم به درخواست‌های کاربران نقش بسیار حیاتی دارد. اگر مشکلی در تامین منابع انسانی وجود نداشته باشد زبان‌های زیر بهترین پاسخگویی را دارند:
  • Golang
  • ASP.NET Core
  • NodeJs
  • Python
  • php

انتخاب درست فرانت

در فرانت دو بحث اصلی وجود دارد. رندر در کجا صورت پذیرد؟ چه فریمورک یا کتابخانه‌ای بهتر است؟

مفهوم SSR چیست؟

SSR مخفف Server-Side Rendering است و به توانایی یک وب‌اپلیکیشن اشاره دارد که به جای این‌که در مرورگر رندر شود، روی سرور رندر شود. در SSR، سرور مسئول رندر کردن صفحه است و زمانی که درخواستی از سمت گیرنده دریافت می‌شود، صفحه را به طور کامل رندر می‌کند. این به معنای این است که سمت سرور، قبل از ارسال به گیرنده، صفحه را بصورت کامل رندر کرده است. اگر محتوای صفحه به داده‌های پایگاه داده نیاز داشته باشد، سرور این کار را انجام داده و سپس داده‌ها را به صفحه رندر شده ارائه می‌دهد. سپس صفحه را به عنوان پاسخ به گیرنده ارسال می‌کند. این روش اطمینان می‌دهد که صفحه‌ای که به گیرنده ارسال می‌شود، کامل رندر شده و حاوی داده‌های مورد نیاز است.

مفهوم CSR چیست؟

CSR مخفف Client-Side Rendering است و به طور کلی به مقابل SSR است. در CSR، صفحه توسط مرورگر گیرنده رندر می‌شود، نه سمت سرور. هنگامی که درخواست از سرور دریافت می‌شود، صفحه رندر نمی‌شود. در عوض، سرور یک صفحه اولیه ارسال می‌کند که به عنوان چارچوب صفحه عمل می‌کند، همراه با یک فایل جاوا اسکریپت.

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

تفاوت SSR و CSR

تفاوت اصلی بین CSR و SSR در محل رندرگیری صفحه است. در SSR، صفحه در سمت سرور رندر می‌شود در حالی که در CSR، صفحه در سمت گیرنده رندر می‌شود. با استفاده از روش SSR، هر بار که کاربر درخواستی ارسال می‌کند، مسیریابی بدون نیاز به رفرش صفحه انجام می‌شود و صفحه جدید به کاربر نمایش داده می‌شود.

در وب‌سایت خود از SSR استفاده کنیم یا CSR؟

بررسی پارامترهای یک وب‌سایت می‌تواند در تصمیم‌گیری بین روش SSR و CSR به شما کمک کند. اما ضروریست که در نظر داشته باشید معیارهای مختلفی برای هر وب‌سایت در نظر گرفته شوند و تنها اعتماد به این پارامترها، تصمیم‌گیری بهتر را نمی‌سازد.

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

اما اگر وب‌سایت پر ترافیکی دارید و تعامل با کاربر بیشتر از سئو برای شما اهمیت دارد و با ترافیک بالا می‌توانید جایگاه خود را در موتورهای جستجو حفظ کنید، بهتر است از CSR استفاده کنید.

استفاده از CSR برای اپلیکیشن‌های تک صفحه‌ای و وب‌سایت‌هایی که نیاز به استفاده دائم از پایگاه داده دارند گزینه بسیار مناسبی است.

یک نکته جالب در مورد React SSR (Server-Side Rendering) این است که این روش با سیستم‌های مانند WordPress ، Laravel ، ASP.NET و غیره که در گذشته استفاده می‌شدند، کاملاً متفاوت است. وقتی یک وب‌اپلیکیشن به صورت CSR یا SPA (Single Page Application) نوشته می‌شود، موتورهای جستجوی مانند گوگل وب کرالر فقط یک برگه HTML خالی را مشاهده می‌کنند. در SSR، صفحه ابتدایی به کاربران برای بارگیری ارسال می‌شود و سپس React به عنوان یک کتابخانه JavaScript بر روی سرور اجرا می‌شود تا محتوا و تجربه کاربری را تولید کند. این روش به موتورهای جستجو محتوای قابل قبولی ارائه می‌دهد و به آن‌ها امکان می‌دهد تا صفحه‌های وب را به درستی فهرست کنند و در نتایج جستجو نمایش داده شوند.

رندر سمت سرور در React  توسط Node Js انجام می‌شود و این فرایند هیچ ارتباطی به بک‌اند پروژه ندارد (بک‌اند می‌تواند هر چیزی باشد که کاملاً بک‌اند و فرانت‌اند مستقل از هم هستند و فقط در مواقع نیاز باهم ارتباط می‌گیرند)

فریمورک‌ها در فرانت

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

vue در جایگاه دوم قرار دارد که شباهت‌های منطقی با ری‌اکت دارد.

angular با 20 درصد بازار در جایگاه بعدی قرار دارد و پشتیبانی تیم گوگل را دارد.

در مقام‌های بعدی Svelte , Preact  و سایر رقبا وجود داردند که هر کدام به نوعی دارای مزایا و معایبی هستند و به سرعت در حال رشد بین برنامه نویسان می‌باشند.

نکته اصلی در انتخاب این فریمورک‌ها وجود نیروی متبحر است و عملا تفاوت چشمگیری با هم ندارند.

انتخاب درست دیتابیس

• ساختار مناسب پایگاه داده: اطلاعات را به طور موثر در جداول مختلف ذخیره کنید.
• شاخص‌گذاری: بهبود سرعت جستجو در پایگاه داده
• کوئری‌های بهینه: از کوئری‌های SQL بهینه برای بازیابی اطلاعات استفاده کنید.