كيفية رفع تقييم Google PageSpeed Insights لتحسين سرعة الموقع
اخر تحديث :
0
تعليقات
كيفية رفع تقييم Google PageSpeed Insights:
تسجيل نتيجة 100/100 باستخدام WordPress (هل هذا ممكن؟)
نود اليوم أن نطلعكم على بعض النصائح والاستراتيجيات التي يمكن أن تساعدك في الحصول على 100/100 في Google PageSpeed Insights من خلال موقع WordPress الخاص بك أو على الأقل تجعلك أفضل مما كنت عليه من قبل.
ما مدى أهمية Google PageSpeed Insights؟
إن Google PageSpeed Insights هي أداة لتقييم أداء موقع الويب تم إنشاؤها بواسطة Google لمساعدتك في تحديد الطرق لجعل موقعك أسرع وأكثر ملاءمة للجوّال ، من خلال اتباع توصيات بشأن أفضل ممارسات موقع الويب.اعتبارًا من عام 2018 ، يتم الآن حساب نقاط السرعة من Lighthouse ، وهي الأداة الآلية مفتوحة المصدر التي تم إنشاؤها لتحسين جودة صفحات الويب ، يمكن لـ Lighthouse بالفعل التحقق من الأداء وإمكانية الوصول وتطبيقات الويب المتقدمة والمزيد.
الشيء المهم للغاية هو أن تتذكر أنه لا يجب عليك دائمًا الاستحواذ على النتيجة 100/100 ، قد لا يكون هذا ممكنًا في جميع الأحوال ، اعتمادًا على كيفية إعداد موقع WordPress الخاص بك ، مع الكثير من الموضوعات متعددة الأغراض ، والتجارة الإلكترونية ، ومواقع العضوية ، سيكون لديك ببساطة وقت مستحيل تقريبًا في محاولة لتحقيق درجة مثالية. وهو موافق تماما.
نوصي بالنظر إلى سرعة موقعك ، أكثر من الدرجات ، إن النتائج باستخدام أدوات مثل Pingdom و GTMetrix و Google PageSpeed Insights قد تقودك أحيانًا إلى الضلال ، ما يهم حقًا هو ضمان أن يتم تحميل موقعك بسرعة وأن الأداء المدرك هو أيضًا شئ جيد ومؤشر يمكن الاعتماد عليه ، الأداء المتصور هو مدى سرعة ظهور موقعك الإلكتروني على المستخدمين.
هل تستخدم Google PageSpeed Insights؟
هل تستخدم Google PageSpeed Insights عندما يتعلق الأمر بـ SEO وعامل تصنيف سرعة الصفحة أو سرعة الاستجابة الخاصة بموقعك؟اتخذت Google هذه الخطوة أيضًا في عام 2018. في السابق ، تم قياس تصنيفات سرعة الصفحة حسب السرعة التي يتم بها تحميل موقع الويب الخاص بك على سطح المكتب. ولكن اعتبارًا من 09 تموز (يوليو) 2018 ، تعد سرعة الصفحة عاملاً مهمًا لعمليات البحث على الأجهزة المحمولة ، هذا يعني أن تحسين WordPress للجوال الخاص بك هو أكثر أهمية من أي وقت مضى!
سجل 100/100 على كل من جهاز الكمبيوتر والهواتف المحمولة
اولاً : تمكين ضغط
سنبدأ مع سطح المكتب أولاً حيث سيتم تطبيق العديد من الإصلاحات أيضًا على الأجهزة المحمولة ، أول توصية من Google PageSpeed Insights التي نحتاج إلى إصلاحها هي تمكين الضغط.وفقًا لـ Google ، لإصلاح ذلك نحتاج إلى تمكين ضغط Gzip ، لسوء الحظ ، لم يتم تمكين الضغط تلقائيًا في ووردبريس ، لذلك يتعين علينا القيام بذلك يدويًا.
تدعم جميع المتصفحات الحديثة وتضغط Gzip تلقائيًا لجميع طلبات HTTP ، يمكن أن يؤدي تمكين ضغط Gzip إلى تقليل حجم الاستجابة المنقولة بنسبة تصل إلى 90٪ ، مما يمكن أن يقلل بدرجة كبيرة من مقدار الوقت لتحميل الموقع ، ويقلل من استخدام البيانات للعميل ، ويحسن من الوقت اللازم لعرض صفحاتك لأول مرة.
هناك عدة طرق يمكنك القيام بها ، الأول والأكثر سهولة هو استخدام مكون إضافي للتخزين المؤقت يدعم تمكين Gzip ، يضيف WP Rocket على سبيل المثال قواعد ضغط Gzip في ملف htaccess الخاص بك تلقائيًا باستخدام mod_deflate ، في W3 Total Cache أيضًا طريقة لتمكين هذا الخيار في قسم performance .
الطريقة الثانية لتمكين ضغط Gzip هي عن طريق تحرير ملف htaccess.
باستخادم Apache ، حيث يمكنك ببساطة إضافة الكود أدناه إلى ملف htaccess.
يمكنك العثور على ملف htaccess الخاص بك في ملفات WordPress الخاص بك عبر FTP.
وضع الكود التالي
[<IfModule mod_deflate.c># Compress HTML, CSS, JavaScript, Text, XML and fontsAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/vnd.ms-fontobjectAddOutputFilterByType DEFLATE application/x-fontAddOutputFilterByType DEFLATE application/x-font-opentypeAddOutputFilterByType DEFLATE application/x-font-otfAddOutputFilterByType DEFLATE application/x-font-truetypeAddOutputFilterByType DEFLATE application/x-font-ttfAddOutputFilterByType DEFLATE application/x-javascriptAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE font/opentypeAddOutputFilterByType DEFLATE font/otfAddOutputFilterByType DEFLATE font/ttfAddOutputFilterByType DEFLATE image/svg+xmlAddOutputFilterByType DEFLATE image/x-iconAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xml# Remove browser bugs (only needed for really old browsers)BrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/htmlHeader append Vary User-Agent</IfModule>]
أما إذا كنت تعمل على NGINX ، فما عليك سوى إضافة الكود التالي إلى ملف nginx.conf.
يمكنك استخدام اداة Check Gzip Compression لمعرفة كيف تم توفير استخدام البيانات وتسريع موقعك بعد بتمكين ضغط Gzip.[36 gzip on;37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";38 gzip_vary on;39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;]
إذا قمنا بتشغيل موقعنا من خلال Google PageSpeed Insights مرة أخرى ، يمكننا أن نرى أن تحذير ضغط Gzip قد انتهى الآن .
ثانياً : تحسين الصور
توصية Google PageSpeed Insights التالية التي نحتاج إلى إصلاحها هي تحسين الصور.هذا تحذير مهم ومفيد للغاية. وفقًا لموقع HTTP Archive ، الصور تمثل في المتوسط 65٪ من إجمالي مساحة صفحات الويب.
يمكن أن يكون تحسين الصور أحد أسهل الطرق لرؤية تحسينات الأداء مع موقع الويب الخاص بك على WordPress.
هناك عدة طرق يمكنك إصلاحها.
الأول هو استخدام البرنامج المساعد لتحسين الصورة.
يمكن للمكوّن الإضافي فعليًا تحسين مكتبة وسائط WordPress بأكملها وتحسينها تلقائيًا عند تحميلها.
فيما يلي بعض الإضافات الشائعة لتحسين الصور:
Imagify Image Optimizer
Optimus Image Optimizer
ShortPixel Image Optimizer
WP Smush
TinyPNG
ستعمل هذه المكونات الإضافية على حل المشكلة ، أو يمكنك أيضًا ضغطها قبل تحميلها في برنامج مثل Adobe Photoshop أو Gimp أو Affinity Photo ، تذكر دائماً من الأفضل الحفاظ على صورك صغيرة الحجم بقدر الإمكان.
ثالثاً : تخلص من حظر جافا سكريبت و CSS في محتوى أعلى الصفحة
التوصية التالية من Google PageSpeed Insights التي نحتاج إلى إصلاحها هي إزالة جافا سكريبت و CSS.
عندما يقوم المتصفح بتحميل صفحة ويب ، عادةً ما تمنع موارد JavaScript و CSS عرض صفحة الويب حتى يتم تنزيلها ومعالجتها بواسطة المتصفح ، يلزم تنزيل بعض الموارد ومعالجتها قبل عرض أي شيء ، ومع ذلك ، فإن العديد من موارد CSS و JavaScript مشروطة وغير ضرورية - أي ، يتم تطبيقها فقط في حالات محددة - أو ببساطة ليست هناك حاجة لتقديم محتوى أعلى الصفحة ،لإنتاج أسرع تجربة ممكنة للمستخدمين ، يجب أن تحاول التخلص من أي موارد تمنع العرض ليست مطلوبة لعرض المحتوى في الجزء العلوي.فيما يتعلق بعمل Render-blocking Javascript ، لدى Google ثلاث توصيات:
إذا لم يكن لديك الكثير من جافا سكريبت ، يمكنك تضمينه للتخلص من هذا التحذير ، يمكنك تضمين JavaScript مع مكون إضافي مثل Autoptimize.
ومع ذلك ، هذا يصلح فقط للمواقع الصغيرة جداً. تحتوي معظم مواقع WordPress على جافا سكريبت كثيرة حيث يمكن أن يبطئ هذا الأمر موقعك بالفعل.
والثاني هو تحميل جافا سكريبت الخاص بك بشكل متزامن. Async Javascript يقوم بتنزيل الملف بشكل أساسي أثناء تحليل HTML وسيقوم بإيقاف تشغيل محلل HTML لتنفيذه عندما ينتهي التنزيل.
والثالث هو تأجيل جافا سكريبت الخاص بك. تقوم ميزة التأجيل أيضًا بتنزيل الملف أثناء تحليل HTML ، لكنها تنفذه فقط بعد اكتمال التحليل. أيضًا ، يتم تنفيذ البرامج النصية مع هذه السمة بترتيب ظهورها على الصفحة. اقرأ المزيد عن الاختلافات بين المزامنة والتأجيل.
سنجعل جافا سكريبت الخاص بنا يتم تحميلها بشكل متزامن ، للقيام بذلك ، سنستخدم مكوّنًا إضافيًا مجانيًا يسمى Async JavaScript ، يمكنك تنزيله من WordPress يضيف المكون الإضافي بشكل أساسي السمة "async" أو "defer" إلى كل جافا سكريبت التي تم تحميلها بواسطة وظيفة WordPress wp_enqueue_script.
بعد التثبيت ، انتقل إلى الإعدادات وقم بتمكين Async JavaScript.
وبالنسبة للمواقع الكبيرة ، يمكن أن يكون استبعاد البرنامج النصي مفيدًا أو الحصول على نسخة ممتازة من البرنامج المساعد. لن نحتاج إليه في هذا المثال ، ولكن إذا كان لديك موقع به عدد كبير من JavaScript على الأرجح ، فسينتهي بك الأمر عندما تنتهي من تعيين كل شيء إلى Async أو Defer. في هذه الحالة ، سوف تحتاج إلى استكشاف الأخطاء وإصلاحها مع تلك التي يمكنك.
إذا كنت لا تريد استخدام مكون إضافي ، فهناك بعض البدائل الأخرى مثل إضافة الكود التالي إلى ملف jobs.php الخاص بك.
[/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );]
يمكنك أن ترى أن أول CSS نحتاج إلى تحسينه هو الخطوط من Google (fonts.googleapis.com) CSS هو افتراضيًا لحظر الظهور ، والذي يتضمن CSS لخطوط الويب.
لإصلاح ذلك ، سنقوم بتثبيت المكون الإضافي المجاني Disable Google Fonts.
بعد تثبيت المكوّن الإضافي ، من الواضح أن خطوط Google الخاصة بك توقفت.
لذلك سوف تحتاج إلى التوجه إلى Google Fonts ونسخ الرمز يدويًا نختار نفس نوع الخط الذي تم استخدامه افتراضيًا.
[<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">]
بعد ذلك ستحتاج إلى إضافة ذلك إلى ملف footer.php ، قبل علامة </body> مباشرةً.
ملاحظة: سيؤدي القيام بذلك بهذه الطريقة إلى FOUT ، وهو ما يشيرون إليه على أنه فلاش لنص غير مصمم.
لكنه سيتخلص أيضًا من مشكلة حظر العروض.
يجب أن تقرر على موقع الويب الخاص بك إذا كانت FOUT تجربة مستخدم مقبولة للزائرين.
يمكنك أيضًا استخدام Web Font Loader من Google.
واحدة من أسهل الطرق لإصلاح هذه المشكلة هي استخدام ملحق WordPress مجاني يسمى Autoptimize ، تم تطويره بواسطة Frank Goossens.
هذه الأداة صغيرة الحجم للغاية ، فقط 176 كيلو بايت ، يوجد حاليًا أكثر من 400000 عملية تثبيت نشطة مع تصنيف 4.5 من أصل 5 نجوم.
يساعدك المكوّن الإضافي في تسلسل البرامج النصية الخاصة بك ، والتصغير ، وانتهاء صلاحية الرؤوس ، والقدرة على نقل الأنماط إلى الرأس والنصوص إلى تذييلك. هذا البرنامج المساعد متوافق تمامًا مع البرنامج المساعد Async JavaScript الذي تم استخدامه مسبقًا.
بعد تثبيت المكوّن الإضافي ، انقر فوق الإعدادات وحدد "تحسين كود CSS".
ثم انقر فوق "خيارات متقدمة" وقم أيضًا بتمكين "تجميع CSS المضمّن" و "Inline All CSS".
ملاحظة ، استنادًا إلى الموضوع الذي تقوم بذلك عليه ، قد لا ينصح باستخدام هذه الطريقة بالنسبة للمواقع الكبيرة ، قد يكون التضمين سيئًا ، وفي هذه الحالة سيكون من الأفضل فعلاً تجاهل تحذير Google PageSpeed Insights المحدد.
- نوصي أيضًا بتمكين خيار تحسين رمز HTML.
أداة Cache-Control هو الأحدث وعادة ما تكون الطريقة الموصى بها .
تذكر أنك مكنت ضغط Gzip في وقت سابق؟
يحدث هذا في كثير من الأحيان عندما يكون شخص ما على خطة استضافة مشتركة لميزانية أقل.
لإصلاح هذا الأمر ، نحتاج إلى استخدام أداة Cache Enabler المجانية .
مكوّن إضافي خفيف للتخزين المؤقت لـ WordPress يجعل موقع الويب الخاص بك أسرع من خلال إنشاء ملفات HTML ثابتة بالإضافة إلى دعم WebP.
هذا المكون الإضافي متوافق تمامًا مع الإضافات Async JavaScript و Autoptimize التي تم استخدامها مسبقًا.
لإصلاح ذلك ، سنعود فعليًا إلى إعدادات المكون الإضافي Autoptimize وتمكين الخيار Optimize JavaScript Code.
نظرًا لأن لديك الآن مكونًا إضافيًا للتخزين المؤقت قيد التشغيل ، فقد تحتاج أيضًا إلى مسح ذاكرة التخزين المؤقت الخاصة بك بعد القيام بذلك لرؤية النتائج.
الهدف من هذا البرنامج التعليمي هو شرح وفهم معنى تحذيرات Google PageSpeed Insights بشكل أفضل وما يمكنك القيام به لإصلاحها.
بمجرد أن تفهم هذا بشكل أفضل ، يمكنك تطبيق بعض هذه الاستراتيجيات على مواقعك الكبيرة.
بالطبع ، مع المواقع الكبيرة ، ربما لن تحصل على درجة 100/100 ، وهو أمر جيد تمامًا! أو إذا قمت بذلك ، فسوف يستغرق الأمر بعض العمل.
نوصي ببساطة بتنفيذ ما تستطيع ، وسوف ترى على الأرجح تحسينات في السرعة.
تذكر أن سرعة موقعك ، إلى جانب الأداء الأفضل هو كل ما يهمك .
ملاحظة: سيؤدي القيام بذلك بهذه الطريقة إلى FOUT ، وهو ما يشيرون إليه على أنه فلاش لنص غير مصمم.
لكنه سيتخلص أيضًا من مشكلة حظر العروض.
يجب أن تقرر على موقع الويب الخاص بك إذا كانت FOUT تجربة مستخدم مقبولة للزائرين.
يمكنك أيضًا استخدام Web Font Loader من Google.
رابعاً : CSS Autoptimize
واحدة من أسهل الطرق لإصلاح هذه المشكلة هي استخدام ملحق WordPress مجاني يسمى Autoptimize ، تم تطويره بواسطة Frank Goossens.
هذه الأداة صغيرة الحجم للغاية ، فقط 176 كيلو بايت ، يوجد حاليًا أكثر من 400000 عملية تثبيت نشطة مع تصنيف 4.5 من أصل 5 نجوم.
يساعدك المكوّن الإضافي في تسلسل البرامج النصية الخاصة بك ، والتصغير ، وانتهاء صلاحية الرؤوس ، والقدرة على نقل الأنماط إلى الرأس والنصوص إلى تذييلك. هذا البرنامج المساعد متوافق تمامًا مع البرنامج المساعد Async JavaScript الذي تم استخدامه مسبقًا.
بعد تثبيت المكوّن الإضافي ، انقر فوق الإعدادات وحدد "تحسين كود CSS".
ثم انقر فوق "خيارات متقدمة" وقم أيضًا بتمكين "تجميع CSS المضمّن" و "Inline All CSS".
ملاحظة ، استنادًا إلى الموضوع الذي تقوم بذلك عليه ، قد لا ينصح باستخدام هذه الطريقة بالنسبة للمواقع الكبيرة ، قد يكون التضمين سيئًا ، وفي هذه الحالة سيكون من الأفضل فعلاً تجاهل تحذير Google PageSpeed Insights المحدد.
- نوصي أيضًا بتمكين خيار تحسين رمز HTML.
خامساً : ضغط متصفح التخزين المؤقت
التوصية التالية من Google PageSpeed Insights التي نحتاج إلى إصلاحها هي تحذير التخزين المؤقت للمتصفح .أداة Cache-Control هو الأحدث وعادة ما تكون الطريقة الموصى بها .
إضافة Cache-Control Header في Nginx
يمكنك إضافة Cache-Control Header في Nginx عن طريق إضافة الكود التالي إلى موقع تهيئة الخادم الخاص بك.[location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}]
اضافة Expires Headers في Nginx
يمكنك اضافة Expires Headers في Nginx عن طريق إضافة الكود التالي إلى الخادم الخاص بك.[location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}]
إضافة Cache-Control Headers في Apache
يمكنك إضافة Cache-Control Headers في Apache عن طريق إضافة الكود التالي إلى ملف htaccess.[<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>]
اضافة Expires Headers في Apache
يمكنك اضافة Expires Headers في Apache عن طريق إضافة الكود التالي إلى ملف htaccess.[## EXPIRES HEADER 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 HEADER CACHING ##]
تذكر أنك مكنت ضغط Gzip في وقت سابق؟
سادساً : تقليل وقت استجابة الخادم
توصية Google PageSpeed Insights التالية التي نحتاج إلى إصلاحها هي تحذير تقليل وقت استجابة الخادم.يحدث هذا في كثير من الأحيان عندما يكون شخص ما على خطة استضافة مشتركة لميزانية أقل.
لإصلاح هذا الأمر ، نحتاج إلى استخدام أداة Cache Enabler المجانية .
مكوّن إضافي خفيف للتخزين المؤقت لـ WordPress يجعل موقع الويب الخاص بك أسرع من خلال إنشاء ملفات HTML ثابتة بالإضافة إلى دعم WebP.
هذا المكون الإضافي متوافق تمامًا مع الإضافات Async JavaScript و Autoptimize التي تم استخدامها مسبقًا.
سابعاً : تصغير جافا سكريبت
آخر توصية من Google PageSpeed Insights والتي نحتاج إلى إصلاحها هي تحذير Minify JavaScript.لإصلاح ذلك ، سنعود فعليًا إلى إعدادات المكون الإضافي Autoptimize وتمكين الخيار Optimize JavaScript Code.
نظرًا لأن لديك الآن مكونًا إضافيًا للتخزين المؤقت قيد التشغيل ، فقد تحتاج أيضًا إلى مسح ذاكرة التخزين المؤقت الخاصة بك بعد القيام بذلك لرؤية النتائج.
الهدف من هذا البرنامج التعليمي هو شرح وفهم معنى تحذيرات Google PageSpeed Insights بشكل أفضل وما يمكنك القيام به لإصلاحها.
بمجرد أن تفهم هذا بشكل أفضل ، يمكنك تطبيق بعض هذه الاستراتيجيات على مواقعك الكبيرة.
بالطبع ، مع المواقع الكبيرة ، ربما لن تحصل على درجة 100/100 ، وهو أمر جيد تمامًا! أو إذا قمت بذلك ، فسوف يستغرق الأمر بعض العمل.
نوصي ببساطة بتنفيذ ما تستطيع ، وسوف ترى على الأرجح تحسينات في السرعة.
تذكر أن سرعة موقعك ، إلى جانب الأداء الأفضل هو كل ما يهمك .
إرسال تعليق