كيفية تحسين الصور في WordPress (لكل من السرعة + تحسين محركات البحث)

03.06.2020
ปลั๊กอินแคช 'كيفية تحسين الصور في WordPress (لكل من السرعة + تحسين محركات البحث)
0 43 мин.

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


هناك في الواقع 20 طريقة مختلفة لتحسين الصور (إذا قمت بتضمين كل من تحسين محركات البحث وتحسين السرعة). سوف يمنحك ذلك درجات أفضل في GTmetrix / Pingdom ، ومن المحتمل أن يصنفك أعلى في البحث ، ويجعل تحميل المحتوى الخاص بك أسرع بكثير. لقد تمكنت من الحصول على تقرير GTmetrix بنسبة 100٪ مع أوقات تحميل 0.5 ثانية … كان تحسين صوري في WordPress جزءًا كبيرًا منه.

تحسين الصور قبل تحميلها – استخدام برنامج مثل Photoshop لتحسين الصور قبل تحميلها يمكن أن يوفر الكثير من العمل. يمكنك تغيير حجم بيانات EXIF ​​وضغطها وتجريدها وحفظها بالتنسيق الصحيح (مثل PNG / JPEG) وكتابة اسم ملف وصفي (والذي سيتم استخدامه تلقائيًا كنص بديل إذا كنت تستخدم المكوّن الإضافي Attributes Image التلقائي). هذه 6 تحسينات!

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

الأدوات الرئيسية التي أستخدمها – أنا أستعمل الأعرج لتغيير حجم / ضغط الصور (محرر الصور الخاص بي المفضل), صاروخ الفسفور الابيض لمكوّن ذاكرة التخزين المؤقت الإضافي, تخيل لمزيد من الضغط بدون فقدان + إزالة بيانات EXIF ​​، على حد سواء Cloudflare و StackPath CDN, المكوّن الإضافي Image Alt البديل لاستخدام اسم ملف الصورة تلقائيًا كنص بديل ، و أفضل ذاكرة التخزين المؤقت Gravatar لتخزين Gravatars في التعليقات. أنا أستعمل WP WP Pro كمكوّن مقتطفات منسقة, استبدال بحث أفضل لتحديث الصور بالجملة (سهل للغاية) ، و GTmetrix كأداة لاختبار السرعة. انظر القائمة الكاملة للأدوات.

1. البحث عن صور غير محسنة

قم بتشغيل موقعك من خلال GTmetrix وسترى هذه العناصر في علامات تبويب سرعة الصفحة / YSlow. عادة ما تكون الخمس الأولى خاصة بالصفحة, وهذا يعني أن GTmetrix سيعرض فقط الصور غير المحسنة للصفحة الواحدة التي تختبرها. عادةً ما تحدث آخر 3 أحداث على موقعك بالكامل. بالطبع ، هذه ليست سوى 7 طرق لتحسين الصور ، ولكن بعض أهمها ، لذلك سنقوم بذلك أولاً.

  • قدّم صورًا بحجمها: تغيير حجم الصور الكبيرة لتصحيح الأبعاد (الخطوة 2)
  • حدد أبعاد الصورة: حدد عرضًا / ارتفاعًا في HTML أو CSS للصورة (الخطوه 3)
  • تحسين الصور – ضغط الصور بدون فقد (الخطوة 4)
  • تمشيط الصور باستخدام العفاريت CSS – دمج صور متعددة في صورة واحدة (الخطوة 5)
  • تجنب عمليات إعادة توجيه URL – لا تعرض الصور من إصدار www أو http (s) خاطئ (الخطوة 6)
  • استخدم شبكة توصيل المحتوى – تقديم الصور / الملفات من CDN (الخطوة 7)
  • الاستفادة من التخزين المؤقت للمتصفح – صور / ملفات ذاكرة التخزين المؤقت باستخدام المكوّن الإضافي لذاكرة التخزين المؤقت (الخطوة 8)
  • اجعل الرمز المفضل صغيرًا وقابلًا للتخزين المؤقت – استخدم الرمز المفضل 16x16px وقم بتخزينه مؤقتًا (الخطوة 9)

