اگر در صفحات سايت وردپرس خود تعداد زيادي تصوير دارد، احتمال اينكه دير بارگذاري شوند و زمان لود صفحه بالا رود، بسيار زياد است. اين امر نه تنها تجربه كاربري بدي ايجاد كرده و كاربران به سرعت سايت شما را ترك مي كنند بلكه براي سئو سايت وردپرس شما هم امتياز منفي محسوب مي شود. مطالعات نشان مي دهد كه اگر زمان بارگذاري سايت بيش از 3 ثانيه طول بكشد، 40% افراد سايت شما را ترك مي كنند. خوشبختانه براي رفع اين مشكل راه هاي زيادي وجود دارد. يكي از بهترين راه ها استفاده از تكنيك Lazy Load يا بارگذاري تنبل تصاوير و ويدئوها است. در اين مقاله بهترين افزونه هاي Lazy Load وردپرس را معرفي مي كنيم. همچنين در مورد اينكه چرا استفاده از ويژگي Lazy Load براي وب سايت داراي اهميت است و استفاده از آن چه فايده هايي دارد توضيح مي دهيم.
براي بهتر فهميدن اين مطلب به دوره جي تي متريكس سايت ما سر بزنيد.
بارگذاري تنبل تصاوير (Images Lazy Loading) يك تكنيك بهينه سازي صفحات و بهبود تجربه كاربري است. اين تكنيك، تصاوير رو تنها زماني نشون ميده كه به اونها نياز داشته باشيم. به طور ميانگين، بيشتر از 60% حجم خروجي وبسايت ها رو تصاوير تشكيل دادند (منبع) و اين موضوع -وقتي تعداد و حجم تصاوير زياد و سنگين باشند- در سرعت لود، پهناي باند و رضايت كاربران شما تأثير منفي خواهد گذاشت. اينجاست كه بازهم قدرت تنبلي اثبات ميشه و اين سبك بارگذاري با يك منطق ساده “نمايش تصاوير -> در صورتي كه براي كاربر قابل مشاهده باشد” يا به عبارت ديگه “نمايش تصاوير -> تنها زماني كه در اسكرول صفحه قرار بگيرد” اون شعر برو كار ميكن سعدي رو له ميكنه. خخخخ
* نكته: بارگذاري تنبل چند عيب كوچيك هم داره! به عنوان مثال: در بيشتر افزونه هاي Lazy Loading ويژگي src تصوير پشتيباني نميشه (يا اينكه با تصاوير و انيميشن Sample مقدار دهي ميشه) و تصوير اصلي شما در ويژگي جديدي به نام data-src قرار ميگيره و اين موضوع با سينتكس استاندارد HTML5 همخوني نداره. (البته اين هم بدون راه حل نيست…)
اگر تصاوير باعث كند شدن بارگذاري صفحات شود تاثير منفي در تعداد بازديدكنندكان خواهد گذاشت و ممكن است بازديدكنندگان از مشاهده وب سايت شما خسته شوند و از ادامه مطالعه صفحات شما منصرف شوند پس مديريت بارگذاري تصاوير امري مهم است
lazy loading چيست؟
lazy loading به اين معني است كه بارگذاري تصاوير بعد از نمايش ديگر اجزا مثل متون بارگذاري و نمايش داده شود و يا حتي تا اسكرول به آنها نرسيده است بارگذاري نشوند. 5 روش را براي lazy loading به شما نشان ميدهيم.
چرا بايد به بارگذاري lazy load توجه كنيد؟
حداقل چند دليل عالي وجود دارد كه چرا بايد بارگذاري lazy load را براي وبسايت خود در نظر بگيريد:
- اگر وبسايت شما از جاوااسكريپت براي نمايش محتوا يا ارائه‌ي برخي از قابليت‌ها براي كاربران استفاده مي‌كند، بارگذاري DOM تبديل به يك مساله‌ي بسيار مهم مي‌شود. معمولا قبل از شروع كار، اسكريپت‌ها صبر مي‌كنند تا زماني كه DOM كاملا بارگذاري شود. در سايتي با تعداد قابل توجهي از تصاوير، lazy loading يا بارگذاري تصاوير به صورت آسنكرون مي‌تواند تفاوت در ماندن يا ترك وبسايت شما را در بين كاربران ايجاد كند.
- از آنجا كه اكثر راه‌حل‌هاي lazy loading فقط با بارگذاري تصاوير كار مي‌كنند، اگر كاربر به محلي كه تصاوير در داخل viewport قابل مشاهده است اسكرول كند، در صورت عدم دسترسي كاربران به آن نقطه، تصاوير هرگز بارگذاري نخواهند شد. اين به معناي صرفه‌جويي قابل توجهي در پهناي باند است كه بيشتر كاربران به ويژه كساني كه با دستگاه‌هاي تلفن همراه و اتصالات كند به وبسايت‌تان دسترسي پيدا مي‌كنند، از شما سپاسگزار خواهند شد.
خب، بارگذاري lazy load به عملكرد وبسايت كمك مي‌كند، اما بهترين راه براي حل آن چيست؟ هيچ راه كاملي وجود ندارد.
اگر خداي جاوااسكريپت هستيد، پس اجراي lazy loading نبايد براي شما مساله‌اي باشد. هيچ چيزي بيشتر از اينكه خودتان چيزي را كدنويسي كنيد به شما حس آرامش نخواهد داد.
چرا بايد از تكنيك لود تنبل يا Lazy Loading استفاده كنيم؟
مزاياي تكنيك لود تنبل يا Lazy Loading عبارت اند از:
1- كاهش زمان بارگذاري
با استفاده از اين تكنيك كاهش چشم‌گيري در زمان لازم براي بارگذاري و نمايش محتواي اوليه در صفحات وبسايت شما رخ مي‌دهد. به‌خصوص وب‌سايت‌هايي كه تصاوير زيادي در محتواي خود دارند.
2- كاهش استفاده از پهناي باند
بسياري از كاربراني كه وارد صفحه وبسايت شما مي‌شوند تا آخر صفحه اسكرول نمي‌كنندو اين حركت باعث مي‌شود، تصاوير و محتواي كل صفحه بدون ديده شدن، براي آنها بارگذاري شود.
با استفاده از تكنيك lazy loading باعث كاهش استفاده از پهناي باند و در نتيجه كاهش هزينه‌هاي پرداخت و نگهداري سرور مي‌شويد. بنابراين هزينه كمتري مي‌كنيد و كمتر اشغال شدن سرور شما باعث افزايش سرعت وبسايت مي‌شود.
3- بارگذاري DOM
اگر در وبسايت خود از جاوااسكريپت براي نمايش محتوا به كاربران خود استفاده مي‌كنيد، بايد بدانيد بارگذاري DOM بسيار حياتي خواهد بود. يكي از كارهاي اسكريپت‌ها، توقف تا بارگذاري كامل DOM است. بنابراين اگر تصاوير زيادي داشته باشيد، اجراي اسكريپت‌ها تا بارگذاري تمام تصاوير به تعويق خواهد افتاد.
روشهاي بهبود LCP در Core Web Vitals
دلايل مختلفي براي پايين آمدن LCP وجود دارد كه متداول‌ترين آنها شامل موارد زيرند:
- سرعت كند پاسخ سرور
- جاوااسكريپ و CSS بلاك كننده رندر (Render-blocking)
- سرعت پايين لود شدن منابع
- رندر در سمت كلاينت
Lcp و نحوه بهينه سازي آن
core web vitals گوگل گزارشي ارائه مي دهد كه در آن با استفاده از داده هاي واقعي به نحوه عملكرد سايت اشاره مي كند، به نوعي مانند نشانگر تجربه كاربري در سايت عمل مي كند؛ core web vitals داراي سه معيار مهم و تاثير گذار در سئو سايت و بهينه سازي آن است كه يكي از آن ها LCP است؛ به خصوص در سال 2021 اين معيار از اهميت بيشتري برخوردار است. حال در ادامه مي خواهيم بررسي كنيم كه Lcp چيست؟ و چگونه مي توانيم آن را مطابق با قوانين و جديدترين الگوريتم گوگل بهينه كنيم.
چنانچه سايت وردپرسي داريد و قصد بهينه سازي آن و سئو كردنش را داريد، بايستي ان را مطابق با اين سه معيار اصلي core web vitals طراحي و بهينه كنيد. اولين و مهم ترين معيار LCP است كه در اين مطلب در رابطه با آن و نحوه بهينه سازي آن براي سايت را بررسي خواهيم كرد.
چه المان‌هايي بررسي مي‌شوند؟
طبق آنچه اخيراً در API بزرگ‌ترين عنصر محتوي صفحه مشخص‌شده است، انواع المان‌هاي موردبررسي براي LCP از قرار زير است:
- المان‌هاي
- المان‌هاي
در داخل يك المان - المان‌هاي
- يك المان با بارگذاري تصوير پس‌زمينه از طريق عملكرد url (در مقايسه با گراديان CSS)
- المان‌هاي block-level شامل گره‌هاي متني يا ديگرزير مجموعه‌هاي المان‌هاي inline- level متني
به ياد داشته باشيد، منحصر كردن اين المان‌ها در اين مجموعه محدود عمدي است تا همه‌چيز در ابتدا ساده نگه‌داشته شود. المان‌هاي ديگري (مانند:
چگونه سايز يك المان مشخص مي‌گردد؟
سايز گزارش‌شده يك المان براي LCP معمولاً سايز قابل‌مشاهده آن براي كاربر در نقطه نمايش است. اگر الماني تا بيرون از نقطه نمايش گسترش يابد يا اگر هر الماني بريده‌بريده باشد يا overflow (سرريز) غيرقابل مشاهده داشته باشد، اين قسمت‌ها در بحث سايز المان محاسبه نمي‌شوند.
براي المان‌هاي عكس از سايز واقعي خود تغيير سايز داده مي‌شوند، سايز قابل‌مشاهده يا سايز واقعي، هركدام كه كوچك‌تر باشد، گزارش داده مي‌شود. به‌عنوان‌مثال، عكس‌هايي كه از اندازه واقعي خود خيلي كوچك‌تر شده باشند تنها سايزي كه در آن نمايش داده‌شده‌اند، گزارش مي‌شود و عكس‌هايي كه كشيده يا پهن‌شده‌اند تنها با سايز واقعي‌شان گزارش مي‌شوند.
براي المان‌هاي متني تنها سايز گره‌هاي متني بررسي مي‌شود (كوچك‌ترين مستطيلي كه تمام گره‌هاي متني را در بردارد)
براي تمام المان‌ها حاشيه، لايي گذاري يا لبه ايجادشده از طريق CSS بررسي نمي‌شود.
برخي اوقات مشخص كردن اينكه كدام گره‌هاي متني به كدام المان‌ها تعلق دارد مي‌تواند مشكل باشد، به‌ويژه المان‌هايي كه زيرمجموعه‌شان شامل المان‌هاي inline و گره‌هاي متني ساده و همچنين المان‌هاي block-level است. نكته كليدي اين است كه همه گره‌هاي متني فقط و فقط به نزديك‌ترين المان سرشاخه block-level خود تعلق دارند. در شرايط خاص: هر گره متني به الماني تعلق دارد كه بلوك حاوي آن را ايجاد كند.
كش كردن عناصر
اگر HTML ايستا باشد و لازم نباشد براي هر درخواست، تغيير كند؛ كش كردن، از دوباره ساخته شدن غيرضروري آن جلوگيري مي‌كند. با ذخيره كردن يك كپي از HTML توليد شده روي ديسك، كش كردن سمت سرور مي‌تواند TTFB را كاهش داده و استفاده از منابع را به حداقل برساند.
با توجه به ابزارهايي كه استفاده مي‌كنيم، روشهاي متفاوتي براي به كار بردن كش كردن سرور وجود دارد:
- تنظيم پروكسي‌هاي معكوس (Varnish، nginx) براي ارائه محتواي كش شده يا عمل كردن به عنوان يك سرور كش وقتي كه جلوي سرور اپليكيشن نصب شود
- gtmetrix
- تنظيم و مديريت رفتار كش در تامين‌كننده كلود (Firebase، AWS، Azure)
- استفاده از يك CDN كه سرورهاي حاشيه‌اي در اختيار وبسايت گذاشته و به اين ترتيب محتوا در جايي نزديك‌تر به كاربر كش و ذخيره مي‌شود
صفحات HTML متكي بر كش
بهتر است صفحات وب، اول به سراغ چيزهايي بروند كه در مرورگر كش شده است و در صورتي كه اين ديتاها در كش موجود نبود، به اينترنت مراجعه كنند. در واقع وقتي سرويس وركر (service worker) نصب و در بك‌گراند مرورگر اجرا شود، مي‌تواند درخواست‌هاي سمت سرور را قطع كند. اين سطح از كنترل كش با برنامه‌نويسي، به وبسايت امكان مي‌دهد تمام محتواي صفحه HTML يا بخشي از آن را كش كرده و فقط وقتي كه محتوا تغيير مي‌كند، كش را به روز رساني كند.
نمودار زير به ما نشان مي‌دهد وقتي در يك سايت از اين الگو استفاده شده، چطور توزيع LCP كاهش يافته است
lazy loading چيست؟