ประสิทธิภาพของเว็บไซต์หมายถึง ความเร็วในการดาวน์โหลดและแสดงผลหน้าเว็บ ใน เว็บเบราว์เซอร์ของ ผู้ใช้ การเพิ่มประสิทธิภาพประสิทธิภาพของเว็บไซต์ (Web Performance Optimization หรือ WPO)หรือการเพิ่มประสิทธิภาพเว็บไซต์คือองค์ความรู้เกี่ยวกับการเพิ่มประสิทธิภาพของเว็บไซต์

ความเร็วในการดาวน์โหลดเว็บไซต์ที่เร็วขึ้นได้รับการพิสูจน์แล้วว่าช่วยเพิ่มการรักษาผู้เข้าชมและความภักดี^{[ 1 ] [ 2 ]}และความพึงพอใจของผู้ใช้ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตช้าและผู้ใช้บนอุปกรณ์เคลื่อนที่^{[ 3 ]}ประสิทธิภาพของเว็บยังนำไปสู่การส่งข้อมูลผ่านเว็บน้อยลง ซึ่งจะช่วยลดการใช้พลังงานและผลกระทบต่อสิ่งแวดล้อมของเว็บไซต์^{[ 4 ]}บางแง่มุมที่อาจส่งผลต่อความเร็วในการโหลดหน้าเว็บ ได้แก่ แคชของเบราว์เซอร์/เซิร์ฟเวอร์ การเพิ่มประสิทธิภาพรูปภาพ และการเข้ารหัส (เช่นSSL ) ซึ่งอาจส่งผลต่อเวลาที่ใช้ในการแสดงผลหน้าเว็บ ประสิทธิภาพของเว็บเพจสามารถปรับปรุงได้ด้วยเทคนิคต่างๆ เช่น แคชหลายชั้น การออกแบบ ส่วนประกอบ เลเยอร์การนำเสนอ ที่มีน้ำหนักเบา และการสื่อสารแบบอะซิง โครนัส กับส่วนประกอบฝั่งเซิร์ฟเวอร์

ในช่วงทศวรรษแรกของการมีอยู่ของเว็บ การปรับปรุงประสิทธิภาพของเว็บมุ่งเน้นไปที่การเพิ่มประสิทธิภาพโค้ดเว็บไซต์และการผลักดันขีดจำกัดของฮาร์ดแวร์เป็นหลัก ตามหนังสือWeb Performance Tuning ปี 2002 โดย Patrick Killelea เทคนิคแรกๆ ที่ใช้บางส่วน ได้แก่ การใช้เซิร์ฟเล็ตหรือ CGI แบบง่ายๆ การเพิ่มหน่วยความจำเซิร์ฟเวอร์ และการตรวจสอบการสูญหายและการส่งซ้ำ ของแพ็กเก็ต ^{[ 5 ]}แม้ว่าหลักการเหล่านี้จะประกอบเป็นพื้นฐานที่ได้รับการปรับปรุงประสิทธิภาพของแอปพลิเคชันอินเทอร์เน็ตในปัจจุบัน แต่ก็แตกต่างจากทฤษฎีการเพิ่มประสิทธิภาพในปัจจุบันตรงที่ความพยายามในการปรับปรุงความเร็วในการแสดงผลของเบราว์เซอร์นั้นน้อยกว่ามาก

สตีฟ ซูเดอร์ส เป็นผู้บัญญัติศัพท์คำว่า "การเพิ่มประสิทธิภาพเว็บ" ในปี 2547 ^{[ 6 ]}ในเวลานั้น ซูเดอร์สได้ทำนายไว้หลายประการเกี่ยวกับผลกระทบที่ WPO ในฐานะ "อุตสาหกรรมเกิดใหม่" จะนำมาสู่เว็บ เช่น เว็บไซต์จะเร็วขึ้นโดยค่าเริ่มต้น การรวมระบบ มาตรฐานเว็บสำหรับประสิทธิภาพ ผลกระทบต่อสิ่งแวดล้อมของการเพิ่มประสิทธิภาพ และความเร็วในฐานะปัจจัยที่สร้างความแตกต่าง^{[ 7 ]}

ประเด็นสำคัญประการหนึ่งที่ Souders กล่าวไว้ในปี 2550 คือ อย่างน้อย 80% ของเวลาที่ใช้ในการดาวน์โหลดและดูเว็บไซต์นั้นถูกควบคุมโดยโครงสร้างส่วนหน้า ความล่าช้านี้สามารถลดลงได้ด้วยการตระหนักถึงพฤติกรรมของเบราว์เซอร์ทั่วไป รวมถึงวิธีการทำงานของ HTTP ^{[ 8 ]}

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

