ปรับปรุงเวลาในการโหลดหน้าเว็บบนเว็บไซต์ WordPress

หากคุณเคยใช้เวลาพัฒนาบน WordPress คุณอาจพบธีมที่ช้าซึ่งโหลดไฟล์จำนวนมากโดยไม่มีเหตุผลชัดเจน ทำให้เว็บไซต์ช้าและปวดหัวมาก การสร้างเว็บไซต์ที่ออกแบบมาอย่างยอดเยี่ยมซึ่งทำงานช้าอาจเป็นเรื่องที่น่าหงุดหงิดอย่างยิ่ง ความช้านี้มีผลกระทบต่อทุกสิ่งและทุกคนที่เกี่ยวข้อง รวมถึงตัวคุณเอง ธุรกิจของคุณ และชื่อเสียงของคุณ

ที่ Go Fish Digital เรามักถูกเรียกให้มาแก้ปัญหาเวลาในการโหลดหน้าเว็บ ซึ่งเราทำได้หลายวิธี ดังนั้นคุณจะลดเวลาในการโหลดธีม WordPress หรือเว็บไซต์ของคุณได้อย่างไร? ฉันได้สรุปเคล็ดลับหลายประการไว้ด้านล่างซึ่งจะช่วยแก้ปัญหานี้:

ตรวจพบปัญหา

สิ่งแรกที่ต้องทำคือการพิจารณาสิ่งที่ทำให้เว็บไซต์ WordPress ของคุณโหลดช้า เป็นรูปภาพขนาดใหญ่ คำขอ HTTP จำนวนมาก ไฟล์ Javascript หรือทั้งหมดข้างต้นหรือไม่ เป็นงานของคุณที่จะหา

วิธีที่ง่ายที่สุดในการค้นหาข้อมูลนี้คือใช้เครื่องมือภายในของเบราว์เซอร์ หากคุณกำลังใช้ Chrome ไปที่หน้าปัญหาของคุณและกด Command + Alt Option / + J สำหรับ Mac Ctrl + Shift + C หรือ F12 สำหรับ Windows หรือเพียงแค่คลิกขวาบนหน้าเว็บและเลือก“ตรวจสอบ” สิ่งนี้จะนำ "ผู้ตรวจสอบ" ของคุณขึ้นมา คุณจะเห็นสิ่งต่อไปนี้:

ของคุณอาจเล็กลง นั่นเป็นเรื่องปกติ คุณเพียงแค่ต้องยืดหน้าต่างเพื่อให้พอดีกับข้อมูลมากขึ้น คุณสามารถเทียบท่าผู้ตรวจสอบในส่วนต่างๆ ของหน้าต่างหรือเปิดออกเป็นหน้าต่างของตัวเองได้หากต้องการ ตอนนี้ คุณต้องไปที่ แท็บ "เครือข่าย" ในพื้นที่ตรงกลางด้านบน คุณควรเห็นสิ่งต่อไปนี้:

ณ จุดนี้ คุณอาจไม่เห็นอะไรในส่วนนี้ หากเกิดเหตุการณ์นี้ก็รีเฟรชหน้าเว็บ เมื่อข้อมูลของหน้าโหลดขึ้น คุณจะเริ่มเห็นหน้าต่างนี้เติมด้วยรายการต่างๆ สิ่งเหล่านี้จะเป็นไฟล์ต่างๆ และการเรียกที่เกี่ยวข้องกับเครือข่ายที่สามารถปรับแต่งได้อย่างละเอียดเพื่อเพิ่มความเร็วในการโหลดของคุณ

เมื่อคุณจัดเรียงรายการที่ไฟล์/การโทรใช้เวลาในการโหลดมากที่สุด คุณจะเริ่มเห็นรายการต่างๆ เช่น รูปภาพ ไฟล์ Javascript และ CSS ปรากฏขึ้น นี่เป็นเรื่องปกติ และนี่คือสิ่งที่คุณจะเน้นในตอนแรก

