طريقة زيادة سرعة الوورد بريس والحصول على أعلى رقم فى Google PageSpeed Insights
يواجه الجميع مشكلة سرعة الوورد بريس وكم الأخطاء الكبير الموجود بعد فحص الموقع باداة PageSpeed Insights كما فى الرابط التالى
https://developers.google.com/speed/pagespeed/insights/ اليوم انا سوف اقوم بشرح كل خطأ موجود ف البيدج سبيد وكيفية علاجه ولو فاتتنى بعض الاخطاء فسيكون بسبب انها لم تواجهنى من قبل ولكن سأقوم بمساعدتك بها أيضا إذا عرضت مشكلتك فى الرد ولكن قبل عرض مشكلتك اقرا الموضوع كامل واذا لم تفهم نقطة معينة بالموضوع تستطيع أن تسألنى او اذا لم يشتمل الموضوع على الخطا الذى تعانى منه فى موقعك يمكنك سؤالى ايضا برد بسيط اسفل الموضوع أنا لست مبرمج على الاطلاق ولكنى مجرد صاحب موقع وبحكم الخبره استطعت الوصول بموقعى لرقم عالى جدا ف البيدج سبيد يصل إلى 97 فى الرئيسية و 87 فى المواضيع ولكن هذا النقص بسبب اعلانات جوجل ادسنس لدي فاذا قمت بايقافها صارت سرعة الموقع معى 99 او 100 على ال mobile وال Desktop لمن يعانى من مشكلة فى اخطاء ال PageSpeed او من سرعة الوورد بريس عامة او من لاول مره يطرأ على سماعه كلمة PageSpeed فليقوم بفحص موقعه على هذا الرابط مرة أخرى الان: https://developers.google.com/speed/pagespeed/insights/ ستواجهنا العديد من الاخطاء على الهاتف وايضا الكمبيوتر كما فى الصورة: قبل البدء أود التنويه على أنه أنت لست بحاجة إلى ادوات الكاش خاصة wp super cache لانها تؤثر على ملفات الجافا بما فيها اعلانات ادسنس ولذلك تقوم بتقليل ارباح ادسنس لديك فأنا أنصح بعدم استخدام wp super chache وحتى غيرها من ادوات الكاش وأيضا ما سنقوم به سيعوض تماما استخدامهم ويتفادى اضرارهم ومشكلاتهم المعقدة لذلك اكرر مرة ثانيه قبل الاستمرار فى القراءة إذا كان لديك ادوات كاش مثل wp-super-cache او w3 total cache قم بايقافهم تماما وغير ما يلزم فى ملف ال htaccess وال config.php لحذف ما يخص هذه الادوات بداخلهم واذا لم تستطع ازالتهم كاملا يمكنك البحث فى جوجل عن كيفية ازالتهم ازالة كاملة . نبدأ الان بعرض كل مشكلة على حدة وتفسير سببها وكيفية حلها أولا: التخلص من عناصر جافا سكربت و css التى تحظر عرض المحتوى فى الجزء العلوى Eliminate render-blocking JavaScript and CSS in above-the-fold content تظهر المشكلة كما بالصورة: هذه المشكلة تقول لك ان هناك ملفات javascript و css تمنع الزائر من الدخول إلى الصفحة حتى يقوم بتحميلها على المتصفح قبل الدخول وهذا يحدث فى عدة ثوانى لا تشعر انت به ف يقوم المتصفح بتنزيل هذه الملفات وبعد ذلك يقوم بفتح الموقع استنادا على معلومات هذه الملفات لتعرض لك الموقع بالشكل المطلوب. إذن المطلوب الان ان نقوم بجعل هذه المفات تفتح مع الموقع فى نفس الوقت ولا تعترض تحميل الموقع ف يقوم الموقع وهذه الملفات بالظهور للزائر فى ان واحد بدون انتظار وهذا يجعل ظهور الوورد بريس اسرع بكثير ولا يوجد وقت انتظار ولا حتى ثانيه واحده لعرض محتوى الموقع إذن كيف نقوم بجعل هذه الملفات أمرا لا يعترض ظهور الموقع أبدا وتختفى مشكلتها من البيدج سبيد؟ تابع معى... بالنسبة لل CSS كما رأيت فى اخطاء جوجل بيدج سبيد انه يمكنك ان تجد ثلاثة ملفات css تعترض الموقع ليس شرطا أن يكون ملفا واحدا خاص بستايل الوورد بريس ولذلك علينا الان ان نقوم بتجميع ملفات ال css اولا فى ملف واحد وبعد ذلك ناخذ محتوى هذا الملف ونقوم بفرده فى الموقع حتى يصبح جزءا مجزءا من الموقع وليس ملفا برابط نقوم باستدعائه انتظر لحظة : كل هذا سنقوم بعمله باستخدام اضافة plugin واحده بدون اي مجهود يذكر لا تقلق الامور سهله باذن الله وليست معقده هذه الاضافة اسمها Autoptimize سنقوم الان بتحميلها من الرابط التالى: https://wordpress.org/plugins/autoptimize/ طبعا الجميع يعرف كيفية تشغيل plugins تقوم بتحميل الملف ورفعه من ال ftp او ال file manager الى فولدر plugins الموجود داخل فولدر wp-content ثم تقوم بفكه وتذهب الى ادارة الوورد بريس plugins وتقوم بتفعيل البلاجن من Activate أعتقد الجميع يعرف طريقة تشغيل البلاجن نأتى الان الى ضبط اعدادات Autoptimize كما يجب أن تكون فى البداية ستجد الاعدادات مختصره ف يجب ان تضغط على كلمة Show Advanced Settings او Show more حسب اصدار الاداة ومن ثم تقوم بضبط الاعدادات كما بالصورة تنبيه : لا تقم باختيار الجافا سكربت هنا لتفادى لمس اي جافا سكربت خاصة بالاعلانات مثل اعلانات جوجل ادسنس وغيرها - لاحظ انى لم اقم باختيارها كما بالصورة السابقة الان قد قمنا بضبط ال css وانتهينا منه ::: نبدأ الان فى الجافا بالنسبة لل Java Script الحل المثالى للجافا سكربت أن نجعلها تأخذ صيغة Async ضمن الكود الخاص بها وذلك حتى نجعلها تحمل مع تحميل الموقع فى آن واحد وأيضا فى نفس الوقت لن تلمس الاداه اي جافا سكربت خارجية مثل اكواد اعلانات ادسنس وغيرها وهذا هو المطلوب الحل هنا هو استخدام اضافة تسمى Async JavaScript نقوم بتحميلها من الرابط التالى: https://wordpress.org/plugins/async-javascript/ بعد تنصيب الاداة ستجد اعداداتها مدرجة تحت كلمة Settings العامة فى لوحة تحكم الوورد بريس نقوم بضبط اعدادات الاداة كما بالصورة تماما: الان قمنا بحل أول خطا شائع يواجه معظم اصحاب المواقع فى الوورد بريس اذهب الان الى صفحة البيدج سبيد واختبر موقعك مره اخرى واذا ظهر لك هذا الخطا قم بالرد على الموضوع بصورة توضح ملف الجافا او ال css المعترض ثانيا : تحسين التخزين المؤقت للمتصفح Leverage browser caching ثالثا : تمكين الضغط Enable compression سأقوم بشرح المشكلتين سويا لان الحل مشترك صورة للخطأ الثانى والثالث: مشكلة التخزين المؤقت تعنى انه موقعك لا يخبر متصفح الزائر ان يقوم بحفظ ملفات الموقع مثل الصور والجافا سكربت على الجهاز الذى يستخدمه الزائر سواء كان هاتف او كمبيوتر او لاب توب ولذلك عندما تقوم بتصفح موقع ما للمره الاولى تجد كل الصور تقوم بالظهور كل على حدة وعند دخول الموقع مره اخرى تجد الصور ظهرت بدون تحميل والموقع اسرع وذلك لان الموقع اخبر متصفحك ان يقوم بحفظ الصور لحين العوده مره اخرى ولذلك وجب علينا ان نعطى مؤشر يقوم بعمل وقت لحفظ الكاش على الاجهزه اما مشكلة الضغط ف يقصد بها ان ملفات الموقع غير مضغوطه وتحتاج الى الضغط لزيادة سرعة الموقع وهاتان المشكلتان يتلخص حلهما فى كود واحد يضاف الى ملف ال htaccess الموجود داخل فولدر public_html وهذا هو الكود: كود:
# BEGIN DEFLATE COMPRESSION بمجرد تعديل الهتكس واضافة هذا الكود اليه لن تجد هذين الخطئين فى فحص PageSpeed ولكن ربما يظهر خطأ التخزين المؤقت مره ثانيه ولكن لملفات تابعه لمواقع خارجيه على سبيل المثال ملفات جافا اعلانات ادسنس واعلانات الميديا وجوجل اناليتيكس ف هذه الملفات لا يمكن التحكم ف التخزين المؤقت لها وأنت مجبر عليها لتكون هكذا لان هذا مهم لعمل هذه الاكواد ان تكون بوقت قصير ولكن المطلوب منا حل المشكلات الاساسيه التى تخص موقعنا. ملحوظة لمن لا يعرف ملف ال htaccess تقوم بفتح ftp موقعك او الدخول الى ال cpanel وتذهب الى مدير الملفات File Manager ثم تذهب الى فولدر public_html ستجد ملف بهذا الاسم .htacess كما بالصورة: رابعا : تحسين الصور Optimize images خامسا : تصغير الجافا Minify Javascript سادسا : تصغير السي اس اس Minify Css الثلاثة أخطاء لهم نفس الحل تقريبا ولكن ركز معى جيدا حتى تقم بحل هذه المشكله بطريقة صحيحة صورة للأخطاء: جوجل يخبرك أن لديك ملفات جافا سكربت و css و صور تحتاج إلى الضغط وتوفير مساحة أكبر وحل هذه المشكلة فى أن جوجل يعطيك النسخة المضغوطة لهذه الملفات لتقم بتحميلها يدويا ثم تقوم برفع الجديده مكان القديمة ولكن كيف: أولا تقوم بتحميل الصور او الجافا او css او الثلاثة معا بملف واحد يعطيه لك جوجل اسفل منطقة الفحص فى pagespeed كما بالصورة: بعد تحميل الملفات مضغوطه وينرار تقوم بفك الضغط عنها لتجد كل الملفات المصغره سواء جافا او css او صور رفع الصور معروف اذا كانت لموضوع معين تذهب الى الموضوع وتضغط edit على الصورة ثم استبدال Replace تختار حذف دائم Delete permanently ثم تقم برفع الصورة الجديدة التى اعطاها لك جوجل بعد التاكد من انها صحيحه وبنفس اسم الصورة القديمة ترفعها بالضغط على رفع الملفات Upload Files وتضع نفس alt الصورة القديمة ثم تضغط Replace الفكره انك تقوم بحذف الصورة القديمه ورفع الجديده مكانها حتى تاخذ نفس الاسم وتضع نفس ال alt للقديمه حتى لا يتغير رابط الصورة او عنوانها وكذلك فى جميع صور المنشور الذى تعمل عليه او تفحصه أما اذا كانت الصور فى الرئيسية أو فى الاقسام ف ستضطر الى رفعها عن طريق ال ftp افضل تدرس مسار الصورة ثم تذهب اليه وتقوم بحذف القديمه ورفع الجديده بدلا منها أحدكم سوف يشعر بالملل من تنزيل ورفع صور كل موضوع على حدة ولكن اقول لكم لستم مطالبين بعملها فى يوم واحد يمكنك تنزيل الصور ورفعها للمواضيع التى تجلب الزوار وبعد ذلك يوميا تقوم بعمل عشرة مواضيع مثلا والامر سهل وليس فيه مشكلة ولكن لا انصح باستخدام ادوات ضغط صور لتوفير باندويث الموقع وكذلك للتحكم فى أماكن الصور ومهما كان الشغل اليدوى افضل واضمن أما بالنسبة لملفات الجافا و css فلنفترض انه يطلب منك تصغير ملف css هذا: كود:
http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css اذن بعد تنزيل الملفات المضغوطه من جوجل نذهب الى مسار هذا الملف الموجود بالاعلى وسيكون مساره فى فولدر public_html wp-content themes yourtheme style.css هذا هو المسار الذى ستذهب به الى الملف المطلوب ثم تقوم باخذ نسخة احتياطية من الملف هذا style.css على جهازك للاحتياط وتقوم بحذفه ثم ترفع بدلا منه الجديد الذى اعطاه لك جوجل مصغرا فى الفولدر المضغوط مع الصور وملفات الجافا وهكذا بالنسبة لملفات الجافا اذا اراد جوجل منك تصغير ملف جافا ستقوم بالذهاب الى مكان هذا الملف على موقعك من الاف تى بى او مدير الملفات وتقوم بحذف القديم ورفع الجديد بدلا منه وبذلك قد قمنا بحل مشكلة تحسين الصور وتصغير ملفات الجافا وال css سابعا : ترتيب أولوية المحتوى المرئى Prioritize visible content صورة للخطأ هذه المشكلة تظهر لمن يقوموا بدفع محتوى الموقع الأساسى إلى الأسفل واستخدام الاعلانات كواجهة للموقع بدلا من المحتوى الاساسى الذى يحتاجه الزائر فمثلا : لو قمت انا بوضع اربعة اعلانات فى بداية صفحة موقعى ، فعند دخول الزائر سيرى اعلانات فى اللحظه الأولى لرؤية الموقع ولن يرى محتوى مهما يحتاجه الا اذا قام بالتصفح لاسفل الصفحه وذلك من معايير بيدج سبيد والسيو وجوجل ادسنس حاليا وخطا فادح يعتبره جوجل ادسنس سببا للحظر اذا كان موقعك مهيئا بهذا الشكل ، لذلك عليك بالتعديل على اعلاناتك او تغيير ستايل موقعك او التعديل عليه ولكن فى الغالب سيكون السبب اعلانات ، تقوم بوضع اعلان واحد فى بداية الصفحه ويفضل ان لا يتخطى نصف الصفحه على شاشة الموبايل ثم تضع باقى الاعلانات بالجانب او فى وسط الموضوع بين الفقرات ونهاية المواضيع. مثال على صفحة لديها مشكلة المحتوى المرئى كله اعلانات: ونيجى بقى لاخر مشكلة ثامنا : تقليل وقت استجابة السيرفر Reduce server response time صورة من المشكلة: وقت استجابة السيرفر كما هو معروض اذا زاد عن الواحد ثانيه ف هو مشكلة كبيرة لانه بذلك يتاخر فى فتح الموقع بوقت غير طبيعى ف الطبيعى هو رقم اقل من الثانيه وفى المتوسط يكون 0.3 ثانيه ولكن إذا رايت الخطا يتعدى الواحد ثانيه ف يجب ان تتصل بالمستضيف او شركة الدعم التى يعمل موقعك على سيرفراتها تتصل بهم وتخبرهم بالمشكله حتى يعملون على حلها وتقليل وقت الاستجابه قدر الامكان وهذا الخطا يظهر ف الغالب فلا تشغل نفسك به طالما انه لا يتعدى الثانية One Second فكما ترى بالصورة الوقت 0.28 ثانيه ويظهر خطأ. بعد حل كل المشكلات باذن الله ستصل سرعة الموقع معك من 85-97 حسب الصفحه اذا كانت موضوعا او رئيسية او قسم وسيكون السبب فى هذا النقص هو اعلانات ادسنس واي اعلانات اخرى معها واذا كان عدد اعلاناتك قليل ثلاثة مثلا ستتخطى ال 90 بالمائة فى فحص المواضيع. انتهى الموضوع واسألكم الدعاء تم النقل من ترايدنت |
الساعة الآن 02:16 AM |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By
Almuhajir