تحسينات الصورة في GTmetrix

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

2. خدمة الصور تحجيمها

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

تخدم الصور المحجوبة

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

تغيير حجم الصور الكبيرة

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

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

مثال:

  • صور المنزلق: 1900 (عرض) × 400 (ارتفاع)
  • صور دائري: 115 (ح)
  • صور القطعة: 414 (w)
  • صور نشر مدونة Fullwidth: 680 (w)
  • الصور المميزة: 250 (عرض) × 250 (ارتفاع)
  • صورة Yoast Facebook OG: 1200 (عرض) × 628 (ارتفاع) – الخطوة 11
  • Yoast Twitter OG image 1024 (w) x 512 (h) – الخطوة 11

680 بكسل عرض مستطيل

3. تحديد أبعاد الصورة

وهذا يعني إضافة عرض / ارتفاع إلى HTML أو CSS للصورة. يقوم Visual Editor بذلك نيابة عنك (ولكن عناصر واجهة المستخدم وبعض أدوات إنشاء الصفحات و HTML مخصص لا). اختبار بضع صفحات في GTmetrix.

يخبرك GTmetrix بأبعاد الصورة …

أبعاد صورة Speciy GTmetrix

أضف العرض / الارتفاع إلى HTML للصورة …

حدد أبعاد الصورة

4. ضغط الصور دون فقد

هذه هي عناصر “تحسين الصور” في GTmetrix. العديد من البرامج (مثل Photoshop و Gimp) لديها خيار الضغط عند التصدير. على الرغم من أن هذه بداية رائعة ، إلا أن المكوِّنات الإضافية لضغط الصور عادةً ما تحصل على نتائج أفضل. أنا أفضل تخيل, وحش بحري أسطوري, ShortPixel, أو سحق. من المعروف أن المكونات الإضافية الأخرى تقلل من جودة الصورة بصريًا وقد تسبب أخطاء في صورك.

ضغط الصور بالتخيل

  1. التسجيل ل تخيل
  2. تحميل هذا تخيل البرنامج المساعد
  3. ستتم مطالبتك بالتعليمات أدناه:
  4. أدخل مفتاح API الخاص بك من حسابك على Imagify
  5. ضبط مستوى الضغط الخاص بك (عادي ، عدواني ، فائق)
  6. Imagif’em الجميع (الصورة أدناه) مع تحسين جميع الصور على موقعك
  7. بمجرد الوصول إلى الحد الخاص بك ، ادفع 4.99 دولارًا أو انتظر الشهر المقبل لإعادة تعيين الحد الخاص بك

تخيل

اختبر كيف تبدو الصور بمستويات مختلفة من الضغط …

تخيل مقارنة الضغط

بمجرد الاشتراك ، يمكنك تحسين جميع الصور على موقعك بشكل مجمّع …

تخيل - وورد - صورة - أمثلية

تعيين خيار تحسين الصور عند التحميل …

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

5. دمج الصور في CSS Sprites

في صفحتي الرئيسية ، قد تعتقد أنك ترى 21 رمزًا ، ولكنها في الواقع صورة واحدة. هذا ال العفريت CSS, حيث يمكنك دمج صور متعددة في صورة واحدة واحدة. هذا يقلل من عدد الصور (والطلبات) ولهذا السبب تحتوي صفحتي الرئيسية على 10 طلبات فقط. بدلاً من تحميل 21 صورة ، يتم تحميلها 1. ستحتاج إلى معرفة CSS للقيام بذلك ، أو استخدام مولد العفريت CSS.

العفاريت CSS

GTmetrix CSS Sprites