หมายเหตุ: บางครั้ง การรวบรวมทรัพย์สินจากเว็บไซต์ต่างๆ อาจเป็นปัญหาได้ (เช่น วิดเจ็ต Facebook/Twitter โฆษณา เป็นต้น) ในกรณีเหล่านี้ คุณจะต้องปรึกษากับบุคคลที่สามที่คุณใช้เพื่อค้นหาวิธีพิเศษในการลดเวลาในการโหลด

ลดทอนทุกสิ่ง

การลดขนาดเป็นกระบวนการลบข้อมูลที่ซ้ำซ้อนหรือไม่จำเป็น โดยไม่กระทบต่อการประมวลผลทุกอย่างโดยเบราว์เซอร์ ฉันจะเริ่มต้นที่นี่กับปัญหาส่วนใหญ่เกี่ยวกับไซต์ บ่อยครั้งเมื่อคุณดูผ่านแท็บเครือข่าย คุณจะเห็นไฟล์ CSS จำนวนมาก ทุกครั้งที่เบราว์เซอร์ต้องไปที่เซิร์ฟเวอร์เพื่อดึงข้อมูลบางอย่าง เช่น ไฟล์ CSS หรือ Javascript จะทำให้เวลาในการโหลดเพิ่มขึ้น แม้ว่าไฟล์เดียวจะใหญ่กว่าไฟล์หลายไฟล์แยกกัน ไฟล์เดียวจะโหลดเร็วขึ้นเนื่องจากมีคำขอเซิร์ฟเวอร์น้อยกว่า ต่อไปนี้คือรายการปลั๊กอินเล็กๆ ที่จะช่วยคุณบีบอัดไฟล์ CSS และ Javascript ให้เป็นไฟล์ดาวน์โหลดเดียวที่จัดการได้สำหรับผู้เยี่ยมชมของคุณ:

• เพิ่มประสิทธิภาพอัตโนมัติ
• ผสาน + ลดขนาด + รีเฟรช
• ย่อขนาดความเร็วอย่างรวดเร็ว
• Minqueue (ค่อนข้างล้าสมัย แต่ก็ยังใช้งานได้ดี!)

การปรับอัตโนมัติเป็นตัวอย่างที่ดีของปลั๊กอินที่เรียบง่ายและมีประโยชน์ ซึ่งจะช่วยลดเวลาในการโหลดหน้าเว็บ ทีมพัฒนาเว็บของเราได้ใช้งานเว็บไซต์นี้กับหลายเว็บไซต์แล้ว และเราเห็นผลลัพธ์ที่ยอดเยี่ยม

สิ่งหนึ่งที่ต้องจำไว้คือการบีบอัด Javascript ทั้งหมดบนไซต์ของคุณอาจทำให้เกิดปัญหากับปลั๊กอินอื่น ๆ เช่น WooCommerce ดังนั้นโปรดระมัดระวัง!

การบีบอัดรูปภาพและ Lazy Loaders

ปัญหาทั่วไปอีกประการหนึ่งที่ทำให้เว็บไซต์ช้าคือการโหลดรูปภาพขนาดใหญ่ทั้งบนเดสก์ท็อปและมือถือ หากคุณเคยดูแท็บเครือข่ายเมื่อก่อนและเห็นว่ามีการโหลดรูปภาพจำนวนมาก ส่วนนี้เหมาะสำหรับคุณ โชคดีที่มีปลั๊กอินบางตัวที่ช่วยเราบีบอัดรูปภาพ ฉันแนะนำสิ่งต่อไปนี้:

• อ้วน
• TinyPNG
• เครื่องมือเพิ่มประสิทธิภาพภาพ ShortPixel

ในการบีบอัดรูปภาพในธีมของคุณด้วยตนเอง ฉันจะไปที่ TinyPNG เครื่องมือนี้สร้างไฟล์ zip พร้อมรูปภาพที่บีบอัดใหม่ทั้งหมดของคุณ จากนั้นคุณสามารถอัปโหลดไฟล์เหล่านั้นลงในธีมของคุณเพื่อเขียนทับรูปภาพที่มีอยู่ได้

