كيفية تحسين الصور لتحسين سرعة الصفحة وتحسين محركات البحث لموقعك على الويب

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

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

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

قص صورتك وتغيير حجمها

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

لا تحتاج إلى أن تكون أبعاد الصورة 6000 × 6000 بكسل إذا كان سيتم استخدامها فقط لصورة ملف تعريف صغيرة أو لقطة للرأس سيتم رؤيتها بدقة 300 × 300 بكسل. من تجربتي ، أجد أن أكبر صورة على الصفحة ستكون صورة البطل في الأعلى. الحجم الآمن للبقاء فيه مع الحفاظ على الجودة هو جعله الحجم القياسي عالي الدقة 1920 × 1080 بكسل.

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

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

• Shift + Drag - سيقيس الصورة بأكملها لأعلى أو لأسفل مع الحفاظ على نفس النسبة.
• Ctrl + Drag - يغير الارتفاع أو الطول فقط دون تمديد الصورة.

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

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

• PNG - مناسب للتصميمات الرسومية أو الصور التي تحتاجها لرؤية التفاصيل الصغيرة. يأتي هذا بتكلفة حجم ملف أكبر.
• JPEG - للتصوير الواقعي للأشخاص والمواقع. يمكن ضغطها أكثر من ذلك بكثير ولكن تفقد المزيد من المعلومات نظرًا لأنك لا تحتاج إلى الكثير من التفاصيل في هذه.
• SVG - رائع للأيقونات والشعارات حيث يمكن توسيع نطاقها وتقليصها دون فقدان أي جودة. هذا يمكن أن يعمل فقط على ملفات الصور التي تم إنشاؤها.
• WEBP - إصدار أحدث من الصور يمكن أن يحل محل PNG و JPEG. يتمتع WEBP بجودة صورة مماثلة لكليهما بينما يكون قادرًا على توفير 25٪ -40٪ في المساحة. الجانب السلبي الوحيد هو أن متصفح Safari من Apple لا يدعم هذا حاليًا ، لذا ستحتاج إلى تحميل ملفات JPEG أو PNGs احتياطية.
• GIF - هذه مقاطع من مقاطع فيديو أو رسوم متحركة تميل للتشغيل في حلقة. هذه مفيدة لالتقاط مشهد أو عرض كيفية عمل واجهة المنتج. تقدم هذه المقالة بعض الأمثلة الجيدة عن كيفية استخدامها. نظرًا لأنها تسلسل متحرك للصور ، فعادة ما يكون حجم الملف أثقل مقارنة بصورة واحدة.

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

استخدم ضاغط الصور

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

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

"Lazy" مقابل "Eager" يتم تحميل صورك

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

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

هذا مثال في محرر مدونة HubSpot. بعد الانتقال إلى الخيار المتقدم للصورة المدرجة ، يمكننا أن نرى أنه يمكننا ضبط إعداد التحميل الخاص بها. حدد "Lazy" واضغط على "تطبيق". تظهر الصورة الآن عندما يمرر المستخدم بالقرب منها ويقلل أوقات التحميل الثمينة.

تذكر أن تضيف نص بديل

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

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

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

يعد هذا أكثر إفادة حول ما يمكن أن تكون عليه الصورة لفهرسة Google ويمنح إمكانية وصول أكبر للمكفوفين.

دعنا نراجع خطوات إنشاء / تحسين الصور:

1. اسحب الصورة إلى محرر صور مثل Figma لاقتصاصها وتغيير حجمها.
2. قم بتصديرها كنوع الصورة المناسب (PNG ، JPEG ، SVG ، WEBP ، إلخ.)
3. خذها إلى موقع ضاغط الصور مثل Compressor أو Image Resizer Online
4. أدخل الصورة المضغوطة في المحتوى الخاص بك كتحميل كسول.
5. أضف نصًا بديلاً يصف الصور على صفحتك.
6. لديك الآن الصورة المثالية لموقعك!
7. تحقق من Google Search Console للتحقق من زيادة الأداء.

اتبع هذه الخطوات وستكون على الطريق الصحيح للحفاظ على صورك وتحسينها من أجل تحسين محركات البحث وتسريع سرعة صفحتك ، مما يخلق تجربة مستخدم رائعة!