นอกเหนือจากเทคนิคที่ระบุไว้ด้านล่าง การใช้เครือข่ายส่งเนื้อหา —กลุ่มของพร็อกซีเซิร์ฟเวอร์ที่กระจายอยู่ตามสถานที่ต่างๆ ทั่วโลก—เป็นระบบส่งที่มีประสิทธิภาพซึ่งเลือกเซิร์ฟเวอร์สำหรับผู้ใช้เฉพาะรายโดยพิจารณาจากความใกล้ชิดของเครือข่าย^{[ 9 ]}โดยทั่วไปจะเลือกเซิร์ฟเวอร์ที่มีเวลาตอบสนองเร็วที่สุด

เทคนิคต่อไปนี้เป็นเทคนิคที่ใช้กันทั่วไปในการเพิ่มประสิทธิภาพเว็บไซต์ และเป็นที่นิยมใช้กันอย่างแพร่หลายโดยนักพัฒนาเว็บไซต์:

เว็บเบราว์เซอร์จะเปิด การเชื่อมต่อ Transmission Control Protocol (TCP) แยกกันสำหรับแต่ละ คำขอ Hypertext Transfer Protocol (HTTP) ที่ส่งมาเมื่อดาวน์โหลดหน้าเว็บ คำขอเหล่านี้จะรวมกันเป็นจำนวนองค์ประกอบของหน้าเว็บที่จำเป็นสำหรับการดาวน์โหลด อย่างไรก็ตาม เบราว์เซอร์มีข้อจำกัดในการเปิดการเชื่อมต่อพร้อมกันไปยังโฮสต์เดียวได้เพียงจำนวนหนึ่งเท่านั้น เพื่อป้องกันปัญหาคอขวด จำนวนองค์ประกอบของหน้าเว็บแต่ละรายการจะถูกลดลงโดยใช้การรวมทรัพยากร โดยการรวมไฟล์ขนาดเล็ก (เช่น รูปภาพ) เข้าด้วยกันเป็นไฟล์เดียว ซึ่งจะช่วยลดคำขอ HTTP และจำนวน "รอบการเดินทางไปกลับ" ที่จำเป็นในการโหลดหน้าเว็บ

หน้าเว็บถูกสร้างขึ้นจากไฟล์โค้ด เช่นJavaScriptและHypertext Markup Language (HTML) เมื่อหน้าเว็บมีความซับซ้อนมากขึ้น ไฟล์โค้ดก็จะมีความซับซ้อนมากขึ้นตามไปด้วย และเวลาในการโหลดก็จะเพิ่มขึ้นตามไปด้วย การบีบอัดไฟล์สามารถลดขนาดไฟล์โค้ดได้ประมาณ 40 เปอร์เซ็นต์^{[ 10 ]}ซึ่งจะช่วยปรับปรุงการตอบสนองของเว็บไซต์

การเพิ่มประสิทธิภาพการแคชเว็บช่วยลดภาระของเซิร์ฟเวอร์ การใช้แบนด์วิดท์ และความหน่วง CDN ใช้ ซอฟต์แวร์แคชเว็บเฉพาะเพื่อจัดเก็บสำเนาของเอกสารที่ผ่านระบบของพวกเขา แพลตฟอร์มเว็บไซต์หลายแห่ง เช่นSiteGround , IONOS , WixและHostingerอาศัย CDN ทั่วโลกและเทคโนโลยีแคชเพื่อส่งมอบการโหลดหน้าเว็บที่เร็วขึ้นในภูมิภาคทางภูมิศาสตร์ต่างๆ^{[ 11 ] [ 12 ] [ 13 ]}

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

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

การโหลดรูปภาพและวิดีโอแบบ Lazy loadingช่วยลดเวลาในการโหลดหน้าเว็บครั้งแรก น้ำหนักของหน้าเว็บครั้งแรก และ การใช้ ทรัพยากรของระบบซึ่งทั้งหมดนี้ส่งผลดีต่อประสิทธิภาพของเว็บไซต์^{[ 14 ]}ใช้เพื่อเลื่อนการเริ่มต้นใช้งานวัตถุไปจนถึงจุดที่ต้องการใช้งาน เบราว์เซอร์จะโหลดรูปภาพในหน้าเว็บหรือโพสต์เมื่อจำเป็น เช่น เมื่อผู้ใช้เลื่อนหน้าเว็บลงมา ไม่ใช่โหลดรูปภาพทั้งหมดพร้อมกัน ซึ่งเป็นพฤติกรรมเริ่มต้น และแน่นอนว่าจะใช้เวลานานขึ้น

เนื่องจากเว็บเบราว์เซอร์ใช้การเชื่อมต่อ TCP หลายรายการสำหรับการร้องขอของผู้ใช้พร้อมกัน การแออัดและการผูกขาดทรัพยากรเครือข่ายของเบราว์เซอร์จึงอาจเกิดขึ้นได้ และเนื่องจากการร้องขอ HTTP/1 มีค่าใช้จ่าย เพิ่มเติมที่เกี่ยวข้อง ประสิทธิภาพของเว็บจึงได้รับผลกระทบจากแบนด์วิดท์ที่จำกัดและการใช้งานที่เพิ่มขึ้น