คุณเคยได้ยินเกี่ยวกับ Lazy Loaders หรือไม่? Lazy Loading เป็นเทคนิค Javascript ที่โหลดเฉพาะรูปภาพบนหน้าเว็บของคุณเมื่อผู้ใช้ของคุณเห็นจริงเท่านั้น เป็นคุณลักษณะที่ค่อนข้างสะดวกและมีปลั๊กอินบางตัวที่สามารถทำได้:

• BJ ขี้เกียจโหลด
• Lazy Load โดย WP Rocket

เมื่อคุณติดตั้งปลั๊กอินเสร็จแล้ว ให้รีเฟรชหน้าและตรวจดูให้แน่ใจว่าได้ดูแท็บเครือข่ายสำหรับการเปลี่ยนแปลง

หมายเหตุ: เป็นความคิดที่ดีที่จะเพิ่มประสิทธิภาพและรีเฟรชรูปภาพทั้งหมดบนไซต์ของคุณเป็นระยะ มีปลั๊กอินเล็ก ๆ ที่ยอดเยี่ยมสำหรับสิ่งนั้นที่นี่

ปลั๊กอินแคช

หน้าแคชเป็นส่วนสำคัญของการพัฒนาเว็บและการเพิ่มประสิทธิภาพเว็บ การแคชโดยทั่วไปจะจัดเก็บการตอบกลับ ไฟล์ และข้อมูลอื่นๆ เพื่อนำมาใช้ใหม่อย่างรวดเร็วในภายหลัง คุณสามารถอ่านเพิ่มเติมเล็กน้อยเกี่ยวกับเรื่องนี้ได้ที่นี่ เรื่องสั้นโดยย่อ มีการแคชหลายระดับทั่วทั้งแอปพลิเคชัน/เว็บไซต์ของคุณ ซึ่งส่งผลต่อทุกอย่างตั้งแต่เซิร์ฟเวอร์จนถึงหน้าเว็บจริงที่เข้าถึงได้

WordPress ด้วยการใช้ปลั๊กอินด้านล่าง สามารถแสดงข้อมูลและจัดเก็บข้อมูลไว้เพื่อใช้ในภายหลังเมื่อมีผู้เข้าชมรายอื่นเข้าชมไซต์ของคุณ นี้จะช่วยเร่งความเร็วเว็บไซต์ของคุณอย่างมาก ฉันแนะนำปลั๊กอินแคชต่อไปนี้ (โปรดปรึกษาโซลูชันโฮสติ้งของคุณว่าต้องการตัวใด):

• W3 แคชทั้งหมด
• WP Super Cache
• Sucuri Security และบริการอื่นๆ ของ Sucuri
• แคชในตัวจากผู้ให้บริการโฮสต์ (WP Engine เป็นตัวอย่างที่ดีของสิ่งนี้)

เครือข่ายการจัดส่งเนื้อหา (CDN)

ลองนึกภาพว่าคุณกำลังพยายามส่งจดหมายถึงเพื่อนบ้าน เป็นไปได้มากที่คุณจะเดินออกจากบ้านและติดจดหมายไว้ในกล่องจดหมายของอีกฝ่าย ซึ่งใช้เวลาหรือความพยายามในส่วนของคุณเลย ลองนึกภาพว่าจดหมายของคุณต้องส่งถึงใครบางคนในประเทศอื่นหรือไม่ คุณจะต้องผ่านกระบวนการที่ลำบากและยาวนานกว่ามาก เช่น ไปที่ที่ทำการไปรษณีย์ ซื้อไปรษณีย์ แล้วรอเป็นวันเพื่อให้แน่ใจว่าผู้รับจะได้รับมัน นั่นคือสิ่งที่จะเกิดขึ้นเมื่อคุณขอเว็บไซต์ของใครบางคน

