كيفية جعل الصور يتم تحميلها بشكل أسرع على ووردبريس: 6 تكتيكات رئيسية

هل تواجه صعوبة في جعل الصور يتم تحميلها بشكل أسرع على موقع الويب الخاص بك؟

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

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

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

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

كيفية جعل تحميل الصور أسرع: ست استراتيجيات للأداء

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

يمكنك التفكير في هذا القسم على أنه " النظرية " والقسم التالي هو " الكيفية القابلة للتنفيذ ".

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

1. ضغط الصور.
2. تغيير حجم الصور.
3. تحويل الصور إلى تنسيقات محسنة مثل WebP.
4. استخدم شبكة توصيل المحتوى (CDN) لتسريع أوقات تنزيل الصور (خاصة للزوار البعيدين عن استضافة موقعك).
5. تحميل الصور كسول.
6. تمكين التخزين المؤقت للمتصفح لتسريع الزيارات اللاحقة.

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

دعنا نتعرف على كيفية تسريع هذه التكتيكات من تحميل صورك على WordPress.

1. ضغط الصور

يتيح لك ضغط الصور تقليص حجم ملف الصورة دون تغيير أبعادها. يعمل الضغط عن طريق إزالة المعلومات الزائدة / غير الضرورية وتطبيق خوارزميات مختلفة لتقليل حجم الملف.

هناك نوعان من الضغط:

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

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

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

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

بعد استخدام الضغط مع الفقد في صورة الاختبار ، تمكنا من تقليص الحجم من 133.7 كيلوبايت إلى 36.9 كيلوبايت مع تغيير طفيف جدًا في الجودة - وهذا يمثل انخفاضًا بنسبة 73٪ في حجم الملف :

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

أعلاه ، قلنا لك أن ضغط الصور يتيح لك تغيير حجم ملف الصورة دون تغيير أبعادها. لكن في معظم الحالات ، تريد تغيير أبعاد الصورة ، حيث يأتي تغيير حجم الصورة.

كل الأشياء متساوية ، كلما كبرت أبعاد الصورة ، زاد حجم ملفها. وكلما زاد حجم الملف ، كان تحميل الصور أبطأ.

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

ما حجم المدخرات ؟ إليك مثال اختبار سريع حيث قمنا فقط بتغيير حجم الصورة دون إضافة أي ضغط:

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

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

3. تحويل الصور إلى WebP

WebP هو تنسيق صور حديث من Google يمكنه تقديم أحجام ملفات أصغر من JPEG أو PNG دون أي خسارة في الجودة.

في المتوسط ​​، تكون صور WebP أصغر بنسبة 25-34٪ من صور JPEG المماثلة و 26٪ أصغر من صور PNG القابلة للمقارنة.

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

لمعرفة المزيد حول هذا التنسيق ، راجع دليلنا الكامل لصور WebP.

4. استخدم شبكة توصيل المحتوى (CDN)

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

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

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

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

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

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

يمكن أن يؤدي التحميل البطيء لصور موقع WordPress الخاص بك إلى الحد من تأثير صورك على أوقات التحميل الإجمالية لموقعك.

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

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

6. قم بتمكين التخزين المؤقت للمستعرض

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

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

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

كيفية تسريع تحميل الصور باستخدام ملحقات WordPress

الآن ، دعنا ندخل في كيفية تنفيذ الأساليب الستة لتحميل الصور بشكل أسرع على موقع WordPress الخاص بك.

ستحتاج فقط إلى مكونين إضافيين لإعداد كل شيء:

• تخيل - ستستخدم هذا لتحسين ملفات الصور نفسها.
• WP Rocket - ستستخدم هذا لتحسين كيفية قيام موقع الويب الخاص بك بخدمة ملفات الصور هذه للزوار.

تخيل - ضغط وتغيير حجم وتحويل إلى WebP

Imagify هو مكون إضافي WordPress سهل الاستخدام يمكنه التعامل مع أول ثلاث نصائح للتحسين في قائمتنا.

