تکنولوژی Native Lazy Loading گوگل و استفاده از آن در وردپرس

تکنولوژی Native Lazy Loading گوگل

Native Lazy Loading تکنولوژی جدید گوگل کروم است که از نسخه ۷۶ به بعد به این مرورگر اضافه شده. شما می‌توانید با یک افزونه رایگان وردپرسی این قابلیت را به سایت خود اضافه کنید.

در این ویدئو می‌خواهم در رابطه با نسل جدیدی از Lazy Loading صحبت کنم، همه ما در رابطه با Lazy Loading یک سری اطلاعات داریم و میدانیم که به معنی لود تنبل المان‌ها که معمولاً شامل ویدئوها یا تصاویر وب‌سایت ما می‌شود، است.

زمانی که این قابلیت روی یک وب‌سایت قرار داشته باشد، وقتی شما به سمت پایین اسکرول می‌کنید، تصاویر به مرور برای شما لود می‌شود، چیزی که ما مثلاً در نتایج تصاویر گوگل هم می‌بینیم، پس گوگل هم از این تکنولوژی استفاده کرده است.

چرا از Lazy Loading استفاده می‌کنیم

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

وقتی ما سایت خود را در GTMetrix یا Page Speed Test گوگل که دو تا ابزار تست وب‌سایت هستند، تست می‌کنیم، بعضاً ارور Lazy Loading را می‌بینیم. اما توسعه‌دهندگان گوگل، نسل جدید از Lazy Loading را به اسم Native Lazy Loading ارائه کردند.

Native Lazy Loading چیست

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

خب گفتند که چرا خودمان Lazy Loading را Browser Level نکنیم، یعنی در مرورگر کاربر، سیستم لود تنبل تصاویر وجود داشته باشد و به‌عنوان‌مثال، خود گوگل کروم بتواند Lazy Loading تصاویر را انجام دهد؛ فقط کافی است کاربر یک بار تگ loading=”lazy” به وب‌سایتش اضافه کند.

اگر یک وب‌سایت HTML دارید و وب‌سایت‌تان وردپرسی نیست، در img باید یک تگ به نام Lazy اضافه کنید. اگر کاربران شما مرورگر گوگل کروم 76 به بالا را داشته باشند و شما هم این تگ را به بخش IMG وب‌سایت خود اضافه کنید، می‌توانید قابلیت Lazy Loading را داشته باشید.

البته در حال حاضر فقط گوگل کروم و مرورگری به اسم Brave این قابلیت را دارد و فعلاً نباید انتظار داشته باشیم که لود تنبل سایت روی سافاری و فایرفاکس هم بدون مشکل کار کند.

فعال‌سازی Native Lazyload در وردپرس

برای فعال کردن این قابلیت در سایت‌های HTML شما باید تگ “Loading = “Lazy استفاده کنید. در سایت‌های وردپرسی نمی‌شود این تگ را در تمامی تصاویر سایت به‌صورت دستی اضافه کرد؛ پس کاری که می‌شود انجام داد این است که پلاگین Native Lazyload را روی وب‌سایت نصب کنیم و با نصب این افزونه، تگ‌های لود تنبل تصاویر، روی تصاویر سایت اضافه می‌شود و شما می‌توانید بدون مشکل قابلیت Lazy Loading گوگل کروم را روی سایت خود استفاده کنید.

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

موفق و پیروز باشید. 🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...