ประสิทธิภาพของเว็บเป็นส่วนสำคัญของการพัฒนาเว็บซึ่งมุ่งเน้นที่ความเร็วในการโหลดหน้าเว็บ รวมถึงการตอบสนองข้อมูลที่ผู้ใช้ป้อน การเพิ่มประสิทธิภาพให้กับเว็บไซต์เป็นการมอบประสบการณ์การใช้งานที่ดีขึ้นให้แก่ผู้ใช้ ประสบการณ์ของผู้ใช้ที่ดีขึ้นนั้นมีส่วนอย่างมากเพื่อช่วยให้คุณบรรลุเป้าหมายที่ต้องการสำหรับเว็บไซต์ของคุณ
ประสิทธิภาพของเว็บอาจดูเหมือนเป็นเรื่องเฉพาะกลุ่ม แต่ที่จริงแล้ว ทั้งกว้างและลึก เนื่องจากเป็นเรื่องที่ลึกซึ้งในสาขาวิชาหนึ่งๆ จึงเป็นสิ่งสำคัญที่หลักสูตรเกี่ยวกับประสิทธิภาพเว็บควรเข้าถึงได้ทั้ง 2 อย่างและได้ความรู้มากขึ้นด้วย การเปิดตัวหลักสูตรแรกของหลักสูตรนี้จะมุ่งเน้นไปที่หลักพื้นฐานเกี่ยวกับประสิทธิภาพเว็บซึ่งผู้เริ่มต้นควรหาข้อมูล
แต่ละโมดูลในซีรีส์นี้มีเป้าหมายที่จะใส่ชุดการสาธิตที่ช่วยเสริมเนื้อหาของแต่ละโมดูลและแนวคิดด้านประสิทธิภาพที่สำคัญ หากเป็นไปได้ เนื่องจากหลักสูตรนี้เป็นข้อเสนอเริ่มต้น จึงมีการวางแผนโมดูลเพิ่มเติม เพื่อการเผยแพร่ในอีกไม่กี่เดือนข้างหน้า
หลักสูตรเบื้องต้นสำหรับ "เรียนรู้ประสิทธิภาพ" ครอบคลุมเนื้อหาต่อไปนี้
ความเร็วสำคัญอย่างไร
ก่อนที่จะเริ่มประสิทธิภาพการเรียนรู้ได้ ก่อนอื่นคุณต้องเข้าใจบทบาทที่มีต่อประสบการณ์ของผู้ใช้ และดูว่าผลการเรียนรู้จะส่งผลให้เกิดผลลัพธ์ที่ดีขึ้นได้อย่างไร หลักสูตรนี้จะเริ่มต้นด้วยบทนำสั้นๆ เกี่ยวกับหัวข้อเหล่านี้ ซึ่งจะให้บริบทที่สำคัญเกี่ยวกับความสำคัญของการเรียนรู้ประสิทธิภาพ
ข้อควรพิจารณาทั่วไปเกี่ยวกับประสิทธิภาพ HTML
ทุกเว็บไซต์เริ่มต้นด้วยคำขอเอกสาร HTML โดยคำขอดังกล่าวมีบทบาทสำคัญต่อความเร็วในการโหลดเว็บไซต์ โมดูลนี้ครอบคลุมแนวคิดที่สำคัญต่างๆ เช่น การแคช HTML การบล็อกโปรแกรมแยกวิเคราะห์ การบล็อกการแสดงผล และอื่นๆ คุณจึงมั่นใจได้ว่าคำขอแรกสำหรับ HTML ของเว็บไซต์จะปิดไว้อย่างถูกต้อง
การทำความเข้าใจเส้นทางวิกฤต
เส้นทางการแสดงผลวิกฤติเป็นแนวคิดในประสิทธิภาพเว็บที่เกี่ยวข้องกับความเร็วในการแสดงผลครั้งแรกของหน้าเว็บในเบราว์เซอร์ โมดูลนี้จะกล่าวถึงทฤษฎีเบื้องหลังเส้นทางการแสดงผลวิกฤติ ซึ่งครอบคลุมแนวคิดต่างๆ เช่น ทรัพยากรการบล็อกการแสดงผลและการบล็อกโปรแกรมแยกวิเคราะห์ รวมถึงบทบาทสำคัญของความเร็วหน้าเว็บปรากฏในเบราว์เซอร์
การโหลดทรัพยากรของ Optimize
เมื่อหน้าเว็บโหลดขึ้น จะมีการอ้างอิงทรัพยากรจำนวนมากภายใน HTML ของหน้าเว็บที่มีหน้าตาและเลย์เอาต์ผ่าน CSS ตลอดจนการโต้ตอบผ่าน JavaScript ในโมดูลนี้ เราจะกล่าวถึงแนวคิดสำคัญจำนวนหนึ่งที่เกี่ยวข้องกับทรัพยากรเหล่านี้ รวมถึงผลกระทบต่อเวลาในการโหลดหน้าเว็บ
ช่วยเหลือเบราว์เซอร์ด้วยคำแนะนำด้านทรัพยากร
คำแนะนำเกี่ยวกับทรัพยากรคือชุดของฟีเจอร์ที่มีใน HTML ซึ่งสามารถช่วยเบราว์เซอร์ในการโหลดทรัพยากรก่อนหน้านี้ และอาจมีลำดับความสำคัญของทรัพยากรสูงกว่าด้วย ในโมดูลนี้ มีคำแนะนำด้านแหล่งข้อมูลบางส่วนที่จะช่วยให้หน้าเว็บโหลดเร็วขึ้นได้
ประสิทธิภาพของรูปภาพ
รูปภาพคือข้อมูลส่วนใหญ่ที่โอนบนหน้าเว็บจำนวนมากในปัจจุบัน โมดูลนี้ครอบคลุมวิธีเพิ่มประสิทธิภาพรูปภาพ รวมถึงแสดงรูปภาพอย่างมีประสิทธิภาพเพื่อให้คุณลดจำนวนไบต์ที่สูญเปล่าโดยที่โดยไม่คำนึงถึงอุปกรณ์ของผู้ใช้
ประสิทธิภาพของวิดีโอ
วิดีโอเป็นสื่อประเภทหนึ่งที่มักใช้ในหน้าเว็บ แต่การทราบวิธีแสดงโฆษณาอย่างมีประสิทธิภาพถือเป็นประสิทธิภาพอีกด้านหนึ่งที่คุณไม่ควรมองข้าม โมดูลนี้ครอบคลุมเทคนิคสำคัญบางอย่างในการฝังวิดีโอในลักษณะที่เว็บไซต์ทำงานได้อย่างรวดเร็ว ตลอดจนข้อควรพิจารณาเกี่ยวกับประสิทธิภาพที่อยู่ติดกันซึ่งอาจเกิดขึ้นจากการใช้วิดีโอ
เพิ่มประสิทธิภาพแบบอักษรเว็บ
แบบอักษรเว็บเป็นทรัพยากรที่ใช้กันโดยทั่วไปบนเว็บและเป็นสิ่งที่ชอบธรรม เนื่องจากแบบอักษรนั้นสามารถเพิ่มลงในการออกแบบเว็บไซต์ในแบบที่ทรัพยากรอื่นๆ ทำไม่ได้ อย่างไรก็ตาม แบบอักษรสำหรับเว็บยังคงมีต้นทุนด้านประสิทธิภาพ ในโมดูลนี้ เราจะได้เรียนรู้เกี่ยวกับข้อควรพิจารณาด้านประสิทธิภาพและเทคนิคต่างๆ เกี่ยวกับแบบอักษรสำหรับเว็บ
JavaScript ที่แยกโค้ด
ทรัพยากรบางอย่างไม่สำคัญต่อการโหลดเริ่มต้นของหน้าเว็บ JavaScript เป็นทรัพยากรอย่างหนึ่งที่สามารถเลื่อนเวลาออกไปจนกว่าจะถึงเวลาที่ต้องใช้ผ่านเทคนิคที่เรียกว่าการแยกโค้ด การทำเช่นนี้จะช่วยให้คุณปรับปรุงประสิทธิภาพได้โดยการลดการช่วงชิงแบนด์วิดท์และการช่วงชิง CPU ซึ่งเป็นข้อควรพิจารณาที่สำคัญในการปรับปรุงทั้งความเร็วในการโหลดหน้าเว็บเริ่มต้นและการตอบสนองของอินพุตระหว่างการเริ่มต้นใช้งาน
รูปภาพการโหลดแบบ Lazy Loading และองค์ประกอบ <iframe>
รูปภาพและองค์ประกอบ <iframe> อาจใช้แบนด์วิดท์และการประมวลผลของ CPU อย่างมาก อย่างไรก็ตาม คุณไม่จำเป็นต้องโหลดรูปภาพและองค์ประกอบ <iframe> บางรายการระหว่างที่โหลดหน้าเว็บครั้งแรก และอาจเลื่อนเวลาออกไปแสดงทีหลังที่ผู้ใช้มีแนวโน้มที่จะเห็นเนื้อหาเหล่านั้นมากที่สุดได้ เทคนิคนี้เรียกว่าการโหลดแบบ Lazy Loading ในโมดูลนี้ จะมีการอธิบายรูปภาพการโหลดแบบ Lazy Loading และองค์ประกอบ <iframe> เพื่อให้คุณโหลดหน้าเว็บได้เร็วขึ้นและใช้แบนด์วิดท์และเวลาในการประมวลผลเฉพาะในกรณีที่จำเป็นเท่านั้น
การดึงข้อมูลล่วงหน้า การแสดงผลล่วงหน้า และการแคชโปรแกรมทำงานล่วงหน้า
แม้ว่าประสิทธิภาพส่วนใหญ่จะเกี่ยวข้องกับสิ่งที่คุณทำได้เพื่อเพิ่มประสิทธิภาพและกำจัดทรัพยากรที่ไม่จำเป็น แต่การแนะนำว่าควรโหลดทรัพยากรบางอย่างก่อนที่จะจำเป็นต้องใช้นั้นอาจดูขัดแย้งกันเล็กน้อย อย่างไรก็ตาม มีบางกรณีที่การโหลดทรัพยากรบางอย่างล่วงหน้าอาจเหมาะสม ในโมดูลนี้ เราได้กล่าวถึงประสิทธิภาพด้านนี้ไปพร้อมๆ กับการกล่าวถึงการดึงข้อมูลล่วงหน้า การแสดงผลล่วงหน้า และการแคชโปรแกรมทำงานล่วงหน้า
ภาพรวมของ Web Worker
สิ่งที่ผู้ใช้เห็นในเบราว์เซอร์ส่วนใหญ่เกิดขึ้นในเทรดเดียวที่เรียกว่าเทรดหลัก อย่างไรก็ตาม อาจมีโอกาสที่คุณจะสามารถเริ่มชุดข้อความใหม่เพื่อทำงานด้านการประมวลผลที่มีค่าใช้จ่ายสูงได้ เพื่อให้เทรดหลักรองรับงานที่สำคัญซึ่งแสดงต่อผู้ใช้ได้ API ที่ทำงานนี้เรียกว่า Web Worker API และในโมดูลนี้จะมีข้อมูลพื้นฐานเกี่ยวกับ API นี้อยู่
กรณีการใช้งานของ Web Work ที่เป็นรูปธรรม
ตอนนี้คุณมีความเข้าใจเบื้องต้นเกี่ยวกับ Web Worker รวมถึงความสามารถและข้อจำกัดของ Web Work แล้ว ก็ถึงเวลาดู Use Case ที่เป็นรูปธรรมสำหรับ Web Worker ในการสาธิตนี้ มีการใช้ Web Worker เพื่อดึงข้อมูลไฟล์ JPEG, ดึงข้อมูลเมตา และส่งกลับไปยังเทรดหลักเพื่อให้ผู้ใช้ดูไฟล์ในเบราว์เซอร์ได้
พร้อมที่จะเริ่มเรียนรู้ประสิทธิภาพของเว็บแล้วหรือยัง เริ่มต้นด้วยการอ่าน ความเร็วสำคัญอย่างไรก่อน