เครือข่ายการจัดส่งเนื้อหา (CDN) ทำหน้าที่เสมือนว่า มีคนจากประเทศอื่นกำลังเข้าถึงเว็บไซต์ของคุณจากประตูถัดไป มีคอมพิวเตอร์จำนวนมากติดตั้งไว้ทั่วโลกโดยมีเนื้อหาเว็บไซต์ของคุณอยู่ในนั้น ซึ่งจะส่งมอบให้กับผู้คนที่อยู่ใกล้พวกเขามากกว่าที่คุณเป็น ซึ่งลดเวลาในการโหลดหน้าเว็บลงอย่างมากและช่วยให้เพิ่มประสิทธิภาพบนเซิร์ฟเวอร์ของคุณได้ดียิ่งขึ้น มีประโยชน์อื่นๆ ของ CDN เช่นกันที่คุณสามารถอ่านได้ในบทความนี้ มีบริการที่ยอดเยี่ยมหลายอย่างสำหรับ CDN ซึ่งรวมถึงแต่ไม่จำกัดเพียง:

• CloudFlare
• Cloudfront โดย AWS
• CDN77
• StackPath
• ฯลฯ

สมมติว่าคุณเป็นนักพัฒนาซอฟต์แวร์และคุณได้ลองใช้ตัวเลือกต่างๆ เหล่านี้ทั้งหมดแล้ว มีการปรับแต่งให้ละเอียดกว่านี้อีกไหม ฉันต้องการส่งวิธีการที่ฉันเคยใช้ในหลายเว็บไซต์

ควบคุมเอาต์พุตทั้งหมดด้วยรหัส

หมายเหตุ: ส่วนต่อไปนี้ของบทความอาจทำให้เกิดปัญหากับส่วนหน้าของเว็บไซต์ของคุณหากคุณเพิ่งเริ่มพัฒนา ไม่ควรทำเช่นนี้บนเซิร์ฟเวอร์ที่ใช้งานจริงจนกว่าคุณจะรู้สึกมั่นใจเกี่ยวกับกระบวนการและทฤษฎีที่อยู่เบื้องหลังแนวคิดนี้ ทำเช่นนี้ก็ต่อเมื่อคุณรู้ว่าคุณต้องการอะไรจากส่วนหน้าในแง่ของ Javascript และ CSS

ก่อนที่คุณจะเริ่มบีบอัดและเพิ่มประสิทธิภาพโค้ดของคุณให้ดียิ่งขึ้นไปอีก คุณควรรู้ว่าไฟล์ CSS และไฟล์ Javascript ใดที่คุณต้องการโหลดลงในเพจ สำหรับตอนนี้ลิตร OAD เองบีบอัดไฟล์ JavaScript และ CSS ไฟล์ของคุณลงในส่วนหัวและส่วนท้ายและปิดการใช้งานจาวาสคริไฟล์และ CSS ทั้งหมดที่เอาท์พุท WordPress คุณสามารถทำได้ในสอง hooks ต่อไปนี้:

โดยทั่วไปข้อมูลโค้ดข้างต้นจะอยู่ใน ไฟล์ header.php ของคุณในโฟลเดอร์ธีม และจะแสดงโค้ดส่วนหัวทั้งหมดซึ่งคุณ สามารถ รวม Javascript, CSS และอื่นๆ ได้ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ใน Codex ของ WordPress ที่นี่ ที่อื่นที่ WordPress แทรกโค้ดอยู่ในส่วนท้าย คุณสามารถเห็นสิ่งนี้ใน ไฟล์ footer.php ของธีมของคุณ คุณสามารถอ่านเกี่ยวกับเรื่องนี้ในโคเด็กซ์ได้เช่นกัน hook จะเป็นข้อมูลโค้ดต่อไปนี้:

ถัดไป คุณต้องควบคุม Javascript และ CSS ทั้งหมดจากธีมของคุณ ในการทำเช่นนั้น คุณต้องแจ้งให้ WordPress ทราบว่าไม่อนุญาตให้ส่งออกไฟล์ Javascript และ CSS ธีมมักจะลงทะเบียนไฟล์เหล่านี้ในไฟล์ functions.php ตามลำดับ แต่คุณต้องบอกให้ WordPress ไม่อนุญาตให้มี ไฟล์เหล่านี้ใน ส่วนหัวหรือส่วนท้ายเพื่อลงทะเบียนในไฟล์ functions.php ของคุณ แต่ละธีมควรมีไฟล์ functions.php ดังนั้นให้ค้นหาของคุณ (หรือทำให้เป็นรูทของธีมของคุณ) และเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ:

หากคุณรีเฟรชหน้า คุณจะเห็นว่าส่วนใหญ่ไม่มีการโหลดไฟล์จาวาสคริปต์

เคล็ดลับ: ควรโหลด Javascript ทั้งหมดไว้ในส่วนท้าย ขณะที่ CSS โหลดอยู่ที่ส่วนหัวของเว็บไซต์ ซึ่งช่วยให้เบราว์เซอร์สามารถแสดงโครงสร้างของเว็บไซต์ได้ก่อนที่จะเริ่มด้วย Javascript โดยทั่วไปแล้ว การทำเช่นนี้จะส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด

หากคุณรีเฟรชหน้าตอนนี้ คุณจะเห็นเว็บไซต์ที่ยุ่งเหยิงจริงๆ เนื่องจากไม่มีไฟล์ CSS ที่ส่งออก นั่นคือสิ่งที่คุณต้องการ ตอนนี้ คุณจะควบคุมทุกอย่างโดยวางไฟล์ของคุณแทนที่ไฟล์ Javascript และ CSS ทั้งหมด

สมมติว่าคุณทราบสไตล์ชีตที่คุณต้องการโหลด อาจเป็นผลลัพธ์ที่บีบอัดจาก Gulp หรือ Grunt ที่อยู่ในโฟลเดอร์เช่น (theme)/assets/build/CSS/main.css หรืออะไรทำนองนั้น อาจเป็น ไฟล์ style.css ในรูทของโฟลเดอร์ธีมของคุณ ไม่ว่าจะด้วยวิธีใด คุณต้องการแสดงสไตล์ชีตหลักออกมา นี่คือรหัส (แก้ไขให้ตรงกับตำแหน่งและชื่อไฟล์ของคุณ):

ในตอนนี้ สมมติว่าคุณได้บีบอัดไฟล์ Javascript ในลักษณะเดียวกับที่คุณบีบอัด CSS ตอนนี้คุณสามารถโหลด Javascript ลงในส่วนท้ายของไซต์ของคุณได้ดังนี้:

โหลดหน้านี้ซ้ำ และตอนนี้คุณควรจะสามารถค้นหาแต่ละไฟล์ในซอร์สโค้ดได้ เพื่อให้แน่ใจว่าโค้ด PHP ที่คุณมีในไฟล์ functions.php ของคุณทำงาน ขณะนี้ คุณสามารถตรวจสอบแท็บเครือข่าย และดูว่าคุณได้ปรับปรุงขนาดและเวลาในการโหลดโดยรวมแล้วหรือไม่

บทสรุป

สิ่งสำคัญที่สุดที่ต้องจำไว้คือคุณสามารถแก้ไขปัญหาการโหลดหน้าเว็บได้อย่างแน่นอน แต่ต้องใช้การแก้ปัญหาอย่างสร้างสรรค์และการวิจัยบางอย่าง อย่าลืมดูเครื่องมือที่มีมาในเบราว์เซอร์ของคุณเพื่อช่วยให้คุณพบปัญหา จากนั้นดูปลั๊กอินดังกล่าวและกลยุทธ์ในการผลิตเว็บไซต์ที่มีรูปแบบสวยงามสำหรับการบริโภคของสาธารณะ คุณสามารถทำมันได้!

แจ้งให้เราทราบหากคำแนะนำของฉันช่วยให้คุณปรับปรุงเวลาในการโหลดบนเว็บไซต์ของคุณในความคิดเห็นด้านล่าง