استخدم فقط CSS Sprites للصور الزخرفية – ستفقد الكثير من علامات alt للصورة عندما تقوم بدمج 21 صورة في 1. لا تقم بدمج الصور المهمة في نقوش CSS إذا كانت تصف المحتوى الخاص بك. بالنسبة لي ، فإن سرعة صفحتي الرئيسية أكثر أهمية من تحسين محركات البحث … أستخدم تقرير GTmetrix لصفحتي الرئيسية في الكثير من الأماكن (لذلك يجب أن أبقيها نظيفة) وصفحتي الرئيسية ، صدق أو لا تصدق ، لا تستهدف الكلمة الرئيسية. الغرض منه هو تحديد الدروس التعليمية الخاصة بي … وتحميل سريع.

6. تجنب إعادة توجيه URL للصورة

إذا قمت بالتغيير إلى HTTPS ، أو إصدارات www ، أو بدأت في عرض الصور من شبكة CDN ، فيجب عليك تحديث جميع صورك (وروابطك) بشكل مجمّع باستخدام استبدال بحث أفضل لذلك يقدمون النسخة الصحيحة. وإلا قد ترى تقليل عمليات إعادة التوجيه أو استخدام المجالات الخالية من ملفات تعريف الارتباط الأخطاء.

تقليل عمليات إعادة التوجيه

المجالات الحرة ملفات تعريف الارتباط

استخدم المكوّن الإضافي Better Search Replace لتحديث عناوين URL للصور بشكل مجمّع …

بحث أفضل يستبدل إصدارات WWW

بحث أفضل استبدل HTTP في مقابل HTTPS

7. تقديم صور من CDN

