تسريع موقع الويب الخاص بك مع تحميل الصور الكسول.

حتى الآن ، تخذل العديد من الشركات الكبيرة مستخدميها ، وبالتالي تفقد حركة المرور بسبب ضعف سرعة الموقع. دائمًا ما يكون السبب الأكبر هو ملفات الصور الكبيرة ومع ذلك لا تزال العديد من الشركات لا تتباطأ في تحميلها.

تعد سرعة الصفحة أمرًا مهمًا لكل من المستخدم ومحركات البحث. تلعب الصور دورًا رئيسيًا في العديد من مواقع الويب وغالبًا ما تكون أكبر مساهمة في تضخم الصفحة ، سواء كانت صورك مضغوطة أو كنت تعمل بأحدث تنسيقات الصور ، فلا يزال هناك الكثير مما يمكن قوله عن التحميل البسيط Lazy Load.

Lazy loadi < g هو مصطلح يُستخدم لوصف نصوص التحميل أو المحتوى إذا احتجنا إليها ومتى. بدون التحميل البطيء ، يمكن لصفحات الويب الكبيرة تحميل كميات كبيرة من البيانات التي لا يراها المستخدم أو يستخدمها أبدًا ، مما يؤخر أوقات تحميل الصفحة الأولية ويؤدي إلى تجربة سلبية للمستخدم. يمكن أن يكون لأوقات تحميل الصفحة تأثير كبير على أهداف موقع الويب – وجدت Doubleclick من Google أنه تم التخلي عن 53٪ من زيارات الجوال المذهلة إذا استغرق تحميل الموقع أكثر من 3 ثوانٍ ، بينما وجدت BBC أنها فقدت 10٪ إضافية من المستخدمين لكل ثانية إضافية يستغرقها موقعهم في التحميل.

سرعة الصفحة ليست مباشرة مثل سرعة الموقع ولكن مدى سرعة إدراك المستخدم للصفحة. باستخدام أدوات التحميل والرسوم المتحركة نقترح الحركة وأن شيئًا ما يحدث. اكتشفت Pinterest أنه من خلال تقليل فترات الانتظار المتصورة بنسبة 40٪ ، فقد زادت عمليات الاشتراك بنسبة 15٪.

بالطبع ، ليس المستخدم فقط هو الذي يحب أن تكون صفحاتنا سريعة – بل إن محركات البحث تفعل ذلك أيضًا ، في تموز (يوليو) 2018 ، أصدرت Google “تحديث السرعة” حيث تم تقديم سرعة الصفحة كعامل ترتيب لعمليات بحث الجوال .

مع اعتماد الكثير على سرعة الصفحة ، من تصنيفات تحسين محركات البحث إلى معدل التحويل والسعادة الإجمالية للمستخدم ، من المهم أن نحسن صفحات الويب الخاصة بنا للسرعة حيثما كان ذلك عمليًا وممكنًا. وجدت مراجعة للموقع أن التحميل الأولي للصفحة الرئيسية كان 5 ميجا بايت ، مع أكثر من 3 ميجا بايت من الصور. وفقًا لموقع شبكة الهاتف في المملكة المتحدة 4g.co.uk ، بمتوسط ​​سرعة تنزيل 3G في المملكة المتحدة ، سيستغرق تنزيل الصفحة الرئيسية 13 ثانية ، 8 ثوانٍ منها ستكون صورًا. من خلال تقليل كمية البيانات التي تتطلبها الصور عند تحميل الصفحة الأولى ، يمكننا تحسين تجربة المستخدم بشكل كبير. لوضع هذا في السياق ، باستخدام النتائج التي توصلت إليها هيئة الإذاعة البريطانية (BBC) عن خسارة مستخدم بنسبة 10٪ لكل إضافة ثانية لوقت الانتظار بعد الثواني الثلاث المتوقعة ، إذا بدأنا بـ 100 مستخدم 3G ، بسرعات الصفحة الحالية البالغة 13 ثانية للصفحة الرئيسية سنكون بقي 35 مستخدمًا فقط. ومع ذلك ، إذا أردنا تحميل الصور لاحقًا وتقليل التحميل الأولي إلى 2 ميغابايت فقط ، فسيتم تحميل صفحتنا بشكل أسرع بكثير في 5 ثوانٍ وسيتبقى لدينا 81 مستخدمًا – زيادة بنسبة 57٪ تقريبًا.

هنا يأتي دور التحميل البطيء – هناك العديد من مكتبات التحميل البطيئة مفتوحة المصدر المتاحة والتي تتعامل جميعها مع التحميل بشكل مختلف قليلاً. ومع ذلك ، فإن المبدأ العام هو نفسه ، يتم وضع علامة صورة داخل HTML الخاص بك مع إما سمة src فارغة أو سمة src التي تشير إلى عنصر نائب وسمة src (أو ما شابه) التي تشير إلى صورتك المحملة البطيئة – بمجرد تحميل الصفحة الأولية ، يمكن لـ JavaScript تولي الأمر ، إما تحميل جميع الصور على الفور أو تحميل الصور أثناء تمرير المستخدم ، إذا لزم الأمر.

هناك عدة نقاط في هذه المرحلة قد نتساءل عنها:

لماذا نقوم بتحميل العناصر النائبة؟ هذه بيانات صورة غير مرغوب فيها

ماذا عن تحسين محركات البحث على الصور؟

ماذا لو لم يتم تمكين جافا سكريبت لدى المستخدم؟

