تحسين الصور على موقعك ووردبريس لمحركات البحث
يعد تحسين الصور مهم جداً، حيث له تأثير كبير على أوقات تحميل الصفحة الإجمالية، وهذا ليس امر يمكن اهماله، حيث تعمل الصور كبيرة الحجم على إبطاء صفحات موقعك، مما يخلق تجربة مستخدم سيئة، ويعطي انطباع سيئ عن الموقع لدى المستخدمين، ما يجعل المستخدم لا يفكر في إعادة استخدام موقعك، مهما كان نوع المحتوى الذي تقدمة.
ما المقصود بتحسين الصور؟
تحسين الصور يمكن توضيح معنى تحسين الصور بانها عملية تقليل حجم الصورة، بحيث يحافظ على جودة الصورة، وذلك باستخدام مكون إضافي او نص برمجي او عبر احد المواقع Online التي تعمل على ضغط الحجم و الحفاظ على جودة الصورة، مما يؤدي بدوره إلى تسريع وقت تحميل الصفحة، وهناك طرقتين هما الضغط الخاسر و الضغط غير المنقوص طريقتان تستخدمان بشكل شائع.
فوائد تحسين الصور لموقعك
وفقًا لأرشيف HTTP، اعتبارًا من أغسطس 2019، تشكل الصور في المتوسط 34٪ من إجمالي وزن صفحة الويب، لذلك بعد مقاطع الفيديو التي يصعب تحسينها، فإن الصور هي أول ما يجب أن تبدأ به، إنها أكثر أهمية من JavaScript و CSS و Fonts، ومن المفارقات أن تحسين الصور، هو أحد أسهل الأشياء التي يمكن تنفيذها، ومع ذلك يتجاهل الكثير من مالكي مواقع الويب ذلك.
سيؤدي ذلك إلى تحسين سرعة تحميل صفحتك، إذا كانت صفحتك تستغرق وقتًا طويلاً لتحميلها، فقد يتعب الزائرون من الانتظار وينتقلون إلى شيء آخر.
- تحسين الصور أيضا يلعب دورا هاماً في تحسين SEO الخاص بك، كما سيحتل موقعك مرتبة أعلى في نتائج محركات البحث، حيث وان الملفات الكبيرة تبطئ موقعك وتكره محركات البحث المواقع البطيئة، من المحتمل أيضًا أن يزحف محرك بحث Google إلى صورك ويفهرسها بشكل أسرع للبحث عن الصور من Google. هل تشعر بالفضول بشأن النسبة المئوية لحركة المرور التي تأتي من بحث الصور من Google؟ يمكنك استخدام مكون إضافي لبرنامج Google Analytics WordPress.
متوسط البايت لكل صفحة (كيلو بايت)
شكلت الصور في المتوسط 54٪ من الوزن الإجمالي للصفحات في ديسمبر 2017، لذلك يبدو أن الويب ككل يتحسن في تحسين الصورة، لكن 34٪ لا يزال رقمًا لا يمكن تجاهله، إذا لم يكن لديك أي محتوى فيديو على موقع الويب الخاص بك، فمن المحتمل أن تكون الصور هي العامل الأول بالنسبة لوزن الصفحة.
إيجاد التوازن (حجم الملف وجودته)
الهدف الأساسي من تنسيق صورك هو إيجاد التوازن بين أقل حجم للملف وجودة مقبولة، هناك أكثر من طريقة لإجراء كل هذه التحسينات تقريبًا، إحدى الطرق الأساسية هي ضغطها قبل تحميلها على WordPress.
يمكن استخدام أدوات او برامج او تطبيقات او مواقع اون لاين لتحقيق ذلك مثل Adobe Photoshop أو مواقع مباشره مثل Squoosh او I love imag، وغيرها من المواقع و البرامج و الأدوات ومع ذلك يمكن أيضًا تنفيذ هذه المهام تلقائيًا باستخدام المكونات الإضافية.
الشيئان الأساسيان اللذان يجب مراعاتهما هما تنسيق الملف ونوع الضغط الذي تستخدمه، باختيار الامتداد او النوع الصحيح لصورة jpg - png - jif - web، تنسيق الملف ونوع الضغط، يمكنك تقليل حجم صورتك بما يصل إلى 5 مرات، سيتعين عليك تجربة كل صورة أو تنسيق ملف لمعرفة الأفضل.
قبل أن تبدأ في تعديل صورك، تأكد من أنك اخترت أفضل نوع ملف، فهناك عدة امتدادات او أنواع من الملفات التي يمكنك استخدامها:
- PNG - تنتج صورًا عالية الجودة، ولكن لها أيضًا حجم ملف أكبر، تم إنشاؤه كتنسيق صورة بدون فقدان للجودة، على الرغم من أنه يمكن أن يكون أيضًا مع فقدان البيانات.
- JPEG - يستخدم لتحسين مع فقدان الجودة وبدون فقدان الجودة، يمكنك ضبط مستوى الجودة لتحقيق توازن جيد بين الجودة وحجم الملف.
من الناحية المثالية ، يجب عليك استخدام JPEG (أو JPG) للصور التي تحتوي على الكثير من الألوان و PNG للصور البسيطة.
ماذا عن ملفات GIF؟ دائمًا ما تكون صور GIF المتحركة ممتعة، لكنها تقتل أداء الويب، يزيد حجم الكثير من ملفات GIF عن 1 ميغابايت، نوصي بالاحتفاظ بها لوسائل التواصل الاجتماعي و Slack، إذا كان هناك ملف لا يمكنك العيش بدونه في منشور المدونة الخاص بك، فستجد طرق لضغط المناسب لها سنذكرها في موضوع اخر.
جودة الضغط مقابل الحجم
فيما يلي مثال لما يمكن أن يحدث عند ضغط الصورة أكثر من اللازم:
الأول هو استخدام معدل ضغط منخفض للغاية، مما ينتج عنه أعلى جودة (لكن حجم ملف أكبر).
الثاني هو استخدام معدل ضغط مرتفع للغاية، مما ينتج عنه صورة منخفضة الجودة للغاية (لكن حجم ملف أصغر).
حجم الصورة الأصلية 2.06 ميجا بايت، كما ترى الصورة الأولى أعلاه هي 590 كيلو بايت. هذا كبير جدًا لصورة واحدة! من الأفضل عمومًا الاحتفاظ بإجمالي وزن صفحة ويب أقل من 1 أو 2 ميغابايت، 590 كيلو بايت سيكون ربع ذلك بالفعل، الصورة الثانية تبدو مروعة، لكنها لا تتجاوز 68 كيلوبايت، ما تريد القيام به هو العثور على حل وسط بين معدل الضغط (الجودة) وحجم الملف.
لذلك أخذنا الصورة مرة أخرى بمعدل ضغط متوسط، وكما ترى أدناه، تبدو الجودة جيدة الآن، وحجم الملف هو 151 كيلوبايت، وهو مقبول لصورة عالية الدقة، هذه الصورة أصغر بمقدار 4 مرات تقريبًا من الصورة الأصلية ذات الضغط المنخفض، نحاول الاحتفاظ بمعظم صورنا تحت علامة 100 كيلوبايت للحصول على أفضل أداء.
ضياع مقابل تحسين بلا خسارة
من المهم أيضًا أن تفهم أن هناك نوعين من الضغط يمكنك استخدامهما، الضغط الخاسر و الضغط غير المنقوص.
يتضمن الضغط مع الفقد التخلص من بعض البيانات الموجودة في صورتك، لهذا السبب، فهذا يعني أنك قد ترى تدهورًا (انخفاض في الجودة أو ما يشير إليه البعض على أنه منقسم)، لذلك عليك أن تكون حذرًا بشأن مقدار تقليل صورتك، ليس فقط بسبب الجودة، ولكن أيضًا لأنه لا يمكنك عكس العملية، بالطبع إحدى الفوائد العظيمة للضغط مع فقدان البيانات، وسبب كونه أحد أكثر طرق الضغط شيوعًا، هو أنه يمكنك تقليل حجم الملف بمقدار كبير.
لا يؤدي الضغط بدون فقد، على عكس فقدان البيانات، إلى تقليل جودة الصورة.
كيف يكون هذا ممكنا؟ يتم ذلك عادةً عن طريق إزالة البيانات الوصفية غير الضرورية (البيانات التي يتم إنشاؤها تلقائيًا والتي ينتجها الجهاز الذي يلتقط الصورة)، ومع ذلك فإن العيب الأكبر لهذه الطريقة هو أنك لن ترى انخفاضًا كبيرًا في حجم الملف، بمعنى آخر سوف يأخذ مساحة كبيرة على موقعك بمرور الوقت.
سترغب في تجربة ما يناسبك بشكل أفضل، ولكن بالنسبة لغالبية المستخدمين، نوصي باستخدام الضغط مع فقدان الجودة نظرًا لحقيقة أنه يمكنك بسهولة ضغط صورة تزيد عن 70٪ (في بعض الأحيان أكثر من 90٪!) دون فقدان الكثير من الجودة، اضرب هذا بـ 15 صورة على الصفحة، وسوف يلعب دورًا مهمًا في تقليل وقت تحميل موقعك.
ملحقات ضغط الصور
الخبر السار هو أن هناك بعض الإضافات الرائعة لضغط الصور في WordPress، والتي يمكنك استخدامها لا تمام العملية بأكملها، فيما يلي بعض المكونات الإضافية التي نوصي بها:
- Imagify (ضياع وبدون فقد - تحسين الصور خارجيًا)
- Optimole (ضياع وبدون فقد - يحسن الصور خارجيًا)
- WP Smush (ضياع وبدون فقد - يحسن الصور خارجيًا)
- سحابة EWWW (ضياع وبدون فقد - تحسين الصور خارجيًا)
- ShortPixel (ضياع وبدون فقد - يحسن الصور خارجيًا)
أهم شيء عند اختيار مكوِّن إضافي لتحسين الصور هو استخدام مكوِّن يقوم بضغط الصور وتحسينها خارجيًا على خوادمهم، وهذا بدوره يقلل من الحمل على موقعك، جميع الإضافات التي ذكرناها تقوم بهذا.
إذا كنت مهتمًا، فنحن نستخدم المكون الإضافي Imagify على موقعنا، يقوم تلقائيًا بضغط الصور عند تحميلها إلى مكتبة وسائط WordPress، لذلك لا داعي للقلق بشأن أي شيء، بمرور الوقت يمكنك التعرف على مستوى ضغط الصورة الذي تريد استخدامه.
ملاحظة: الافضل استخدم ملفات PNG للصور التي عبارة عن أيقونات ورسوم توضيحية وليست صورًا.
ما مدى سرعة موقع WordPress الخاص بك إذا كنت تستخدم ضغط الصور؟ كل هذا يتوقف على أحجام الصور الأصلية وما هي عليه بعد الضغط، ومع ذلك أجرينا بعض اختبارات السرعة ووجدنا أن حل ضغط الصور عالي الجودة يمكن أن يقلل أوقات تحميل الصفحة بأكثر من 80٪.
تحميل بطيء
إذا كان لديك الكثير من الصور، فقد تفكر في التحميل البطيء، هذه تقنية تحسين تقوم بتحميل المحتوى المرئي ولكنها تؤخر تنزيل وعرض المحتوى الذي يظهر أسفل الجزء المرئي من الصفحة، وقد أصدرت Google للتو توصياتها للتحميل البطيء.
نصائح إضافية لتحسين الصور
إليك بعض النصائح النهائية لتحسين الصورة لتتغلب عليها.
- لقد ولت أيام تحميل الصور بحجم عرض العمود أو DIV فقط، تعمل الصور المستجيبة خارج الصندوق في WordPress (منذ الإصدار 4.4) وستعرض تلقائيًا أحجامًا أصغر للصور لمستخدمي الأجهزة المحمولة.
- يمكن أن تكون SVGs بديلاً رائعًا آخر لاستخدام الصور، عادةً ما يكون حجم ملفات SVG أصغر كثيرًا، على الرغم من أنه ليس دائمًا.
- استخدم خطوط الرموز بدلاً من وضع النص داخل الصور - فهي تبدو أفضل عند تغيير حجمها وتشغل مساحة أقل، وإذا كنت تستخدم منشئ خطوط، فيمكنك تحسينها بشكل أكبر، تحقق من كيفية تقليل حجم ملف خطوط الأيقونات بنسبة هائلة بلغت 97.59٪ باستخدام منشئ الخطوط.
- قد ترغب أيضًا في النظر إلى WebP، وهو تنسيق جديد للصور من Google يكتسب قوة جذب سريعًا.
ليست هناك تعليقات:
إرسال تعليق