كيف تسرع موقعك عن طريق إصلاح صورك؟

الصور غير المحسّنة (أو المحسّنة بشكل سيئ) هي السبب الأكثر شيوعًا لبطء سرعة تحميل موقع الويب الخاص بك.

ربما يتم تحميل موقع الويب الخاص بك بسرعة ، فلا يزال بإمكان 39٪ من الأشخاص التوقف عن التعامل معه إذا لم يتم تحميل الصور أو استغرق تحميلها وقتًا طويلاً.

وتمثل الصور 68٪ من إجمالي وزن الصفحة (وهو عدد كبير جدًا!).

ومن ثم ، لا يمكننا المخاطرة بالحفاظ على الصور غير محسَّنة.

لذلك ، اتبع هذه الأساليب السريعة لتحسين صورك وضمان سرعة تحميل أسرع للصفحة.

قبل ان تبدا…

تحقق مما إذا كانت الصور مسؤولة حقًا عن سرعة التحميل البطيئة لموقعك أم أن هناك المزيد من المشكلات.
استخدم Google PageSpeed ​​Insights لتحليل سرعة تحميل موقعك.

بعد ذلك ، قم بالتمرير لأسفل إلى " التشخيص " و " الفرص ".

هنا ، يمكنك تحليل كل معلمة تؤثر على سرعة التحميل لديك بالتفصيل واكتشاف الفرص لتحسينها.

يذكر التقرير أيضًا القضايا المتعلقة بالصورة.

هذه هي أسرع طريقة للعثور على المشكلات المتعلقة بالصور (وغيرها) وإصلاحها التي تؤثر على سرعة تحميل موقعك.

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

فلماذا لا تقوم بتحسين الصور قبل تحميلها؟ بعد كل شيء ، الوقاية خير من العلاج.

ستخبرك هذه التقنيات بالضبط كيف تفعل ذلك. هيا نبدأ.

1. اختر تنسيق الصورة الصحيح

يفضل مالكو مواقع الويب استخدام تنسيقات الصور الأربعة التالية:

• JPEG (أو JPG - مجموعة خبراء التصوير المشتركة)

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

صورة مضغوطة = حجم ملف أقل = سرعة تحميل أسرع

• PNG (رسومات الشبكة المحمولة)

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

PNGs متوفرة بصيغتين:

• PNG -8

يحتوي على لوحة محدودة من 256 لونًا ولكن حجم ملف منخفض يسمح له بالتحميل بشكل أسرع.

• PNG-24

لا تحتوي على لوحة ألوان محدودة ؛ ومن ثم ، فهو ملف أثقل يستغرق وقتًا أطول للتحميل.

• GIF (تنسيق تبادل الرسومات)

تستخدم صور GIF لوحة محدودة من 256 لونًا مع ضمان ضغط بدون فقد. هو الأنسب للصور المتحركة.

تستغرق ملفات GIF وقتًا في التحميل. يُنصح باستخدام صور PNG-8 فوق ملفات GIF.

• SVG (رسومات موجهة قابلة للتطوير)

JPEG و PNG و GIF عبارة عن رسومات نقطية (مصنوعة من وحدات بكسل) ، وصور SVG هي رسومات متجهة (مصنوعة من مسارات). لذلك ، لا تحتاج SVGs إلى طلب HTTP لتحميل ملف صورة.

من بينها ، ما هو تنسيق الصورة الصحيح لموقعك على الويب؟

هذا يعتمد على الغرض الخاص بك.

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

2. تغيير حجم الصور قبل تحميلها

إذا قمت بتحميل الصور دون تغيير أبعادها ، فقد يكون لها أحجام أكبر من المطلوب.

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

يساعد تغيير الحجم قبل التحميل على احتواء صورك في المساحة المحددة على الشاشة وتحميلها بشكل أسرع على المتصفحات.

الآن ، الحجم الأمثل للصور يختلف من موقع إلى آخر. يعتمد ذلك على موضوع أو تصميم موقع الويب الخاص بك.

باستخدام أدوات الفحص المضمنة الموجودة في معظم المتصفحات ، يمكنك تحديد الأحجام الدقيقة للصور المستخدمة على موقعك.

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

ما عليك سوى فحص عناصر صفحة الويب ، والنقر فوق الصورة ، وسيعرض لك المتصفح الحجم الدقيق للصورة.

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

يمكنك الاحتفاظ بها كمرجع لتغيير حجم الصور التي تقوم بتحميلها على موقع الويب الخاص بك.

