كيفية إيقاف تحميل الملفات غير الضرورية وتقليل طلبات HTTP لموقع الويب - نصائح لتحسين WordPress

نشرت: 2020-09-08
كيفية تحسين موقع WordPress عن طريق التوقف عن تحميل الملفات غير الضرورية - Crunchify Tips

في Crunchify ، نشرنا العديد من البرامج التعليمية لتحسين السرعة لتتمكن من الرجوع إليها في أي وقت.

نحن نستخدم MaxCDN كمزود المحتوى الخاص بنا. لقد مر ما يقرب من 4 سنوات وحتى الآن تعمل بشكل جيد للغاية. Genesis WordPress Framework و MaxCDN هما أفضل مزيج. بشكل افتراضي ، يأتي Genesis Framework مع الكثير من التحسينات ومخطط Google Markup وهيكل سهل الاستخدام للجوال وغير ذلك الكثير.

في الأسبوع الماضي كنت أنظر إلى حساب MaxCDN الخاص بي ولاحظت فجأة أفضل موارد التنزيل. كما ترى في الصورة أعلاه ، تم تنزيل top 9 out of 10 resource files أكثر من 5 millions مرة في الأسبوع الماضي.

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

لنبدأ في كيفية التخلص من كل هذه الملفات التسعة بحيل بسيطة

ليس لجميع القراء

هذه الخطوات ليست لجميع قراء WordPress. في Crunchify ، نستخدم Crayon Syntax Highlighter وصورًا مخصصة للموضوع المخصص ، لذلك فهي تنطبق على مستخدمين محددين

الخطوة 1

دعنا list all of those 9 files . يُظهر العمود الثاني عدد مرات تنزيله.

1
2
3
4
5
6
7
8
9
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB
/ wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB
/ wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB
/ wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB
/ wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB
/ wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB
/ wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB
/ wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB
/ wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB

الخطوة 2

دعنا نجمع ملفات Crayon Syntax Highlighter Plugin معًا.

يوجد 3 ملفات:

neon.css و crayon.min.css و crayon.min.js . لقد كتبت تعليميًا منفصلاً كاملًا بإجمالي 7 خطوات مفصلة للتخلص من هذه الملفات. يرجى مراجعتها وإخباري إذا رأيت أي مشكلة.

الخطوه 3

انتقل الآن إلى wp-embed-min.js . يرجى زيارة البرنامج التعليمي How to Disable Auto Embed Script for WordPress 4.4+. سيتوقف تحميل ملف التضمين في الواجهة الأمامية.

الخطوة 4

لننتقل إلى أكثر 3 more .png :

bg-pattern.png

نمط bg

كنت أقوم بتحميل هذه الصورة في خلفية الرأس والتذييل. لقد تخلصت منه باستخدام اللون #333 بدلاً من ذلك.

crunchify-sprite.png

crunchify- العفريت

كنت أقوم بتحميل صورة الرموز المتحركة هذه لإظهار أزرار المتابعة الاجتماعية في الشريط الجانبي. لقد استبدلت ذلك fontawesome .

h3.png

h3

كنت أقوم بتحميل هذا لإظهار علامة اختيار لمنشورات H3 على بعض المواقع. لقد استبدلت ذلك fontawesome . أدناه هو معادل الخط الرائع.

الخط رائع الخط

الخطوة 5

الآن يتبقى لنا ملفان فقط. crunchify-logo.png و bg.png ، والتي فكرت في الاحتفاظ بها. لذلك ، بدلاً من الاستدعاء كصورة ، أضفت مكافئ صورة base64 لهذا الملف.

قبل:

1
2
3
4
5
6
7
8
9
10
. header - image . site - title a {
     display : block ;
     float : left ;
     min - height : 60px ;
     text - indent : - 9999px ;
     width : 100 % ;
     background - position : center ! important ;
     background - size : contain ! important ;
     background : url ( images / crunchify - logo . png ) no - repeat ;
}

بعد:

1
2
3
4
5
6
7
8
9
10
. header - image . site - title a {
     display : block ;
     float : left ;
     min - height : 60px ;
     text - indent : - 9999px ;
     width : 100 % ;
     background - position : center ! important ;
     background - size : contain ! important ;
     background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat;
}

لقد قمت بتحويل كلتا الصورتين إلى صور base64. الميزة التي سنحصل عليها ، عدم الاضطرار إلى فتح اتصال آخر وتقديم طلب HTTP إلى الخادم للصورة.

طلب أقل = وقت تحميل أفضل للصفحة

هناك بعض المزايا لاستخدام صورة SVG (Scalable Vector Graphic) image حيث يتم تغيير حجم الصور إلى أي حجم دون فقدان الوضوح (باستثناء الحجم الصغير جدًا) والذي يبدو رائعًا على شاشات شبكية العين.

لا تقتصر Data URIs على .png أو الصور ولكن لأية موارد. إليك أداة تحويل بسيطة من .png إلى .svg استخدمتها عبر الإنترنت.

ملخص

هذا البرنامج التعليمي هو جزء من قسم كيفية تسريع WordPress وتحسين الأداء. ستجد جميع الحيل والنصائح لتحسين WordPress هناك.

من خلال القيام بهذه الخطوات ، تخلصت من جميع الموارد الـ 9 غير المطلوبة من أصل 10. مما يعني - يتم تحميل صفحتي بسرعة كبيرة حيث سيكون هناك 9 طلبات أقل في كل صفحة

يُرجى إعلامي إذا كان لديك أي نصائح أخرى من شأنها تحسين سرعة صفحة الموقع. في Crunchify ، السرعة هي المعيار الرئيسي وهذا هو السبب في أننا نستخدم مكونات إضافية أقل. يتم تحميل جميع الصفحات within half a second .

يتم تحميل جميع الصفحات تقريبًا بنصف ثانية