يتطلب هذا تغيير عناوين URL للصور لتضمينها عنوان URL لـ CDN

  • عنوان URL للصورة القديمة (بدون CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • عنوان URL للصورة الجديدة (مع CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare مقابل StackPath – أستخدم كليهما Cloudflare و StackPath نظرًا لأن المزيد من مراكز البيانات = تسليم المحتوى بشكل أسرع. وقد Cloudflare 200+ مركز بيانات, وقد StackPath 34+ مركز بيانات التي تقع بكثافة في الولايات المتحدة (وهو المكان الذي ينتمي إليه معظم زواري). لا يقوم Cloudflare بتعيين عنوان URL لـ CDN لك لذلك سنستخدم CDN الخاص بـ StackPath لعرض الصور.

مراكز بيانات StackPath

الخطوة 1: اختر CDN. أنا أستعمل StackPath (لديهم تجربة لمدة 30 يومًا).

الخطوة 2: في لوحة التحكم الرئيسية ، انقر فوق علامة التبويب CDN ، ثم إنشاء موقع StackPath CDN

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

الخطوه 3: انسخ عنوان URL الخاص بـ CDN والصقه في المكون الإضافي لذاكرة التخزين المؤقت (أدناه خاص بـ WP Rocket) …

WP-Rocket-CDN

الخطوة 4: استبدل عناوين URL للصور لتضمين عنوان CDN الخاص بك (باستخدام استبدال بحث أفضل).

بحث أفضل استبدل URL CDN

الخطوة الخامسة: تحقق من استخدام عناوين URL للصور القديمة Chrome DevTools. في بعض الأحيان ، البرنامج المساعد الخاص بك ذاكرة التخزين المؤقت أو CDN Enabler يتولى هذا الأمر ، باستثناء الروابط في CSS وجافا سكريبت التي يتم تشفيرها بشكل ثابت. بالنسبة للروابط التي تم تركها ، فهي موجودة عادةً الملفات (مثل CSS أو Javascript) التي تحتاج إلى فحص يدوي واستبدال. يوضح لك Chrome DevTools جميع النطاقات المستخدمة حاليًا.

الخطوة السادسة: تشغيل موقعك GTmetrix و “شبكة توصيل المحتوى” يجب أن تكون خضراء في YSlow. لا يجب أن يكون لديك أي أخطاء في “تقليل عمليات إعادة التوجيه” أو “استخدام النطاقات الخالية من ملفات تعريف الارتباط” أيضًا.

CDN GTmetrix YSlow

8. صور ذاكرة التخزين المؤقت

معظم ملحقات ذاكرة التخزين المؤقت لديها خيار التخزين المؤقت للمتصفح, الذي يخزن الصور. أستخدم WP Rocket الذي تم تقييمه كمكوّن إضافي للمخبأ المؤقت في استطلاعات الرأي على Facebook ، ولدي برنامج تعليمي لذلك. أداء سريع بشكل عام ، تم تصنيف البرنامج المساعد المجاني رقم 1 (لدي برنامج تعليمي لذلك أيضًا).

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

9. جعل فافيكون صغير وقابل للتخزين المؤقت

تأكد من أن حجم ملفك المفضل هو 16 × 16 بكسل ، وهو تنسيق favicon.ico ، وأنه مخبأ باستخدام المكوّن الإضافي لذاكرة التخزين المؤقت.

10. إزالة بيانات EXIF

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

تحتوي معظم المكونات الإضافية لتحسين الصورة (بما في ذلك Imagify و ShortPixel و Kraken و EWWW و Smush) على خيار إزالة بيانات EXIF ​​تلقائيًا. هنا إعدادات Imagify …

تخيل إزالة بيانات EXIF

11. Cloudflare تحسين الصورة

لدى Cloudflare أيضًا بعض الطرق لتحسين الصور. تم العثور على سراب وبولندي في إعدادات سرعة Cloudflare بينما تم العثور على حماية Hotlink في الخاص بك إعدادات Scrape Shield.

Cloudflare ميراج (ميزة احترافية) – لتقليل طلبات الصور ، وتحميل الصور البطيئة ، وتحسين أوقات تحميل الصور على الأجهزة المحمولة ذات اتصالات الشبكة البطيئة. هنا مزيد من التفاصيل …

  • تغيير حجم الصور بناءً على جهاز / اتصال الزائر. سيحصل الزائر الذي لديه اتصال ضعيف على نسخة أصغر (دقة أقل) حتى يعود إلى عرض نطاق ترددي أعلى.
  • يقلل من كمية الطلبات – بدلاً من إرسال طلبات متعددة لجميع الصور على موقع الويب ، تسحب Mirage هذا في طلب واحد حتى يتمكن الزوار من رؤية الصور على الفور.
  • الكسل يحمّل الصور (يحمّلها فقط بمجرد تمرير المستخدمين لأسفل ورؤية الصورة فعليًا).

صورة Cloudflare ميراج

Cloudflare البولندية (ميزة Pro) – شرائط بيانات EXIF ​​وضغط الصور.

صورة Cloudflare البولندية

Cloudflare Hotlink Protection – يمنع الأشخاص من نسخ صورك ولصقها على مواقع الويب الخاصة بهم ، والتي (بما أنك لا تزال تستضيف تلك الصورة) ستمتص عرض النطاق الترددي الخاص بك.

Cloudflare Hotlink Protection

12. كسول تحميل الصور

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

يمكنك استخدام ال البرنامج المساعد تحميل كسول, تحميل كسول لمقطع فيديو, أو استخدم WP Rocket …

WP-Rocket-Lazy-Load

13. حفظ بتنسيق صحيح

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

jpg_vs_png

توضيح من لابنول

14. أسماء ملفات الصور

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

تسمية أسماء ملفات الصور

15. نص بديل

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

إضافة نص بديل للصور تلقائيًا – استخدم ال المكوّن الإضافي Attributes Image التلقائي. الآن كلما أضفت صورة ، سيضيف المكوّن الإضافي نصًا بديلًا يماثل اسم الملف …

بديل ="WP-Fastest-Cache-Plugin" العرض ="577" الارتفاع ="247" />

البحث عن نص بديل مفقود – Screaming Frog هي أداة مجانية تظهر لك جميع الصور التي تفتقد إلى نص بديل.

  • تحميل صراخ الضفدع SEO العنكبوت
  • أدخل موقع الويب الخاص بك وانقر فوق “ابدأ” للزحف إلى موقع الويب
  • انقر فوق علامة التبويب الصور
  • اذهب إلى نظرة عامة → نص بديل مفقود (انظر أدناه)
  • حدد هذه الصور على موقعك وأضف نصًا بديلًا

نص بديل للصورة مفقود - صراخ الضفدع

16. Open Graph (Facebook + Twitter)

هذا يجعل تنسيق المحتوى الخاص بك بشكل صحيح عند مشاركته على Facebook / Twitter ، وتحديداً صورتك لأن كلا الشبكتين تستخدمان أبعادًا مخصصة لعرضها ، وإلا ستبدو مضحكة.

مشاركة فايسبوك

إذا كنت تستخدم Yoast ، فانتقل إلى الإعدادات “الاجتماعية” وقم بتمكين Open Graph لكل من Facebook / Twitter …

Yoast-Social-Meta-Data

الآن قم بتحرير صفحة / مشاركة ، ثم انقر فوق رابط “مشاركة” في Yoast وسترى خيارات لتحميل صور مخصصة لـ Facebook (1200 عرض × 628 ارتفاع) وتويتر (1024 عرض × 512 ارتفاع).

yoast-social-media-التحسين

17. الصور في القصاصات المميزة

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

3 أنواع من القصاصات المميزة

  • إجابات
  • الجداول
  • القوائم

ظهرت صورة مقتطفات

كيفية الحصول على قصاصات مميزة في جوجل

  • استهدف كلمة رئيسية حيث يريد الناس مختصرا إجابة
  • استعمال برنامج Moz Keyword Explorer لتحديد الكلمات الرئيسية للسؤال
  • استخدم Answer The Public للعثور على المزيد من الكلمات الرئيسية للسؤال
  • اختر ما إذا كان يجب أن تكون الإجابة فقرة أو قائمة أو جدول
  • صمم صورة جميلة (أو التقط صورة) تصف الكلمة الرئيسية
  • استخدم الطول المثالي للحرف (انظر الصورة أدناه مأخوذة من موز)
  • إنشاء محتوى قائم على الحقائق بمراجع جودة (روابط ، رسومات ، إلخ)
  • استهدف الكلمات الرئيسية التي تحتوي بالفعل على مقتطف مميز ولكنها تؤدي وظيفة سيئة
  • إذا كنت تستهدف مربع الإجابة ، فاستهدف كلمتك الرئيسية باستخدام المطابقة التامة
  • تأكد من أنك في الصفحة الأولى للكلمة الرئيسية ، إن لم يكن ، قم بتحسين المحتوى

طول القصاصات المميزة المثالية

18. البيانات المنظمة

يمكن استخدام الصور في البيانات المنظمة (و شارات) لأنواع المحتوى التالية:

مقتطف فيديو غني

مقتطفات وصفة غنية

مقتطف منتج غني

ما يجب أن تستخدم البرنامج المساعد المقتطفات الغنية?
أنا أستعمل مراجعة WP الخاصة بـ MyThemeShop (هذه هي الصفحة التي أستخدمها فيها) والتي تدعم 14 نوعًا من البيانات بما في ذلك الوصفات ومراجعات المنتج. كنت أستخدم WP Rich Snippets ولكن المطور تخلى عن المكون الإضافي ولم يتم تحديثه لأكثر من عامين ، الكل في واحد البرنامج المساعد مملة فقط (لديها نقص في الخيارات والتصميم). WP Review Pro سهل الاستخدام للغاية.

19. صور ستايل

لا تنس أن تصمم صورك! أنا استخدم الحدود على معظم الألغام.

  • عناوين الصور
  • روابط الصورة
  • حدود الصورة
  • شرح الصورة

20. تغيير حجم ملفات GIF

تمامًا مثل تغيير حجم الصور إلى الأبعاد الصحيحة ، يجب تغيير حجم ملفات GIF أيضًا (استخدم GIF GIF).

تغيير حجم ملف GIF …

تغيير حجم ملفات GIF

ثم ضغطها …

ضغط ملفات GIF

النتائج 🙂

تحسين GIF الكلب

21. مخبأ الجرافات

إذا كان لديك منشورات بها الكثير من التعليقات, الجرافات يمكن أن يدمر تقريرك تماما. يمكنك تعطيلها أو كسر التعليقات لإظهار عدد معين فقط من التعليقات أو تجربة المكوّن الإضافي لذاكرة التخزين المؤقت Gravatar. قد تحتاج إلى إجراء القليل من الاختبار لأن بعض المكونات الإضافية لا تعمل على بعض مواقع الويب.

  • مخبأ جرافيتارز (الأمثل, هاري, أو FV Gravatar Cache)
  • قم بتعطيل الجرافات تمامًا
  • اضبط Gravatar الافتراضي على فارغ
  • احذف التعليقات التي لا تضيف قيمة
  • قم بتعيين Gravatar الافتراضي على صورة مخصصة على الخادم الخاص بك
  • قصر صور Gravatar على أبعاد أصغر (مثل 32 بكسل)
  • ترقيم الصفحات في WP قم بتعطيل عرض 20 تعليقًا فقط في المرة الواحدة
  • إذا لم يعمل أي من هذه ، تحقق من البرنامج التعليمي للتخزين المؤقت لـ Gravatars من WP Rocket

صور الكاش-جرافيتار

22. تجنب تضمين الصور من المواقع الخارجية

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

23. أدوات تحسين الصورة

تجنب استخدام المكونات الإضافية ذات الوظائف المكررة – Imagify و ShortPixel و Kraken و EWWW و Smush جميعها تفعل نفس الشيء بشكل أساسي (ضغط بدون فقدان ، وإزالة بيانات EXIF ​​، وتغيير حجم الصور). يحتوي WP Rocket على خيارات للتحميل البطيء ، والتخزين المؤقت ، و CDN (وتنظيف قاعدة البيانات + استضافة Google Analytics محليًا) التي لا تحتوي عليها معظم المكونات الإضافية المخبأة ، مما يوفر عليك استخدام الإضافات الإضافية.

أسئلة مكررة

&# x2705 ؛ كيف يمكنك إصلاح أخطاء تحسين الصورة في GTmetrix?

من خلال ضغطها دون فقد باستخدام مكون إضافي مثل ShortPixel أو Imagify أو Smush. أستخدم ShortPixel لأنه يعمل دائمًا على إصلاح هذا الخطأ في GTmetrix.

&# x2705 ؛ كيف يمكنك إصلاح أخطاء Serve Scaled Image في GTmetrix?

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

&# x2705 ؛ كيف يمكنك إصلاح أخطاء تحديد أبعاد الصورة في GTmetrix?

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

&# x2705 ؛ أي طرق أخرى لتحميل الصور بشكل أسرع?

ستؤدي إزالة بيانات EXIF ​​واستخدام CDN لخدمة صورك إلى إحداث فرق كبير خارج التوصيات في GTmetrix.

&# x2705 ؛ أي تحسين الصورة هو الأفضل?

أستخدم ShortPixel لأنه لا يوجد تقريبًا فقدان في الجودة ويصلح عنصر تحسين الصور في GTmetrix.

ما رأيك?
هل يبدو تقرير GTmetrix الخاص بك أفضل قليلاً؟ اسمحوا لي أن نعرف في التعليقات! وإذا كنت تريد المزيد من النصائح التي ستمنحك نتائج أفضل / أوقات تحميل أفضل ، فراجع دليل سرعة WordPress الكامل الخاص بي.

في صحتك,
توم

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector