سلام به همراهان همیشگی سئو راکت. ما اینجا هستیم تا یک بار برای همیشه، یکی از دغدغه های فنی اما ساده سئو یعنی لیزی لود (Lazy Loading) را با هم کالبدشکافی کنیم. اگر یادتان باشد، در آموزش های قبلی اشاره کردیم که بارگذاری تنبل یا همان لیزی لود، مثل یک چاقوی دو لبه است؛ اگر درست استفاده شود، سرعت سایت شما را به پرواز در می آورد و اگر اشتباه (مثلا دو بار روی یک تصویر) اعمال شود، باعث کندی و اختلال در رتبه بندی گوگل می شود.
اما سوال اصلی اینجاست: از کجا بفهمیم تصاویر سایت ما واقعا لیزی لود هستند یا نه؟ در این مقاله جامع، قدم به قدم یاد می گیریم که چطور بدون نیاز به دانش برنامه نویسی پیچیده، وضعیت تصاویر سایت خود را بررسی کنیم.
- بیشتر بخوانید: سئو عکس و ویدئو: افزایش سرعت سایت و رتبه در جستجوی تصویری.
لیزی لود چیست و چرا برای سئو ما حیاتی است؟
قبل از اینکه به سراغ آموزش برویم، بیایید خیلی ساده مرور کنیم که اصلا درباره چه چیزی حرف می زنیم. تصور کنید وارد یک فروشگاه بزرگ می شوید. اگر فروشنده تمام اجناس انبار را همان لحظه اول جلوی پای شما بریزد، احتمالا گیج می شوید و راه رفتن برایتان سخت می شود. لیزی لود دقیقا جلوی این اتفاق را در سایت می گیرد.
وقتی کاربر وارد صفحه شما می شود، مرورگر فقط تصاویری را لود می کند که کاربر در حال تماشای آن ها است. بقیه تصاویر زمانی بارگذاری می شوند که کاربر به سمت پایین اسکرول کند. این کار باعث می شود:
- سرعت لود اولیه صفحه (LCP) به شدت بالا برود.
- مصرف پهنای باند سرور و کاربر کاهش یابد.
- تجربه کاربری (UX) بهبود پیدا کند چون کاربر معطل لود شدن عکس های انتهای صفحه نمی ماند.
آموزش گام به گام: چطور بفهمیم تصاویر ما لیزی لود هستند؟
برای این کار نیاز به هیچ ابزار پولی یا عجیبی ندارید. فقط کافی است از مرورگر خود (گوگل کروم یا فایرفاکس) استفاده کنید. طبق مراحل زیر پیش بروید:
مرحله اول: باز کردن صفحه و انتخاب تصویر
ابتدا به صفحه ای از سایت خود بروید که می خواهید وضعیت آن را چک کنید. این صفحه می تواند یک مقاله بلاگ، صفحه محصول یا صفحه اصلی باشد. روی عکسی که مد نظرتان است راست کلیک کنید.
مرحله دوم: استفاده از ابزار Inspect
بعد از راست کلیک، یک منو برای شما باز می شود. در پایین ترین بخش این منو، گزینه ای به نام Inspect یا Inspect Element وجود دارد. روی آن کلیک کنید. با این کار، دنیای پشت پرده سایت (کدهای HTML) در سمت راست یا پایین صفحه برای شما نمایان می شود.
مرحله سوم: شکار کد طلایی
وقتی روی اینسپکت کلیک می کنید، مرورگر به صورت خودکار کدی را که مربوط به آن تصویر است برای شما هایلایت (رنگی) می کند. حالا کافی است در میان آن خط کد، به دنبال عبارت زیر بگردید:
loading=”lazy”
- اگر این کد را دیدید: تبریک می گوییم! تصویر شما در حالت لیزی لود قرار دارد و مرورگر متوجه شده که نباید آن را بلافاصله بارگذاری کند.
- اگر این کد را ندیدید: یعنی تصویر شما به صورت معمولی (Eager) بارگذاری می شود و تمام حجم آن در همان لحظه ورود کاربر به صفحه، از سرور فراخوانی می شود.
چرا باید صفحات مختلف را تست کنیم؟
یک اشتباه رایج میان وبمسترها این است که فقط یک تصویر از صفحه اصلی را چک می کنند و تصور می کنند کل سایت درست است. سئو راکت به شما پیشنهاد می کند که سیستماتیک عمل کنید. برای اینکه آمار دقیقی از وضعیت فنی سایت داشته باشید، موارد زیر را چک کنید:
۱. تصاویر مقالات بلاگ
معمولا سیستم های مدیریت محتوا مثل وردپرس، لیزی لود را به صورت خودکار روی تصاویر داخل متن اعمال می کنند. اما بهتر است دو یا سه تصویر از وسط و انتهای یک مقاله طولانی را چک کنید.
۲. تصاویر صفحات محصول
در صفحات فروشگاهی، سرعت حرف اول را می زند. بررسی کنید که آیا تصاویر گالری محصول یا تصاویری که در بخش “محصولات مرتبط” هستند، دارای ویژگی loading=”lazy” هستند یا خیر.
۳. تصاویر سنگین و بزرگ
بعضی از بنرهای تبلیغاتی یا اینفوگرافیک ها حجم بالایی دارند. چک کردن این موارد در اولویت است چون بیشترین تاثیر را روی سرعت سایت می گذارند.
هشدار مهم: تله بارگذاری دوگانه!
در ابتدای مطلب گفتیم که نباید یک تصویر دو بار لیزی لود شود. این اتفاق زمانی می افتد که شما هم از قابلیت پیش فرض وردپرس استفاده می کنید و هم یک افزونه جانبی (مثل موشک وردپرس یا افزونه های بهینه سازی تصویر) را فعال کرده اید که آن هم سعی می کند کد لیزی لود را اضافه کند.
اگر هنگام بررسی کدها متوجه شدید که عبارت loading=”lazy” دو بار تکرار شده یا کدهای متناقضی در تگ <img> وجود دارد، حتما یکی از دسترسی ها را قطع کنید. تداخل در کدهای لیزی لود می تواند باعث شود تصویر اصلا نمایش داده نشود یا با تاخیر خیلی زیاد ظاهر شود که برای سئو سم است!
یک استثنای حیاتی: تصاویر بالای صفحه (Above the Fold)
دقت کنید که طبق استانداردهای جدید گوگل، تصاویری که در دیدرس مستقیم کاربر (بدون اسکرول کردن) هستند، نباید لیزی لود باشند. برای اولین تصویر مقاله یا بنر اصلی هدر، بهتر است از ویژگی loading=”eager” یا کلا بدون کد لیزی لود استفاده کنید تا امتیاز LCP شما خراب نشود.
چک لیست سریع بررسی لیزی لود برای مدیران سایت
برای اینکه کارتان راحت شود، این چک لیست را همیشه در ذهن داشته باشید:
| بخش مورد بررسی | روش بررسی | علامت سلامت |
| تصاویر داخل محتوا | Inspect Element | وجود کد loading=”lazy” |
| تصویر شاخص (اول صفحه) | Inspect Element | عدم وجود لیزی لود (برای سرعت بیشتر) |
| تعداد تکرار کد | بررسی کل خط کد | فقط یک بار تکرار عبارت lazy |
| تنوع صفحات | بررسی محصول، بلاگ و صفحه اصلی | یکپارچگی عملکرد در کل سایت |
جمع بندی
شناسایی وضعیت لیزی لود تصاویر، اولین قدم برای بهینه سازی سرعت سایت است. یادتان باشد سئو یک مسیر داده محور است؛ پس به جای حدس زدن، همین حالا یکی از صفحات مهم سایت خود را باز کنید و با روشی که یاد گرفتیم (راست کلیک و Inspect)، وضعیت کدهای آن را ببینید. اگر تصاویر شما لیزی لود نیستند، وقت آن رسیده که با استفاده از افزونه ها یا کدهای برنامه نویسی، این سوخت جت را به موشک سئو خود اضافه کنید.
ما در سئو راکت همیشه تلاش می کنیم پیچیده ترین مفاهیم دنیای دیجیتال را به ساده ترین شکل ممکن برای شما باز کنیم تا بتوانید بدون سردرگمی، کسب و کار خود را رشد دهید.
به ماموریت فضایی سئو راکت بپیوندید!
اگر می خواهید سئو را از یک کابوس تاریک به یک مسیر روشن و پولساز تبدیل کنید، جای شما در خانواده بزرگ سئو راکت است. ما با ارائه جدیدترین اخبار، چک لیست های عملی و آموزش های تجربه محور، در کنار شما هستیم تا موشک کسب و کارتان را به اوج برسانید. همین حالا ما را دنبال کنید و از آموزش های رایگان و تخصصی ما برای اوج گرفتن در نتایج گوگل استفاده کنید.
