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

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

عدد مشاهدة الصفحات لمدونتي عبر الجوال والتابلت يفوق عدد المشاهدات عبر اللابتوب او الديسكتوب عمومًا. تقريبًا بين ٦٠٪ الى ٧٠٪ من الزوار يدخلون اما باستخدام جوال/تابلت من ابل او مثيلاتها من اندرويد.

مقارنة قبل ١٠ سنين بوقتنا الحالي فاغلب المشاهدات تاتي من الهواتف الذكية وليس الحواسيب الشخصية.

في فترة ما قبل كورونا كنت كثير ما اتكاسل في تحديد الصور ومعالجتها في مدوناتي ومنشوراتي وكثير من هذه الصور كانت احجامها تتراوح بين 300 كيلوبايت الى 2 ميجابايت .. وبكل الاحوال ومقارنة بالغرض من استخدامي للصور في مدوناتي فمن المفترض ان اكبر صورة واكثرهم دقة لا يزيد حجمها عن 100 كيلوبايت.

ان اكثر من سيلاحظ بطئ الصفحة او بطئ تحميل الصور هو كل من يتصفح مدونتك من خلال الهاتف بشكل خاص خصوصًا اذا كان على شبكة 3G «ومازال الكثير في الشرق الاوسط على شبكات 3G رغم ان في اوروبا بدأ الناس باستخدام الجيل الخامس».

الصور مجرد عامل من عدة عوامل للحصول على مدونة سريعة التصفح

الصور ليست العامل الوحيد في تحديد سرعة تصفح المدونات، وخصوصًا مدونات وردبريس.

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

استخدم كاش (الملفات المؤقتة) لصفحات المدونة

بالاضافة لاستخدام عدة طبقات من كاش الصفحات لتقليل وقت معالجة الطلبات HTTP Requests. مثل الـ Opcode Cache لحفظ نسخة مفسرة من كود php لتسريع استجابة السيرفر لتنفيذ الطلب.

من ثم استخدام طبقة اخرى من الكاش تقوم بحفظ الصفحة «بشكلها النهائي عند ارسالها للزائر» بعد الانتهاء من معالجتها على شكل ملف ثابت Static file، بحيث عند طلبها من زائر اخر يتم تسليم الصفحة الجاهزة بدل من اعادة معالجة نفس الطلب من الصفر في كل مرة. وفي اغلب الاوقات لن يكون هناك اي داعي كون صفحات المدونات نادرًا ما يتغير محتواها.

الاوبكود كاش يحتاج لتدخل على السيرفر، فاذا كنت على استضافة مشتركة فعليك سؤال شركة الاستضافة. اما اذا كنت تدير السيرفر بنفسك فيمكنك البحث في الموضوع وتركيب واعداد احد الحلول المتوفرة.

اما كاش الصفحات فيمكنك استخدام احد الاضافات المخصصة لهذا الامر، مثل wp-super-cache او غيرها من اضافات الكاش للوردبريس.

ضبط وضغط الصور قبل رفعها على وردبريس

في الوقت الحالي بدأت اعالج جميع الصور قدر الامكان بصيغة WebP مع نسبة ضغط بين 60% ~ 80% حسب الصورة. وبهذا استطيع الحفاظ على جودة جيدة للغرض الذي احتاجه من الصور في مدونتي. قد يختلف الامر ان كنت مثلًا مصور او مصمم جرافيك فقد تحتاج لاستخدام كمية ضغط اقل من ما استخدم.

واستخدم برنامج Pixelmator Pro لمعالجة الصور من قص ومؤثرات وضغط وفورمات. وبالتاكيد يمكنك استخدام فوتوشوب او اي محرر صور جيد اخر.

محسن عرض الصور LiteSpeed/QUIC Cache في وردبريس

مدونتي ايضًا تستخدم محسن الصفحات الخاص بالويب سيرفر LiteSpeed وخدمة QUIC الخاصة بالـ CDN ومعالجة الصفحات والصور، وهي شبكة بالاصل طورت لمواقع وردبريس لكن حسب علمي انهم بدأو بدعم منصات اخرى.

وهنا تتم عدة امور:

• ضغط الصور المرفوعة بصيغة png والتي لم يتم ضغطها.
• عرض الصور بوضعية loading="lazy" بحيث الزائر ليس بحاجة لتحميل جميع الصور دفعة واحدة عند فتح الرابط، خصوصًا الصور التي لا تظهر الا بعد النزول بالصفحة.
• عرض صورة ضبابية مستخرجة من الصورة الاصلية، بحجم لا يتجاوز 2KB لتسريع فتح الصفحات ومن ثم يتم عرض الصورة الاصلية فور اكتمال تحميلها وتتم تحديثها بالمتصفح عبر الجافا سكربت.

استضافة صور وردبريس على شبكة CDN لتحسين سرعة التحميل

بالرغم من ان QUIC توفر خدمة CDN جيدة جدًا ولديهم ايضًا سيرفرات في الشرق الاوسط، لكن فضلت استخدام JetPack Photo CDN وهي خدمة من خدمات الشركة المالكة لوردبريس.

من حيث السرعة والاداء لم الاحظ فرق بين الاثنين ابدًا.

غير هذا، الخدمة مجانية تمامًا وبهذا لن احتاج للدفع الى QUIC مقابل استضافة الصور. وابقي رصيدي «الباقة المجانية لمستخدمين سيرفر LiteSpeed» حصرًا لمعالجة الصور والصفحات واستضافة صفحات الكاش والملفات الثابتة.