ทำให้ไซต์ของคุณโดดเด่นอย่างรวดเร็ว: ตอนที่ 1
เผยแพร่แล้ว: 2015-03-18ไม่เป็นความลับ: ผู้ใช้เว็บในปัจจุบันต้องการความเร็ว ด้วยการเชื่อมต่ออินเทอร์เน็ตและเซลลูลาร์ที่เร็วขึ้นและเร็วขึ้น ผู้ใช้คาดหวังให้ไซต์โหลดได้อย่างรวดเร็ว และเป็นหน้าที่ของนักพัฒนาซอฟต์แวร์ที่จะต้องทำทุกอย่างที่ทำได้เพื่อให้บริการเพจเหล่านั้นอย่างรวดเร็ว ดังนั้นคุณจะทำให้ไซต์ของคุณโดดเด่นอย่างรวดเร็วได้อย่างไร นี่คือสิ่งที่คุณควรทำโดยเฉพาะเมื่อสร้างด้วย WordPress
อย่างแรกเลย: ทดสอบความเร็วไซต์ของคุณ
ประสิทธิภาพสามารถแบ่งออกเป็นสองประเภทหลัก: ส่วนหน้าและส่วนหลัง ฉันถือว่าแบ็คเอนด์เป็นอะไรที่เกี่ยวข้องกับเซิร์ฟเวอร์และการเติมข้อมูลบนหน้าเว็บอย่างไร (โค้ด PHP ของคุณในธีมคือ "แบ็คเอนด์") ส่วนหน้าประกอบด้วยเนื้อหาทั้งหมดของคุณ (CSS, JavaScript, รูปภาพ ฯลฯ) และมาร์กอัป ทุกอย่างที่เว็บเบราว์เซอร์อ่านและตีความคือ "ส่วนหน้า" เหตุผลที่ฉันสร้างความแตกต่างในด้านประสิทธิภาพเป็นเพราะการรู้ว่าคุณกำลังเพิ่มประสิทธิภาพอะไรและที่สำคัญกว่านั้นคือจุดที่คุณต้องการเพิ่มประสิทธิภาพมากที่สุด
ในการทดสอบความเร็วของไซต์ของคุณ ฉันขอแนะนำให้ใช้ WebPagetest และ Google PageSpeed Insights ร่วมกัน WebPagetest ให้แนวคิดที่ดีแก่เราเกี่ยวกับเวลาจริง (เป็นวินาที) ที่เว็บไซต์ใช้ในการโหลด ทำให้คุณมีตัวชี้วัดที่ดีที่จะทราบว่านี่เป็นส่วนหลังหรือส่วนหน้าซึ่งทำให้เว็บไซต์โหลดช้า PageSpeed Insights ดีที่สุดในการดูว่าเว็บไซต์ของคุณแสดงผลโดยเบราว์เซอร์อย่างไรและคุณสามารถปรับปรุงอะไรในส่วนหน้าได้
โปรดทราบว่าบทความนี้เน้นที่ไซต์ WordPress ที่ปรับแต่งเองทั้งหมด หากคุณกำลังทำการทดสอบความเร็วบนไซต์โดยใช้ธีมขนาดใหญ่และปลั๊กอินของบุคคลที่สาม 19 ตัว (ปลั๊กอินอาจทำให้ทั้งส่วนหน้าและส่วนหลังทำงานช้าลง) ให้เริ่มโดยไปที่กระดานชนวนที่ว่างเปล่าและเปิดใช้งานปลั๊กอินทีละตัวอย่างช้าๆ เพื่อค้นหาสิ่งเหล่านั้น ที่ทำให้สิ่งต่างๆ ช้าลง
ประสิทธิภาพส่วนหน้า
วิธีปรับปรุงการเข้าถึงธีม WordPress ของคุณตอนนี้
ไม่มีวันไหนที่ฉันไม่เล่นเว็บ แม้แต่ในวันหยุด ฉันจะเดาเอาว่าคุณสามารถเกี่ยวข้องได้ อินเทอร์เน็ตเล่นมากขึ้น ...
Steve Souders หัวหน้าเจ้าหน้าที่การปฏิบัติงานของ Fastly ได้กล่าวไว้ว่า กฎทองของประสิทธิภาพการทำงานคือ 80-90% ของเวลาในการโหลดหน้าเว็บทั้งหมดประกอบด้วยส่วนหน้า (กฎ 80/20) แบ็คเอนด์ 10-20% มีความสำคัญอย่างยิ่ง แต่แม้ว่าคุณจะใช้เงินโฮสต์ที่เร็วที่สุดที่สามารถซื้อได้ แต่ไซต์ของคุณก็ยังไม่สามารถแสดงศักยภาพได้เต็มที่หากไม่ปรับฟรอนต์เอนด์ให้เหมาะสมเพื่อให้แน่ใจว่าผู้ใช้รับรู้ มันโหลดเร็ว การรับรู้มีความสำคัญเมื่อพูดถึงการเพิ่มประสิทธิภาพส่วนหน้า ผู้ใช้จะไม่สนใจว่าไซต์ใช้เวลาในการโหลดนานเพียงใด สิ่งที่พวกเขาสนใจจริงๆ คือพวกเขาสามารถโต้ตอบกับเนื้อหาและดูเนื้อหาหรือดำเนินการได้เร็วเพียงใดโดยไม่ชักช้า ไม่ได้บอกว่าคุณไม่ควรกังวลเกี่ยวกับเวลาในการโหลดจริง (ควร) แต่โดยทำตามเทคนิคด้านล่าง คุณสามารถตรวจสอบให้แน่ใจว่าไซต์ของคุณอยู่ในสถานะใช้งานได้โดยเร็วที่สุด ตามด้วยการโหลดหน้าเว็บโดยสมบูรณ์ ทรัพย์สินทั้งหมด
CSS
สิ่งสำคัญที่สุดที่ต้องทำกับ CSS ของคุณก่อนที่จะส่งไปยังเบราว์เซอร์คือเพียงแค่บีบอัดและลบตัวเลือกที่ไม่ได้ใช้ ลดขั้นตอนการพัฒนาที่ดีลงเมื่อพัฒนาธีมทำให้กระบวนการนี้ไม่สำคัญ โดยเฉพาะอย่างยิ่งหากคุณใช้ตัวประมวลผลล่วงหน้าเช่น Sass ฉันใช้ Grunt ซึ่งเป็นตัวเรียกใช้งาน JavaScript ที่รันคำสั่งให้คุณในขณะที่กำลังพัฒนา มีปลั๊กอินสำหรับ Grunt ที่เรียกว่า grunt-contrib-sass ที่รวบรวมไฟล์ Sass ทั้งหมดของคุณให้เป็นไฟล์เดียว (หากคุณใช้ Sass partials นั่นคือ) จะย่อขนาดและบีบอัด ใส่ปลั๊กอิน grunt-contrib-watch เข้าไปด้านบนและมันจะเรียกใช้งาน Sass ทุกครั้งที่คุณบันทึกไฟล์ ง่าย! อย่านอนไม่หลับหากคุณไม่ได้ใช้วิธี CSS ล่าสุดและดีที่สุด แต่พยายามปฏิบัติตามมาตรฐานบางประเภทในขณะที่เขียน CSS เพื่อหลีกเลี่ยงความซ้ำซ้อนและขนาดไฟล์ที่ใหญ่
เมื่อสไตล์ชีตของคุณพร้อมแล้ว วิธีโหลดที่ง่ายที่สุด (และเป็นมาตรฐาน) คือการอ้างอิงใน <head> ; ด้วยวิธีนี้ เบราว์เซอร์จะโหลดและแยกวิเคราะห์ก่อนที่จะโหลด DOM ที่เหลือ อย่างไรก็ตาม มีเทคนิคใหม่ที่มีการแทรกสไตล์ "สำคัญ" ใน <head> จากนั้นสไตล์ชีตแบบเต็มจะถูกโหลดแบบอะซิงโครนัสโดยใช้ JavaScript ฉันใช้เทคนิคนี้จริงๆ เท่านั้นเมื่อฉันพยายามทำให้ไซต์โหลด (หรือรู้สึกว่าโหลด) ในเวลาไม่กี่วินาที แต่มันเป็นสิ่งที่ดีที่จะดูและดูว่ามันจะเข้ากับเวิร์กโฟลว์ของคุณหรือไม่ Filament Group มีบทความมากมายเกี่ยวกับการใช้เทคนิคนี้
JavaScript
ทำความเข้าใจวิธีที่ WordPress ใช้ MySQL
โดยทั่วไป WordPress สามารถแบ่งออกเป็นสองส่วน: ตรรกะและเทมเพลตที่สร้างรูปลักษณ์ของไซต์ WordPress ซึ่งเป็นฐานข้อมูล MySQL ที่เก็บเนื้อหาและพลังทั้งหมดที่ฉัน...
กฎทองของการเพิ่มประสิทธิภาพ JavaScript นั้นเรียบง่าย: ใช้เป็นไฟล์ JavaScript ไม่กี่ไฟล์เท่าที่เป็นไปได้ ลดขนาดและต่อกัน ปลั๊กอิน WordPress ของบริษัทอื่นอาจสร้างความเสียหายได้โดยการทำให้เอกสารของคุณเต็มไปด้วยไฟล์ JavaScript ที่บล็อกแบบไม่ย่อขนาด ดังนั้นการเลือกปลั๊กอินจึงเป็นเรื่องสำคัญ ตามหลักการแล้ว คุณจะต้องเชื่อมไฟล์ JavaScript ทั้งหมดเป็นไฟล์เดียว แล้วย่อส่วนให้เล็กลง ในบางครั้งที่ไม่สามารถรวมไฟล์ทั้งหมดของคุณเป็นไฟล์เดียวได้ มีแอตทริบิวต์ HTML ที่เรียกว่า “async” และ “defer” ที่สามารถใช้เพื่อโหลดไฟล์ JavaScript แบบอะซิงโครนัสหรือเมื่อโหลดหน้าที่เหลือ
ตำแหน่งที่ใช้บ่อยที่สุดในการอ้างอิง JavaScript ในปัจจุบันคือที่ด้านล่างของเอกสาร ก่อนแท็กปิด อย่างไรก็ตาม มีเทคนิคขั้นสูงเพิ่มเติมในการโหลด JavaScript อีกครั้ง Filament Group ได้ทำการวิจัยมากมายเกี่ยวกับเรื่องนี้และมีโครงการโอเพ่นซอร์สหลายโครงการที่คุณสามารถใช้ได้หากคุณตั้งเป้าให้โหลดหน้าเว็บเร็วสุด ๆ (ฉันไม่มีส่วนเกี่ยวข้องกับ Filament Group เลย ฉันแค่คิดว่าสิ่งของของพวกเขายอดเยี่ยม) วิธีที่ดีที่สุดน่าจะเป็นการโหลดสคริปต์แบบไดนามิกโดยใส่ฟังก์ชันเล็กๆ ใน <head> ; ที่ต่อท้ายแท็กสคริปต์โดยไม่ปิดกั้นส่วนที่เหลือของหน้า สำหรับข้อมูลเพิ่มเติม โปรดดูที่สคริปต์ loadJS
รูปภาพ
รูปภาพมักเป็นไฟล์ที่ใหญ่ที่สุดในหน้าเว็บ ซึ่งทำให้เกิดความล่าช้าสูงสุดในการโหลดหน้าเว็บ สิ่งที่ดีเกี่ยวกับรูปภาพก็คือ เบราว์เซอร์ส่วนใหญ่ไม่เหมือนกับ CSS และ JavaScript ที่โหลดรูปภาพเหล่านี้แบบอะซิงโครนัส อย่างน้อยก็ช่วยเรื่องประสิทธิภาพการรับรู้ของเพจ แต่คุณยังต้องการให้แน่ใจว่า ก) คุณกำลังแสดงรูปภาพน้อยที่สุดเท่าที่จะเป็นไปได้ และ B) รูปภาพเหล่านั้นถูกบีบอัดให้มากที่สุด
เครื่องมือบีบอัดจำเป็นสำหรับการบีบส่วนเกินบนรูปภาพให้ได้มากที่สุด ImageOptim เป็นแอป Mac ที่ยอดเยี่ยมซึ่งทำงานได้ดี ร่วมกับ OptiPNG และ jpegtran สำหรับใช้กับตัวเรียกใช้งานอย่าง Grunt
แบบอักษร
แบบอักษรเว็บเป็นเรื่องธรรมดามากในทุกวันนี้ ฉันใช้ Google Web Fonts ในเกือบทุกโครงการ แต่จนกระทั่งเมื่อเร็วๆ นี้ ฉันไม่ได้ตระหนักถึงประสิทธิภาพที่ได้รับผลกระทบโดยเพียงแค่อ้างอิงใน <head> ประสิทธิภาพการทำงานมีน้อย แต่นี่เป็นบทความเกี่ยวกับการทำให้ไซต์ทำงานได้อย่างรวดเร็ว ดังนั้นทุกสิ่งจึงมีความสำคัญ! เพื่อประสิทธิภาพสูงสุดในการใช้แบบอักษรของเว็บ ฉันขอแนะนำให้ใช้ Web Font Loader ซึ่งพัฒนาโดย Google และ Typekit เป็นสคริปต์โอเพนซอร์ซที่จัดการการโหลดแบบอักษรของคุณจากบุคคลที่สามเช่น Google Web Fonts และอนุญาตให้โหลดแบบอะซิงโครนัส (เบื่อคำนั้นหรือยัง)
ตามที่คาดไว้ มีการกำหนดค่าบางอย่างที่จำเป็นในการรวม Web Font Loader เข้ากับโปรเจ็กต์ของคุณ ดังนั้นให้ตรวจสอบโปรเจ็กต์บน GitHub สำหรับรายละเอียดเกี่ยวกับวิธีการตั้งค่า