بمجرد تكوينه ، سيقوم تلقائيًا بتحسين جميع الصور التي تقوم بتحميلها إلى WordPress باستخدام التكتيكات التالية:

• ضغط الصور باستخدام خوارزميات ضياع أو ضياع معتدل أو عدواني.
• تغيير حجم الصور لأبعاد معينة قصوى.
• تحويل الصور إلى WebP وخدمتها للزوار.

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

للبدء ، قم بتثبيت وتنشيط البرنامج المساعد Imagify المجاني من WordPress.org. بمجرد تنشيط المكون الإضافي ، سيطالبك بإدخال مفتاح API ، والذي يتيح لك توصيل موقع WordPress الخاص بك بخدمة تحسين Imagify.

للحصول على مفتاح API الخاص بك ، يمكنك التسجيل للحصول على حساب Imagify مجاني. ستتمكن من تحسين 20 ميغابايت من الصور شهريًا مجانًا إلى الأبد ( حوالي 200 صورة شهريًا ).

إذا كنت بحاجة إلى تجاوز هذه الحدود ، فإن الخطة المدفوعة تكلف 4.99 دولارًا أمريكيًا شهريًا مقابل 500 ميجابايت (حوالي 5000 صورة) أو 9.99 دولارًا أمريكيًا شهريًا للاستخدام غير المحدود. يمكنك استخدام الخطط المدفوعة على مواقع WordPress غير محدودة.

بمجرد حصولك على مفتاح API الخاص بك ، يمكنك لصقه في المربع والنقر فوق Connect Me :

بعد ذلك ، انتقل إلى الإعدادات → Imagify لتهيئة إعدادات تحسين الصورة.

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

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

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

وهذا كل شيء! سوف يقوم Imagify الآن تلقائيًا بتحسين جميع الصور الجديدة التي تقوم بتحميلها على WordPress .

إذا كان لديك الكثير من الصور الموجودة على موقعك ، فيمكنك الحصول على Imagify بالجملة لتحسينها بالانتقال إلى Media → Bulk Optimization:

WP Rocket - التخزين المؤقت للمتصفح والتحميل البطيء و CDN

WP Rocket هو مكون إضافي كامل لأداء WordPress يمكنه تسريع موقعك بالكامل وتنفيذ تكتيكات تحسين الصور الأخرى التي ناقشناها. هذا يشمل:

• تنفيذ ذاكرة التخزين المؤقت للمتصفح.
• تحميل الصور كسول.
• الاتصال بشبكة CDN.

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

لإعداده ، ستحتاج أولاً إلى شراء WP Rocket وتثبيته.

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

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

لإعداد CDN ، يمكنك الانتقال إلى علامة التبويب CDN. أسهل طريقة للبدء هي استخدام خدمة RocketCDN ، والتي تكلف 7.99 دولارًا فقط شهريًا لعرض النطاق الترددي غير المحدود. أو ، يمكن أن يساعدك WP Rocket أيضًا على التكامل مع خدمات أخرى مثل Bunny CDN أو KeyCDN أو StackPath.

إذا كنت تستخدم شبكة CDN وقمت بتكوين Imagify لخدمة صور WebP باستخدام طريقة العلامات <picture> ، فستحتاج إلى الرجوع إلى إعدادات Imagify (الإعدادات ← Imagify) وإدخال عنوان URL الخاص بـ CDN في مربع إعدادات WebP.

اجعل صورك يتم تحميلها بشكل أسرع اليوم

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

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

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

بعد ذلك ، يمكنك أيضًا استخدام WP Rocket لتحسين كيفية استخدام وتحميل الصور على موقعك بأساليب مثل CDN والتخزين المؤقت للمتصفح والتحميل البطيء.

هل لا يزال لديك أي أسئلة حول كيفية جعل الصور يتم تحميلها بشكل أسرع لموقع WordPress الخاص بك؟ اسمحوا لنا أن نعرف في التعليقات!