ألا تصبح LazyLoading مواطنًا محليًا؟

هذه نقاط صالحة لها سبب وجيه للنظر فيها بعناية.

فلماذا نريد صور العناصر النائبة؟ حسنًا ، المشكلة في تحميل الصور الكسولة هي أنه إذا لم نتوخ الحذر ، حيث نطلق على صورنا ، فقد يتسبب ذلك في تغيير المحتوى على الصفحة ، بشكل كبير في بعض الأحيان ، مما يتسبب في انطباع مستخدم سيئ. هناك عدة طرق للتعامل مع هذا الأمر: الطريقة الأولى والأكثر بساطة هي اقتصاص جميع صورنا المحملة البطيئة بالحجم نفسه – ثم يجب علينا فقط تحميل صورة عنصر نائب واحد لكل شيء. ومع ذلك ، فإن هذا مقيد للغاية من منظور محرر التصميم والمحتوى. يمكننا منح أنفسنا مزيدًا من الحرية من خلال العمل مع نسب حجم الصورة وخاصية تناسب الكائن CSS. للحصول على حرية مطلقة على الرغم من أنه يمكننا إنشاء عناصر نائبة للصور الفردية – فمن السهل رفض هذه الطريقة بسرعة باعتبارها طريقة غير مجدية لأننا ما زلنا نقوم بتحميل الصور على

يُعد تحسين محركات البحث دائمًا مصدر قلق عند إجراء تغييرات كبيرة على موقعنا ويجب مراعاتها بعناية. وفقًا للوحة Clicksteam التابعة لشركة Jumpstart التابعة لشركة Marketing Insights ، اعتبارًا من فبراير 2018 ، تعرف بحث الصور على Google على أكثر من 22٪ من البحث على الويب في الولايات المتحدة ، بينما لم نتمكن من العثور على أرقام المملكة المتحدة ، لا يزال هذا الرقم يتطلب الاحترام. إذن ، مع كون البحث عن الصور مهمًا جدًا لتحسين محركات البحث ، فلماذا نخفي جميع صورنا؟ حسنًا ، في الواقع ، تروج Google نفسها لـ Lazy Loading لأغراض تحسين محركات البحث ، إذا تم ذلك بشكل صحيح واستخدم التقنية في ميزة البحث عن الصور الخاصة بهم. لحسن الحظ ، توجد أدوات لتقليد برامج زحف الويب من Googles – باستخدام Googles Puppeteer API ، يمكننا التقاط لقطة لما تراه Google والتأكد من أن محرك البحث ينتظر تحميل Lazy Images قبل إلغاء بيانات موقع الويب.

كما ناقشنا ، يعتمد Lazy Loading على JavaScript للعمل ، وهو أمر جيد تمامًا بالنسبة لـ 99.8٪ من المستخدمين حول العالم – النتائج التي توصل إليها Blockmetry في عام 2016 – إلا أنهم لاحظوا أن هذا الرقم يخفي الكثير من الأنماط الجغرافية الإقليمية المثيرة للاهتمام. كانت المعدلات العالية بشكل استثنائي لجافا سكريبت المعوقين في مناطق شرق آسيا وأفريقيا وكذلك فنلندا. من خلال بعض التقنيات البسيطة ، يمكننا تقديم تجربة سلسة لهؤلاء المستخدمين ، دون فقدان تجربة Lazy Load الخاصة بنا مقابل 99.8٪. بإضافة فئة “no-js” إلى & lt؛ html & gt؛ علامة وإضافة سطر إلى الجزء العلوي من ملف JavaScript لإزالته (تقنية شوهدت في مكتبات مثل Modernizer) ، يمكننا معرفة ما إذا كان المستخدم قد تم تمكين JavaScript وعرض المحتوى بشكل مناسب. مزيج من هذا مع & lt؛ noscript & gt؛ كتلة تحتوي على نسخة غير كسولة من صورتنا ، مباشرة قبل أو بعد صورتنا البطيئة وفئة CSS التي تخفي جميع الصور البطيئة إذا كانت فئة no-js موجودة ، لدينا تحميل Lazy للغالبية وتراجع سلس بخلاف JavaScript.

فتح العلامة & lt؛ html & gt؛ العلامة:

جافا سكريبت (es6):

CSS:

ولكن هل كل هذا مضيعة للوقت ، فإن Lazy Loading هو أن تصبح ميزة متصفح أصلية – باختصار ، لا. بينما من المقرر أن تصبح ميزة Lazy Loading ميزة أصلية خلال السنوات القليلة المقبلة ، إلا أننا لم نصل إليها بعد.

في الختام ، يتمتع Lazy Loading بالعديد من الفوائد ، سواء كان ذلك للمستخدم النهائي أو لمحركات البحث ، وبكمية صغيرة نسبيًا من العمل ، يمكننا الحصول على تجربة أسرع وأكثر سلاسة لـ 99.8٪ من مستخدمي الإنترنت في العالم ، مع تعزيز مُحسّنات محرّكات البحث (SEO) لدينا وتراجع رائع لـ 0.2٪ من المستخدمين الذين قد يكون لديهم تعطيل JavaScript. الجزء الأكبر في تنفيذ Lazy Loading هو أنه لا يجب أن يكون كل شيء أو لا شيء – يمكننا تقديم Lazy Loading صورة واحدة في كل مرة عبر موقعنا ولن يكون لها أي تأثير سلبي على الصور التي قررنا تركها بتنسيق html بسيط الصور فقط.