ویجت قیمت، سایت را کند می‌کند؟ بهینه‌سازی سرعت و Core Web Vitals با ویجت سبک قیمت ارز
ویجت سبک قیمت ارز و سرعت سایت: اثر اسکریپت قیمت بر LCP، CLS و INP، تفاوت iframe و رندر در صفحه، بارگذاری async، رزرو ارتفاع، کش و اندازه‌گیری با PageSpeed.
- ویجت سنگین از سه راه سایت را کند می‌کند: اسکریپت همگام که نمایش صفحه را متوقف می‌کند، iframe و جابه‌جایی صفحه پس از بارگذاری.
- ویجت سبک با async بارگذاری می‌شود، داخل صفحه رندر می‌شود، ارتفاع ثابت دارد و داده را از مسیر کششده می‌خواند.
- قبل و بعد از نصب هر ویجت، صفحه را با PageSpeed Insights و گزارش Core Web Vitals سرچ کنسول بسنجید.
شکایت رایج مدیران سایت این است: از وقتی ویجت قیمت را گذاشتیم، نمره PageSpeed افتاد. این اتفاق در ذات نمایش قیمت نیست، نتیجه انتخاب ویجت نامناسب یا جای‌گذاری نادرست است. در این مقاله توضیح می‌دهیم یک ویجت سبک قیمت ارز چه ویژگیهایی دارد و چطور اثر هر ویجتی را روی سرعت بسنجید.
async بارگذاری کنید، از iframe پرهیز کنید، برای ظرف ویجت ارتفاع ثابت بگذارید تا صفحه جابه‌جا نشود، و فقط در صفحه‌هایی که لازم است قرار دهید. قبل و بعد را با PageSpeed Insights بسنجید. ویجت EZRate این ویژگی‌ها را به‌صورت پیش‌فرض دارد.این مقاله بخشی از راهنمای ویجت های نمایش قیمت دلار و طلا است.
Core Web Vitals در یک نگاه
| معیار | چه می‌سنجد | ویجت چطور خرابش می‌کند |
|---|---|---|
| LCP | زمان نمایش بزرگ‌ترین بخش صفحه | اسکریپت همگام در هدر که نمایش را متوقف می‌کند |
| CLS | جابه‌جایی ناگهانی محتوا | ویجتی که بعد از بارگذاری ارتفاع می‌گیرد و متن را پایین می‌برد |
| INP | سرعت پاسخ صفحه به کلیک و تایپ | اسکریپت سنگینی که پردازنده را مشغول می‌کند |
گوگل این سه معیار را بخشی از تجربه صفحه می‌داند. اثرشان بر رتبه در مقایسه با کیفیت محتوا کوچک‌تر است، اما بر تجربه واقعی کاربر و نرخ ترک صفحه اثر مستقیم دارند.
سه علت اصلی کندی
۱. اسکریپت همگام
تگ <script src="…"> بدون async یا defer، مرورگر را مجبور می‌کند نمایش صفحه را متوقف کند تا اسکریپت دانلود و اجرا شود. اگر سرور ارائه‌دهنده ویجت کند باشد یا در دسترس نباشد، کل صفحه شما معطل می‌ماند.
۲. iframe
iframe یک صفحه وب کامل دیگر داخل صفحه شماست، با فونت‌ها، اسکریپت‌ها و استایل‌های خودش. هزینه بارگذاری آن از یک ویجت درون‌صفحه‌ای بسیار بیشتر است و محتوای آن هم جزو صفحه شما حساب نمی‌شود.
۳. فضای رزرونشده
ویجتی که با ارتفاع صفر شروع می‌شود و بعد از رسیدن داده بزرگ می‌شود، محتوای زیرش را پایین می‌برد. کاربر که داشت روی لینکی کلیک می‌کرد، روی چیز دیگری کلیک می‌کند، این همان CLS است.
ویژگی‌های یک ویجت سبک
- بارگذاری async: صفحه بدون انتظار برای ویجت نمایش داده می‌شود.
- رندر در خود صفحه، بدون iframe: سبک‌تر و قابل خواندن برای موتور جستجو.
- ارتفاع ثابت یا رزروشده: بدون جابه‌جایی محتوا.
- داده کششده: درخواست داده به مسیری می‌رود که در CDN کش است و سریع پاسخ می‌دهد.
- بدون وابستگی سنگین: بدون کتابخانه‌های بزرگ جاوااسکریپت و فونت‌های اضافه.
- یک اسکریپت برای چند ویجت: اگر چند ویجت در صفحه است، اسکریپت فقط یک‌بار بارگذاری شود.
ویجت EZRate همه این ویژگی‌ها را دارد: با async بارگذاری می‌شود، بدون iframe داخل صفحه رندر می‌شود، داده را از مسیری می‌خواند که ۳۰ ثانیه کش می‌شود و هر ۶۰ ثانیه بدون رفرش صفحه تازه می‌شود. افزونه وردپرس هم داده را در سرور خود سایت کش می‌کند.
رزرو ارتفاع در عمل
<!-- ظرف ویجت کارت‌ها با حداقل ارتفاع رزروشده -->
<div class="ezrate-widget" data-ezrate="WIDGET_ID" style="min-height:160px"></div>مقدار min-height را برابر ارتفاع واقعی ویجت در صفحهٔ خودتان بگذارید (یک‌بار با Inspect اندازه بگیرید). نوار ثابت و زیرنویس متحرک ارتفاع ثابت ۴۰ پیکسل دارند.
اندازه‌گیری، نه حدس
- صفحه را بدون ویجت در PageSpeed Insights بسنجید و نمره‌ها را یادداشت کنید (حالت موبایل).
- ویجت را اضافه کنید و دوباره بسنجید. سه بار تکرار کنید و میانگین بگیرید نمره آزمایشگاهی نوسان دارد.
- بعد از ۲۸ روز، گزارش Core Web Vitals در سرچ کنسول را ببینید این داده واقعی کاربران است.
افزونه‌های بهینه‌سازی و ویجت
افزونه‌هایی مثل WP Rocket، LiteSpeed Cache یا Autoptimize گاهی اسکریپت‌ها را ترکیب یا اجرایشان را تا تعامل کاربر به تخیر می‌اندازند. برای ویجت قیمت، تخیر تا تعامل یعنی کاربر تا اسکرول یا کلیک نکند قیمت را نمی‌بیند. آدرس widget.js را از ترکیب و تاخیر مستثنا کنید، چون خودش async است، به سرعت آسیب نمی‌زند.
اگر این افزونه ها را در سایت خود فعال دارید و در نمایش ویجت تاخیر و یا تاثیر ایجاد میکنند، می توانید تگ های js و css ویجت را از داخل افزونه مستثنا قرار دهید.
برای اثر ویجت بر سئو فراتر از سرعت، مطلب ویجت قیمت لحظه‌ای و سئو را مطالعه کنید.
نظرات (۰)
نظرها پس از تأیید نمایش داده می‌شوند؛ برای ارسال، ورود به حساب لازم است.