เมื่อเปรียบเทียบกับ HTTP/1 แล้ว HTTP/2

• เป็นไบนารีแทนที่จะเป็นข้อความ
• เป็นการมัลติเพล็กซ์ แบบเต็มรูปแบบ แทนที่จะเป็นแบบเรียงลำดับและบล็อก
• ดังนั้นจึงสามารถใช้การเชื่อมต่อเดียวสำหรับการทำงานแบบขนานได้
• ใช้ การบีบอัด ส่วนหัวเพื่อลดภาระการทำงาน
• อนุญาตให้เซิร์ฟเวอร์ "ผลักดัน" การตอบสนองไปยังแคชของไคลเอ็นต์ล่วงหน้า^{[ 15 ]}

แทนที่จะใช้เซิร์ฟเวอร์โฮสติ้งของเว็บไซต์ CDN จะถูกใช้ร่วมกับHTTP/2เพื่อให้บริการทรัพยากรเว็บแก่ผู้ใช้ปลายทางได้ดียิ่งขึ้น เช่น รูปภาพ ไฟล์ JavaScript และ ไฟล์ Cascading Style Sheet (CSS) เนื่องจากตำแหน่งของ CDN มักจะอยู่ใกล้กับผู้ใช้ปลายทางมากกว่า^{[ 16 ]}

ในช่วงไม่กี่ปีที่ผ่านมา มีการนำตัวชี้วัดหลายอย่างมาใช้เพื่อช่วยให้นักพัฒนาสามารถวัดประสิทธิภาพในด้านต่างๆ ของเว็บไซต์ได้ ในปี 2019 Googleได้แนะนำตัวชี้วัดต่างๆ เช่น Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint (FP), First Input Delay (FID), Cumulative Layout Shift (CLS) และ Largest Contentful Paint (LCP) ซึ่งช่วยให้เจ้าของเว็บไซต์ได้รับข้อมูลเชิงลึกเกี่ยวกับปัญหาที่อาจส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ ทำให้เว็บไซต์ดูช้าหรือใช้งานยากสำหรับผู้ใช้ ตัวชี้วัดอื่นๆ รวมถึงจำนวนคำขอ (จำนวนคำขอที่จำเป็นในการโหลดหน้าเว็บ) ^{[ 17 ]} DOMContentLoaded (เวลาที่เอกสาร HTML โหลดและแยกวิเคราะห์เสร็จสมบูรณ์ ไม่รวมสไตล์ชีต CSS รูปภาพ ฯลฯ) ^{[ 18 ]} Above The Fold Time (เนื้อหาที่มองเห็นได้โดยไม่ต้องเลื่อน) ^{[ 19 ]} Round Trip Time ^{[ 19 ]}จำนวนทรัพยากรที่บล็อกการแสดงผล (เช่น สคริปต์ สไตล์ชีต) ^{[ 20 ]} Onload Time, Connection Time, Total Page Size ช่วยให้เห็นภาพที่แม่นยำของความหน่วงและปัญหาที่เกิดขึ้นในระดับเครือข่าย ซึ่งอาจทำให้เว็บไซต์ทำงานช้าลง^{[ 21 ] [ 22 ] [ 23 ]}

โมดูลสำหรับวัดเมตริก เช่น TTFB, FCP, LCP, FP เป็นต้น มีให้ในไลบรารี JavaScript ฟรอนต์เอนด์หลักๆ เช่น^{React [ 24 ] NuxtJS [} 25 ] ^และVue [ ^{26 ] Google}เผยแพร่ไลบรารี^core - ^web -vitals ซึ่งช่วยให้สามารถวัดเมตริกเหล่านี้ในแอปพลิเคชันฟรอนต์เอนด์ได้อย่างง่ายดาย นอกจากนี้ Google ยังมี Lighthouse ซึ่งเป็นส่วนประกอบเครื่องมือสำหรับนักพัฒนาของ Chrome และ PageSpeed ​​Insight ซึ่งเป็นเว็บไซต์ที่ช่วยให้นักพัฒนาสามารถวัดและเปรียบเทียบประสิทธิภาพของเว็บไซต์ของตนกับค่าต่ำสุดและสูงสุดที่ Google แนะนำได้^{[ 27 ]}

นอกจากนี้ เครื่องมือต่างๆ เช่น Network Monitor ของMozilla Firefoxยังช่วยให้เข้าใจถึงความล่าช้าในระดับเครือข่ายที่อาจเกิดขึ้นระหว่างการส่งข้อมูลได้อีก ด้วย ^{[ 21 ]}