วิธีหยุดการโหลดไฟล์ที่ไม่จำเป็นและลดคำขอ HTTP ของเว็บไซต์ – เคล็ดลับการเพิ่มประสิทธิภาพ WordPress

เผยแพร่แล้ว: 2020-09-08

วิธีเพิ่มประสิทธิภาพไซต์ WordPress โดยหยุดโหลดไฟล์ที่ไม่จำเป็น - Crunchify Tips

ใน Crunchify เราได้เผยแพร่บทแนะนำการเพิ่มประสิทธิภาพความเร็วหลายรายการเพื่อให้คุณอ้างอิงได้ตลอดเวลา

เราใช้ MaxCDN เป็นผู้ให้บริการเนื้อหาของเรา ผ่านมาเกือบ 4 ปีแล้ว ยังใช้ได้ดีอยู่เลย Genesis WordPress Framework และ MaxCDN เป็นส่วนผสมที่ดีที่สุด ตามค่าเริ่มต้น Genesis Framework มาพร้อมกับการเพิ่มประสิทธิภาพมากมาย Google Markup Schema โครงสร้างที่เป็นมิตรกับมือถือและอีกมากมาย

สัปดาห์ที่แล้ว ฉันกำลังดูบัญชี MaxCDN ของฉัน และจู่ๆ ก็สังเกตเห็นแหล่งข้อมูลดาวน์โหลดยอดนิยม ดังที่คุณเห็นในภาพ top 9 out of 10 resource files ถูกดาวน์โหลดมากกว่า ~ 5 millions ครั้งในสัปดาห์ที่แล้ว

ฉันรู้สึกประหลาดใจและคิดว่าฉันควรจะต้องการทรัพยากรเหล่านั้นจริงหรือ? ฉันต้องโหลดไฟล์เหล่านั้นแยกกันหรือไม่? วิธีกำจัดไฟล์เหล่านั้นหากไม่ต้องการ ยกเว้น style.css ซึ่งจำเป็นอย่างยิ่งสำหรับการโหลดเว็บไซต์

มาเริ่มกันเลยว่าฉันกำจัด 9 ไฟล์เหล่านั้นด้วยเทคนิคง่ายๆ ได้อย่างไร

ไม่ใช่สำหรับผู้อ่านทุกคน

ขั้นตอนเหล่านี้ไม่เหมาะสำหรับผู้อ่าน WordPress ทุกคน ใน Crunchify เราใช้ Crayon Syntax Highlighter และรูปภาพเฉพาะของธีมที่กำหนดเอง ดังนั้นจึงใช้ได้กับผู้ใช้ที่จำกัด

ขั้นตอนที่ 1

มา list all of those 9 files คอลัมน์ที่ 2 แสดงจำนวนครั้งที่ดาวน์โหลด

/ 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 โปรดไปที่บทช่วยสอน วิธีปิดใช้งานสคริปต์ฝังอัตโนมัติสำหรับ WordPress 4.4+ จะหยุดโหลดไฟล์ฝังที่ส่วนหน้า

ขั้นตอนที่ 4

ไปที่ไฟล์ 3 more .png ไฟล์:

bg-pattern.png

ฉันกำลังโหลดรูปภาพนี้ในพื้นหลังส่วนหัวและส่วนท้าย ฉันกำจัดมันโดยใช้สี #333 แทน

crunchify-sprite.png

ฉันกำลังโหลดรูปภาพสไปรท์นี้เพื่อแสดงปุ่มติดตามโซเชียลในแถบด้านข้าง ฉันแทนที่มันด้วย fontawesome ที่ยอดเยี่ยม

h3.png

ฉันกำลังโหลดสิ่งนี้เพื่อแสดงเครื่องหมายถูกสำหรับโพสต์ H3 ในบางตำแหน่ง ฉันแทนที่ด้วย fontawesome อักษรที่ยอดเยี่ยม ด้านล่างเป็นสิ่งที่เทียบเท่ากับ fontawesome

ขั้นตอนที่ -5

ตอนนี้เหลือแค่ 2 ไฟล์ crunchify-logo.png และ bg.png ซึ่งฉันคิดว่าจะเก็บไว้ ดังนั้น แทนที่จะเรียกเป็นรูปภาพ ฉันเพิ่มรูปภาพฐาน base64 ที่เทียบเท่าสำหรับไฟล์เหล่านั้น

ก่อน:

. 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 ;

}

หลังจาก:

. 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;

}

ฉันได้แปลงทั้งสองภาพเป็นภาพฐาน 64 ข้อได้เปรียบที่เราจะได้ไม่ต้องเปิดการเชื่อมต่ออื่นและขอ HTTP ไปยังเซิร์ฟเวอร์สำหรับรูปภาพ

คำขอน้อยลง = เวลาในการโหลดหน้าดีขึ้น

มีข้อดีบางประการของการใช้ SVG (Scalable Vector Graphic) image เนื่องจากรูปภาพจะปรับขนาดเป็นขนาดใดก็ได้โดยไม่สูญเสียความคมชัด (ยกเว้นขนาดเล็กมาก) ซึ่งดูดีบนจอเรตินา

Data URIs เหล่านี้ไม่จำกัดเฉพาะ . .png หรือรูปภาพ แต่สำหรับทรัพยากรใดๆ นี่คือเครื่องมือแปลง .png เป็น .svg แบบง่าย ๆ ที่ฉันใช้ทางออนไลน์

สรุป

บทช่วยสอนนี้เป็นส่วนหนึ่งของวิธีเพิ่มความเร็ว WordPress และส่วนเพิ่มประสิทธิภาพ คุณจะพบเคล็ดลับและเคล็ดลับการเพิ่มประสิทธิภาพ WordPress ทั้งหมดที่นั่น

เมื่อทำตามขั้นตอนนี้ ฉันได้กำจัดทรัพยากรที่ไม่ต้องการทั้งหมด 9 รายการออกจาก 10 รายการ ซึ่งหมายความว่า หน้าของฉันโหลดเร็วมาก เนื่องจากจะมีคำขอน้อยลง 9 รายการในแต่ละหน้า

โปรดแจ้งให้เราทราบหากคุณมีเคล็ดลับอื่นๆ ที่จะช่วยเพิ่มความเร็วของหน้าเว็บไซต์ ที่ Crunchify ความเร็วเป็นเกณฑ์หลัก และนั่นเป็นเหตุผลที่เราใช้ปลั๊กอินน้อยมาก ทุกหน้าโหลด within half a second