كيفية تحسين أداء الويب والخط السفلي

الصبر ليس فضيلة لزوار الموقع والمتسوقين عبر الإنترنت. كل جزء من الثانية مهم عندما يتعلق الأمر بالاحتفاظ بزائر أو فقدانه على موقع الويب الخاص بك.

وفقًا لـ Kissmetrics ، يعد وقت التحميل عاملاً رئيسيًا يساهم في التخلي عن الصفحة. نظرًا لأن متوسط ​​زائر الويب لا يتحلى بالصبر لصفحة تستغرق وقتًا طويلاً للتحميل ، فإن التخلي عن الصفحة يزداد كنسبة مئوية مع كل ثانية من وقت التحميل. أشارت المدونة إلى أن ما يقرب من 40٪ من المستخدمين سيتركون الصفحة بعد 10 ثوانٍ. ربما يعاني مستخدمو الإنترنت عبر الهاتف المحمول من الإحباط الأكبر من هذه المشكلة - لاحظ 73٪ أنهم واجهوا موقع ويب بطيئًا جدًا في التحميل.

تؤثر مشكلة تحميل الصفحة بشكل مباشر على سلوك التسوق لزوار الموقع. أشارت Kissmetrics أيضًا إلى أن 79٪ من المتسوقين غير الراضين عن أداء موقع الويب هم أقل عرضة للشراء من نفس الموقع مرة أخرى. يتوقع ما يقرب من نصف المستهلكين أن يتم تحميل الصفحات في ثانيتين أو أقل ، وسيؤدي التأخير لمدة ثانية واحدة إلى تقليل رضا العملاء بنسبة 16٪.

تترجم عواقب هذه التأخيرات إلى أموال حقيقية. كشفت شركة أمازون العملاقة للتجارة الإلكترونية أن تباطؤ تحميل الصفحة لمدة ثانية واحدة فقط سيكلفها 1.6 مليار دولار من عائدات المبيعات. وبالمثل ، لاحظت Google أن التباطؤ في نتائج البحث بمقدار أربعة أعشار الثانية فقط من شأنه أن يؤدي إلى خسارة 8 ملايين عملية بحث يوميًا ، وهو ما يترجم إلى تقليل الإعلانات عبر الإنترنت بالملايين.

الوصول إلى قلب المشكلة

أكبر العوامل المساهمة التي تؤثر على وقت التحميل هي الصور ومقاطع الفيديو والرسومات. تتضمن مواقع الويب اليوم مزيدًا من العناصر المرئية ونصًا أقل لجذب الزوار. وفقًا لأرشيف HTTP ، فإن ما يقرب من 64٪ من متوسط ​​وزن موقع الويب عبارة عن صور ، بينما يمثل الفيديو 8٪ أخرى.

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

استخدم تنسيقات صور أكثر كفاءة وحديثة

أضافت Google دعمًا لتنسيق صورة WebP إلى متصفحات Chrome ، وفعلت Microsoft نفس الشيء مع JPEG-XR في معظم متصفحات Internet Explorer و Edge. لكن العديد من المطورين لم يتبنوا هذه التغييرات بعد ، والتزموا بنفس تنسيقات JPG و PNG ، بدلاً من الاستفادة من كيفية قيام التنسيقات الحديثة بتحسين مواقعهم.

من الناحية المثالية ، يجب عليك تحويل الصور إلى WebP و JPEG-XR عندما يكون ذلك مناسبًا ، وضبط جودة الضغط لتحقيق التوازن بين التنسيقات. من المهم أيضًا اكتشاف المتصفح المحدد الذي يصل إلى كل صورة ويقدم نسخة محسّنة من الصورة إلى المتصفح المعني. سيمكنك القيام بذلك من ضمان حصول المستخدمين على أفضل الصور الممكنة ، من حيث الجودة المرئية وتحسين حجم الملف ، دون إبطاء موقعك.

تخلص من إهدار حجم جانب المستعرض

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

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

استخدم أنواع ملفات الصور الصحيحة

تنسيقات الملفات JPEG و PNG و GIF هي أكثر تنسيقات الملفات شيوعًا المستخدمة على مواقع الويب اليوم ، ولكن لكل منها أدوار مختلفة جدًا. استخدم التنسيق الخاطئ وأنت تهدر وقت زوارك وأموالك الخاصة. هناك خطأ متكرر وهو استخدام PNGs لتقديم الصور. هناك اعتقاد خاطئ شائع بأن PNGs ، باعتبارها تنسيقات بدون فقدان ، ستؤدي إلى أعلى إعادة إنتاج ممكنة للصور.

في حين أن هذا صحيح بشكل عام ، إلا أنه يعد أيضًا تحسينًا غير ضروري. من المهم أن تضع في اعتبارك تنسيق الصورة الذي يجب استخدامه للمحتوى المعروض. يجب استخدام PNG للصور التي تم إنشاؤها بواسطة الكمبيوتر (المخططات والشعارات وما إلى ذلك) أو عندما تحتاج إلى الشفافية في صورتك (تراكبات الصور) ؛ JPEG عندما تعرض صورة فوتوغرافية تم التقاطها ؛ و GIF عند الحاجة إلى رسوم متحركة (تحميل Ajax للرسوم المتحركة ، وما إلى ذلك).

لا تستخدم حجم صورة واحد عبر جميع وسائط العرض

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

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

الاستفادة من التصميم سريع الاستجابة

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

نظرًا لهذه التحديات ، تم إنشاء العديد من مواقع الويب بأعلى دقة للصور التي قد تكون مطلوبة وتم تصغير حجم جانب العميل اعتمادًا على نقطة التوقف. هذه العملية غير فعالة وتضر بالأداء. ولكن هناك خيارات ، مثل أداة المصدر المفتوح Respive Breakpoints ، والتي يمكن أن تساعدك في إنشاء جميع أحجام الصور التي ستحتاجها ، بالإضافة إلى كود HTML المناسب.

استخدام شبكات توصيل المحتوى (CDNs)

عادةً ما يكون لدى CDNS خوادم منتشرة بشكل استراتيجي في جميع أنحاء العالم لتقصير أوقات الرحلة ذهابًا وإيابًا. تسمح شبكات CDN بتقديم الصور بسرعة أكبر للمستخدمين وتقليل احتمالية حدوث أعطال وتحسين أداء تحسين محركات البحث وتحسين تجربة المستخدم. عندما تختار CDN ، ستحتاج إلى النظر في مستوى تغطيتها العالمية ، ومعدل التخزين المؤقت ، والقدرة على تشغيل العمليات المنطقية على الحافة ، ومتوسط ​​أوقات الاستجابة ، ومقاييس أخرى ، مثل متوسط ​​أوقات الإلغاء.

أثر التغيير

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

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

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

الخط السفلي

عندما يكون الوقت مالًا ، لا يستطيع مالكو مواقع الويب عدم اتخاذ جميع الخطوات اللازمة لتحسين تجارب زوارهم. حتى جزء بسيط من التأخير الثاني في تحميل الصفحة يمكن أن يترجم إلى خسارة في الإيرادات والثقة من جانب المستهلك.

بالنظر إلى أن الصور ومقاطع الفيديو هي أكبر خوادم للنطاق الترددي في معظم مواقع الويب ، فأنت بحاجة إلى إلقاء نظرة جادة على تصميم الويب وتنسيقات الصور ، ثم اتخاذ الخطوات اللازمة لضمان تحسين الوسائط بحيث يكون موقعك - ​​ناهيك عن إيراداتك و تصورات العملاء - لا تعاني نتيجة لذلك.