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

إن وجدت إن سرعة التحميل أقل من 50% إذن قم باستكمال القراءة لتلك التدوينة، أما إن كانت النتائج +80% تجاهل القراءة وعلّق على التدوينة بكيفية وصولك لهذه النتيجة حتى نستفيد جميعًا.

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

إذا وجدت إن سرعة تحميل موقعك\مدونتك أقل من 50% فسوف نقوم بالخطوات التالية من تعديل:

أولًا: التعديل على ملف .htaccess  لتفعيل ضغط الخطوط والملفات النصية وملفات CSS من خلال تفعيل خاصية GIZP حسنًا نقوم بتسجيل الدخول إلى لوحة تحكم الاستضافة\السيرفر Cpanel، ومن ثم الدخول على مدير الملفات File manger في لوحة التحكم والبحث عن ملف .htaccess بعد فتح الملف سيظهر بداخله أكواد مختلفة تجاهلها ولا تقم بتعديل أي شيء بها سوف نقوم بإضافة الكود التالي:

# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent

بعض إضافة الكود السابق: نقوم بحفظ الملف Save وإغلاقه، قم بإعادة تجربة سرعة الموقع الآن من خلال أداة جوجل التي كتبنا عنها في السابق، هل ترى فرقًا الآن في سرعة التحميل لموقعك\مدونتك؟

ثانيًا: قم بفتح لوحة تحكم WordPress وأذهب إلى قائمة إضافات واختر “أضف جديد” وابحث عن تلك الإضافة: “Autoptimize” قم بالضغط على “تثبيت\تنصيب” وبعد ذلك قم بتفعيلها، وظيفة تلك الإضافة هي:
Makes your site faster by optimizing CSS, JS, Images, Google fonts and more.
بعد الخطوات السابقة سنقوم بالدخول على إعدادات الإضافة ونقوم بتفعيل الإعدادات كما بالصورة الموضحة:

بعد إعداد تلك الخيارات قم بالضغط على: “Save Changes and Empty Cache” وقم بإعادة تجربة أداة جوجل واختبر سرعة تحميل موقعك\مدونتك هل لاحظت فرق للأفضل؟ أخبرني بذلك في التعليقات.

ثالثًا: سوف نعيد تكرار الخطوة الثانية ولكن بتثبيت إضافة أخرى، ابحث عن “Swap Google Fonts Display” بعد ذلك قم بتثبيتها، لا توجد إعدادت لتلك الإضافة فقط بعد تثبيتها سوف تقوم بوظيفتها وخصائصها وهي:
Inject font-display: swap to Google Fonts to ensure text remains visible during webfont load

رابعًا: قم بتثبيت هذه الإضافة بنفس الخطوات السابقة، اسم الإضافة “Regenerate Thumbnails” ووظيفتها:

Regenerate the thumbnails for one or more of your image uploads. Useful when changing their sizes or your theme.
بعد تثبيت وتفعيل الإضافة مثل الخطوات السابقة أذهب إلى إعدادات الإضافة من قسم “أدوات” واختر
"Skip regenerating existing correctly sized thumbnails (faster)."
وبعدها قم بالضغط على: “Regenerate Thumbnails For All xxx Attachments” والإنتظار قليلًا من الوقت، انصحك بعدم غلق النافذة أثناء تلك العملية، وإن أحببت ضغط الصور الأساسية فقط سوف نتجاهل أول خطوة ونقوم بالاختيار التالي “Regenerate Thumbnails For The xxx Featured Images Only” وننتظر قليلًا من الوقت وبعدها ستنتهي الإضافة من عملها، بعد تلك الخطوة قم كالعادة بإعادة تجربة سرعة التحميل للمدونة\الموقع من خلال أداة جوجل (PageSpeed Insights).

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

سرعة التحميل من الحاسوب:

سرعة التحميل من الموبايل:

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

? روابط: 

• هل تبقى للملل وجود في حياتنا؟
• أهمية النباتات المنزلية
• أنواع مختلفة من القوائم (2)
• #من_المسودة: الخروج من العش إلى العرين

هذا كل شيء. ?
مصدر الصورة