يجب ألا يتجاوز عرض وارتفاع منشورات المدونة أو صور المحتوى الداخلية الأخرى 1500 بكسل و 1000 بكسل ، على التوالي.

هناك عدة طرق لتغيير حجم صورك بشكل فعال:

• باستخدام الفوتوشوب

Photoshop هو برنامج مخصص لتحرير الصور. يحافظ على تفاصيل الصور وحدتها أثناء تغيير حجمها.

حدد الصورة> حجم الصورة . سيظهر مربع الحوار. سيظهر لك حجم الصورة الحالية.

أدخل الأبعاد المطلوبة (العرض والارتفاع) لمعرفة حجم ملف الصورة الجديد. انقر فوق " موافق" ، ويتم تغيير الحجم.

يمكنك حفظ الملف بالتنسيق المطلوب وتحميله على موقعك.

• باستخدام الطلاء

يعد Windows Paint بديلاً أبسط لتغيير حجم الصور قبل تحميلها.

افتح الصورة التي تريد تغيير حجمها في الرسام. حدد تغيير الحجم من الخيارات في شريط الأدوات.

أدخل الأبعاد الجديدة حسب متطلباتك. (يحافظ "الرسام" على نسبة العرض إلى الارتفاع افتراضيًا.) انقر فوق " موافق " وقم بتغيير حجم صورتك.

احفظ الملف بالتنسيق المناسب ثم قم بتحميله على موقعك.

• استخدام البرنامج المساعد WordPress

إذا كنت تستخدم WordPress ، فيمكنك استخدام مكون إضافي مثل Imsanity لتغيير حجم صورك.

سيقوم المكون الإضافي تلقائيًا بتغيير حجم الصورة التي تتجاوز حدود الحجم التي حددتها واستبدالها بالصورة التي تم تحميلها.

3. ضغط كل الصور

يقلل الضغط حجم الملف بالبايت دون التقليل من جودة الصور.

يساعد في تسريع نقل الصور وتقليل مساحة التخزين على الخوادم.

لذا تأكد من ضغط كل صورة قبل تحميلها على موقعك.

هناك طريقتان لتقليص حجم ملف صورتك:

• ضياع

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

هناك انخفاض في جودة الصورة ، لكن العين البشرية لن تميز بين الصور غير المضغوطة والصور المضغوطة.

• بدون فقدان بيانات

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

يمكنك أيضًا تحديد مستوى الضغط لصورك.

كلما ارتفع مستوى الضغط (أو النسبة المئوية) ، قلت الجودة ...

... وصغر حجم الملف.

الآن ، يجب أن تتساءل عن موعد استخدام أي نوع من الضغط.

قم بالضغط بدون فقدان البيانات عندما لا يمكنك المساومة على الجودة. يمكنك تحديد مستوى الضغط المناسب حسب حاجتك. يعمل بشكل أفضل للصور الفوتوغرافية وصور مواقع الويب.

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

فيما يلي بعض أدوات الويب التي توفر ضغطًا فعالاً للصور:

• TinyPNG
• Kraken.io
• JPEG ميني
• تريميدج

إذا كنت تستخدم WordPress ، فإليك بعض الإضافات الشائعة لضغط الصور:

• سحق
• أوبتيمول
• محسن صور EWWW
• TinyPNG
• Kraken.io

4. استخدم CDNs للصور (والمحتويات الأخرى)

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

يؤدي استخدام CDN لصورك (والمحتويات الأخرى) إلى تسريع موقعك بطريقتين.

أولاً ، تم تحسين صورك (افتراضيًا) لتحتل مساحة أقل على خوادم التخزين.

وثانيًا ، يتم تخزين صورك على خوادم متعددة موجودة في مواقع جغرافية مختلفة.

لذلك ، عندما يزور المستخدمون موقعك ، لا يتعين عليهم تحميل ملفات الصور من خادمك الأصلي. بدلاً من ذلك ، يمكنهم تنزيلها من أقرب خادم لـ CDN الخاص بك.

يساعد استخدام CDN في تحسين سرعة تحميل صفحتك لأن العلم لا يزال يحد من معدل نقل البيانات. تؤثر المسافة بين الخادم الأصلي وموقع المستخدم على معدل نقل البيانات.

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

ولكن باستخدام CDN ، سيتمكن المستخدمون من تنزيل الصور من أقرب خادم شبكة. سيكون أسرع حيث تقل المسافة بين خادم الشبكة وموقع المستخدم بشكل كبير.

لذلك ، يجب عليك استخدام CDN للصور.

هناك العديد من شبكات CDN عالية الجودة المتاحة مجانًا على الإنترنت. يمكنك استخدام أي منها وتحقيق تحميل أسرع للصور.

فيما يلي بعض شبكات CDN الشهيرة والفعالة لمساعدتك:

• Cloudflare CDN
• أمازون كلاودفرونت
• جوجل كلاود CDN
• إمبرفا CDN
• CDN77.com
• Gumlet
• بسرعة
• CacheFly
• برنامج الورنيش
• Bunny.net
• 5 سنتات

5. تمكين المتصفح التخزين المؤقت

في كل مرة يزور المستخدمون موقعك ، يتعين عليهم تنزيل جميع موارد موقع الويب مثل الصور وملفات HTML و CSS وملفات JavaScript وملفات الوسائط وملفات PDF وما إلى ذلك من الخادم.

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

يمكنك أيضًا إبلاغ متصفحات الويب بما يلي:

• الموارد التي يجب ولا ينبغي تخزينها مؤقتًا.
• الوقت الذي يجب أن يحتفظوا فيه بمورد معين مخزن مؤقتًا.

لذلك ، عندما يزور المستخدمون موقعك مرة أخرى ، يمكنهم تنزيل الموارد من التخزين المحلي بدلاً من الخادم.

وبالتالي ، سيساعد ذلك في تحميل صفحات الويب الخاصة بك بشكل أسرع للزائرين المتكررين.

انظر إلى تحسين سرعة تحميل الصفحة الذي يمكن تحقيقه بسهولة

مع التخزين المؤقت للمتصفح:

إنها أسرع بمائة مرة.

تقترح معظم أدوات اختبار سرعة الصفحة "زيادة التخزين المؤقت للمتصفح" لنفس السبب.

نظرًا لأن الصور تستغرق أقصى وقت للتحميل على موقع ما ، فإن تمكين التخزين المؤقت للصور يعزز سرعة تحميل موقعك إلى حد كبير.

يمكنك الاستفادة من التخزين المؤقت للمتصفح لصور موقعك بطريقتين:

• باستخدام htaccess

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

في الكود ، حدد نوع المورد الذي يجب تخزينه مؤقتًا والمدة التي يجب أن يظل خلالها في الذاكرة المحلية. (حسب احتياجاتك)

هذا كل شيء جاهز لتحميل صورك (والموارد الأخرى) بشكل أسرع للمستخدمين.

• استخدام الإضافات (لمواقع WordPress)

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

فيما يلي بعض المكونات الإضافية لتسريع موقع WordPress الخاص بك عن طريق تمكين التخزين المؤقت للمتصفح:

• W3 إجمالي ذاكرة التخزين المؤقت
• WP Fastest Cache
• WP Cloudflare Super Page Cache
• WP Super Cache
• هايبر كاش
• مخبأ المذنب

باستخدام ذلك ، يمكنك تقليل وقت تحميل صورك بشكل كبير.

المكافأة: إضافة نص بديل إلى صورك

النص البديل هو وصف موجز للصورة يوضح بوضوح ما تعرضه الصورة.

إنه مهم لثلاثة أسباب:

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

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

يصف الصورة بوضوح. يمكن للمستخدمين الحصول على فكرة عما تدور حوله الصورة حتى لو لم يرونها.

لذلك ، يجب عليك إضافة نص بديل إلى جميع الصور التي تقوم بتحميلها على موقعك.

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

يقوم بتحليل جميع الصور الموجودة على موقعك ويعرض العدد الإجمالي للصور التي تحتوي على سمة بديل مفقودة.
عند النقر فوق "عرض المزيد" ، فإنه يعرض عناوين URL للصور التي تحتاج إلى إصلاحها.

يمكنك تحسين النص البديل لهذه الصور وتحسين تجربة المستخدم لموقعك.

أيضًا ، ستلاحظ أداء صورك بشكل أفضل في نتائج البحث في صور Google. ذلك لأن النص البديل هو أحد أهم عوامل ترتيب تحسين محركات البحث (SEO) للصور.

لذا ، فهو وضع يربح فيه الجميع!

عزز سرعة موقعك عن طريق تحسين الصور

مع استمرار نمو استخدام الإنترنت عبر الهاتف المحمول ، سنتطلع إلى مواقع أسرع وأكثر سلاسة.

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

عندما تختبر موقعك مرة أخرى باستخدام إحصاءات PageSpeed ​​من Google ، فأنا متأكد من أنك ستلاحظ تحسنًا كبيرًا في سرعته!

هل استخدمت أيًا من الأساليب التي ذكرتها للعمل؟ أيهما تعتقد أنه الأكثر فاعلية؟ دعني ارى آراءك.