- درک هدف: تگ noscript در HTML برای تعیین محتوایی استفاده می‌شود که اگر مرورگر از جاوا اسکریپت پشتیبانی نمی‌کند یا جاوا اسکریپت غیرفعال است، باید نمایش داده شود.
- محتوا را شناسایی کنید: تعیین کنید که در صورت عدم پشتیبانی از جاوا اسکریپت، کدام بخش از صفحه وب شما باید به عنوان جایگزین نمایش داده شود.
- محتوا را در برچسب‌های noscript قرار دهید: محتوایی را که باید بدون جاوا اسکریپت نمایش داده شود در تگ‌های نواسکریپت باز و بسته قرار دهید.
- افزودن محتوای جایگزین: محتوای مورد نظر را بین تگ‌های Noscript باز و بسته قرار دهید. زمانی که جاوا اسکریپت پشتیبانی نمی شود، این محتوا نشان داده می شود.
- به محتوای جایگزین سبک دهید: از سبک های مناسب CSS استفاده کنید تا مطمئن شوید که محتوای جایگزین از نظر بصری جذاب است و به درستی قالب بندی شده است.
- تست سازگاری: با آزمایش صفحه وب خود در مرورگرها و دستگاه‌های مختلف، بررسی کنید که وقتی جاوا اسکریپت غیرفعال است یا پشتیبانی نمی‌شود، محتوای جایگزین به درستی نمایش داده می‌شود.
- دسترسی را در نظر بگیرید: اطمینان حاصل کنید که محتوای جایگزین برای کاربران دارای معلولیت قابل دسترسی است و دستورالعمل‌های دسترسی به وب مانند WAI-ARIA را رعایت کنید.
- ارائه تخریب برازنده: تکنیک‌های تخریب زیبا را اجرا کنید، که به صفحه وب شما اجازه می‌دهد همچنان کار کند و حتی اگر جاوا اسکریپت در دسترس نباشد، تجربه کاربری خوبی ارائه دهد.
24 نکته برای بهینه سازی:
- تصاویر را بهینه کنید: تصاویر را بدون افت کیفیت فشرده کنید، از تصاویر پاسخگو استفاده کنید و از تکنیک های بارگذاری تنبل استفاده کنید.
- کوچک کردن CSS و جاوا اسکریپت: برای کاهش اندازه فایل، کاراکترها، فضای خالی و نظرات غیر ضروری را از فایل‌های CSS و JS حذف کنید.
- فعال کردن فشرده سازی: برای کاهش حجم انتقال فایل، Gzip را فعال کنید یا فشرده سازی را در سرور خود کاهش دهید.
- استفاده از حافظه پنهان مرورگر: هدرهای مناسب کنترل حافظه پنهان را برای فعال کردن کش مرورگر منابع استاتیک تنظیم کنید.
- کاهش درخواست‌های HTTP: چندین فایل CSS یا JS را در یک فایل ترکیب کنید، از CSS sprite برای نمادها استفاده کنید و وابستگی‌های منابع خارجی را به حداقل برسانید.
- از شبکه‌های تحویل محتوا (CDN) استفاده کنید: برای بهبود سرعت تحویل و کاهش بار سرور، منابع استاتیک را از CDN ارائه کنید.
- بهینه سازی پرس و جوهای پایگاه داده: پرس و جوهای پایگاه داده را با نمایه سازی ستون هایی که اغلب به آنها دسترسی دارید، با استفاده از کش کوئری، و اجتناب از پرس و جوهای غیر ضروری، بهینه کنید.
- Caching را پیاده سازی کنید: از مکانیسم های کش سمت سرور مانند Memcached یا Redis برای ذخیره داده هایی که اغلب به آنها دسترسی دارید در حافظه استفاده کنید.
- به حداقل رساندن تغییر مسیرها: برای بهبود زمان بارگذاری صفحه، تعداد تغییر مسیرها را در وب سایت خود کاهش دهید.
- پشتیبانی HTTP/2 مرورگر را فعال کنید: برای بارگیری سریعتر از قابلیت های چندگانه سازی و فشرده سازی پروتکل HTTP/2 بهره ببرید.
- بهینه سازی محتوای بالای صفحه: برای ارائه تجربه کاربری اولیه بهتر، بارگذاری محتوای مهم را در اولویت قرار دهید.
- منابع غیر بحرانی بارگذاری تنبل: بارگیری منابع غیر بحرانی مانند تصاویر یا ویدیوها را تا زمانی که نیاز دارید به تعویق بیندازید.
- تحویل CSS را بهینه کنید: از رندر-انسداد CSS با داخل کردن سبک‌های بحرانی یا بارگیری ناهمزمان فایل‌های CSS اجتناب کنید.
- کاهش اجرای جاوا اسکریپت: استفاده از مسدود کردن جاوا اسکریپت را به حداقل برسانید، اسکریپت های غیر مهم را به تعویق بیندازید و کد جاوا اسکریپت را برای عملکرد بهینه کنید.
- منابع مسدودکننده رندر را حذف کنید: منابع مسدودکننده رندر را که رندر صفحه وب شما را به تاخیر می اندازند، شناسایی و حذف کنید.
- بهینه سازی فونت های وب: از زیرمجموعه های فونت استفاده کنید، فونت های وب را از قبل بارگذاری کنید یا به صورت ناهمزمان بارگیری کنید، و فونت های سیستم را به عنوان جایگزین در نظر بگیرید.
- از کتابخانه‌ها و چارچوب‌های کد کارآمد استفاده کنید: کتابخانه‌ها و چارچوب‌هایی سبک وزن انتخاب کنید که عملکرد را در اولویت قرار می‌دهند.
- بهینه سازی اسکریپت های شخص ثالث: تاثیر اسکریپت های شخص ثالث بر عملکرد را ارزیابی کنید و گزینه های بارگیری ناهمزمان یا بارگذاری تنبل را در نظر بگیرید.
- بهینه سازی زمان پاسخ سرور: زمان پاسخ سرور را با بهینه سازی پرس و جوهای پایگاه داده، استفاده از حافظه پنهان و در صورت لزوم ارتقاء سخت افزار بهبود دهید.
- نمایش معیارهای عملکرد: با استفاده از ابزارهایی مانند Google PageSpeed Insights، GTmetrix یا WebPageTest به طور مداوم بر عملکرد وب سایت نظارت کنید.
- اجرای AMP (صفحات موبایل شتاب‌دار): از AMP برای ایجاد صفحات وب با بارگذاری سریع موبایل و بهبود تجربه کاربر تلفن همراه استفاده کنید.
- بهینه سازی برای موبایل: مطمئن شوید که وب سایت شما واکنش گرا، سازگار با موبایل و بهینه سازی برای نمایشگرهای کوچکتر است.
- حذف کد و افزونه های استفاده نشده: به طور منظم کد، افزونه ها یا وابستگی هایی که می توانند بر عملکرد استفاده نشده را بررسی و حذف کنید.
- تست و بهینه سازی منظم: برای شناسایی تنگناها و بهبود سرعت بارگذاری، به طور مداوم عملکرد وب سایت خود را آزمایش و بهینه کنید.
4 مورد از تجربیات افراد دیگر:
- مورد ۱: سفر بهینه‌سازی وب‌سایت شرکت X: شرکت X چندین تکنیک بهینه‌سازی از جمله فشرده‌سازی تصویر، کوچک‌سازی فایل‌های CSS و JS و استفاده از حافظه پنهان مرورگر را پیاده‌سازی کرد. این تلاش‌ها منجر به بهبود 30 درصدی زمان بارگذاری صفحه شد که منجر به افزایش تعامل کاربر و نرخ تبدیل شد.
- مورد ۲: موفقیت در بهینه‌سازی Blogger Y: Blogger Y وب‌سایت خود را با کاهش درخواست‌های HTTP، استفاده از CDN، و اجرای بارگیری تنبل برای تصاویر، بهینه کرد. در نتیجه، امتیاز عملکرد وب سایت آنها به طور قابل توجهی بهبود یافت که منجر به رتبه بندی بالاتر موتورهای جستجو و بهبود تجربه کاربر شد.
- مورد 3: افزایش عملکرد فروشگاه تجارت الکترونیکی Z: فروشگاه Z تجارت الکترونیک پرس و جوهای پایگاه داده خود را بهینه کرد، مکانیسم های کش را پیاده سازی کرد و زمان پاسخ سرور را بهینه کرد. این منجر به سرعت بارگذاری صفحه، کاهش نرخ رها شدن سبد خرید و افزایش فروش کلی شد.
- مورد 4: بهینه سازی جاوا اسکریپت برنامه نویس A: برنامه نویس A کد جاوا اسکریپت خود را با حذف اسکریپت های مسدودکننده رندر، به تعویق انداختن اسکریپت های غیر بحرانی و بهینه سازی اجرای اسکریپت بهینه کرد. این منجر به تجربه کاربری روان‌تر، کاهش زمان بارگذاری صفحه و بهبود رتبه‌بندی موتورهای جستجو شد.
