زيادة سرعة الوورد بريس والحصول على أعلى رقم فى 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

وهذا هو الكود:

رمز PHP:
# BEGIN DEFLATE COMPRESSION
 
<IfModule mod_deflate.c>
 
# 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
 
</IfModule>
 
# END DEFLATE COMPRESSION
 
 # BEGIN GZIP COMPRESSION
 
<IfModule mod_gzip.c>
 
mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file 
\.(html?|txt|css|js|php|pl)$
 
mod_gzip_item_include handler ^cgi-script$
 
mod_gzip_item_include mime ^text/.*
 
mod_gzip_item_include mime ^application/x-javascript.*
 
mod_gzip_item_exclude mime ^image/.*
 
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </
IfModule>
 
# END GZIP COMPRESSION
 
 ## EXPIRES CACHING ##
 
<IfModule mod_expires.c>
 
ExpiresActive On
 ExpiresByType image
/jpg "access 1 year"
 
ExpiresByType image/jpeg "access 1 year"
 
ExpiresByType image/gif "access 1 year"
 
ExpiresByType image/png "access 1 year"
 
ExpiresByType text/css "access 1 month"
 
ExpiresByType application/pdf "access 1 month"
 
ExpiresByType application/javascript "access 1 month"
 
ExpiresByType application/x-javascript "access 1 month"
 
ExpiresByType application/x-shockwave-flash "access 1 month"
 
ExpiresByType image/x-icon "access 1 year"
 
ExpiresDefault "access 2 days"
 
</IfModule>
 
## EXPIRES CACHING ##
 
 # BEGIN Cache-Control Headers
 
<ifModule mod_headers.c>
  <
filesMatch "\.(ico|jpe?g|png|gif|swf)$">
  
Header set Cache-Control "public"
  
</filesMatch>
  <
filesMatch "\.(css)$">
  
Header set Cache-Control "public"
  
</filesMatch>
  <
filesMatch "\.(js)$">
  
Header set Cache-Control "private"
  
</filesMatch>
  <
filesMatch "\.(x?html?|php)$">
  
Header set Cache-Control "private, must-revalidate"
  
</filesMatch>
 </
ifModule>
 
# END Cache-Control Headers  

بمجرد تعديل الهتكس واضافة هذا الكود اليه لن تجد هذين الخطئين فى فحص 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 هذا:

رمز PHP:
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 بالمائة فى فحص المواضيع. انتهى الموضوع واسألكم الدعاء


http://www.traidnt.net/vb/traidnt2724131/