HTTP/1 vs HTTP/2
vs HTTP/3

What it isคืออะไร

The client sends a method, a path and headers; the server replies with a status code, headers and usually a body. In HTTP/1.x the format is plain text you could type by hand. Early versions opened a fresh connection for every exchange and threw it away, a decision that shaped 20 years of workarounds.client ส่ง method, path และ headers ส่วน server ตอบ status code, headers และมักมี body ใน HTTP/1.x ข้อความเป็น text ล้วน พิมพ์มือได้ เวอร์ชันแรก ๆ เปิด connection ใหม่ทุก exchange แล้วทิ้ง ซึ่งเป็นต้นตอของ workaround ตลอด 20 ปีต่อมา

Analogy

Ordering by postcard: one item per card, one parcel back. A second item needs a second postcard.สั่งของทางโปสการ์ด ใบละชิ้น ได้พัสดุกลับมาหนึ่งกล่อง อยากได้ชิ้นที่สองก็เขียนใบใหม่

Why it mattersทำไมสำคัญ

Debugging an odd status code starts with the raw exchange, not your app logs. Send requests by hand with curl and read real traffic in the DevTools Network tab.debug status code แปลก ๆ ให้เริ่มจาก raw exchange ไม่ใช่ log ของแอป ยิง request เองด้วย curl แล้วดู traffic จริงใน DevTools Network tab

What it isคืออะไร

HTTP/1.1 keeps the connection open after a response, until either side sends a close header or a timeout fires, so one handshake now covers dozens of requests. A page with 40 assets used to pay 40 handshakes; on one persistent connection it pays one.HTTP/1.1 ค้าง connection ไว้หลังตอบ จนกว่าฝั่งใดจะส่ง header สั่งปิดหรือ timeout ทำงาน handshake ครั้งเดียวเลยครอบคลุมหลายสิบ request หน้าที่มี 40 asset เคยจ่าย 40 handshake เหลือแค่ครั้งเดียว

Analogy

Keeping the line open between questions instead of hanging up and redialing every time you think of something new.ถือสายไว้ถามต่อ แทนที่จะวางแล้วโทรใหม่ทุกครั้งที่นึกคำถามออก

Why it mattersทำไมสำคัญ

Connection churn on a busy proxy exhausts ephemeral ports before bandwidth. Tune keepalive_timeout in nginx and server.keepAliveTimeout in Node, then check both against your load balancer.proxy ที่เปิด-ปิด connection ถี่ ๆ จะหมด ephemeral port ก่อนหมด bandwidth จูน keepalive_timeout ใน nginx และ server.keepAliveTimeout ใน Node แล้วเช็กให้ตรงกับ load balancer

What it isคืออะไร

A single HTTP/1.1 connection handles one exchange at a time. A slow database query on request one keeps four others waiting while the network sits idle. Persistent connections removed the handshake cost and left this queue completely intact. It is the ceiling HTTP/1.1 could never lift.HTTP/1.1 connection หนึ่งทำทีละ exchange request แรกติด DB query ช้า อีก 4 ตัวก็ต้องรอทั้งที่ network ว่าง persistent connection ตัดค่า handshake ได้ แต่คิวนี้ยังอยู่ครบ นี่คือเพดานที่ HTTP/1.1 ทะลุไม่ได้

Analogy

A single supermarket checkout: the shopper at the front needs a price check and the four people behind them stand still.ช่องคิดเงินช่องเดียว คนหน้าสุดขอเช็กราคา อีก 4 คนข้างหลังยืนนิ่ง

Why it mattersทำไมสำคัญ

Stair-stepped requests with visible gaps in a waterfall chart point straight at this. Every HTTP/1.1 workaround, from parallel connections to asset bundling, exists to hide this one property.waterfall ที่เป็นขั้นบันไดมีช่องว่าง ชี้มาที่เรื่องนี้ตรง ๆ workaround ของ HTTP/1.1 ทุกอย่าง ตั้งแต่ parallel connection ถึง asset bundling มีไว้ซ่อนคุณสมบัติข้อนี้ข้อเดียว

What it isคืออะไร

Cache-Control sets the rules: max-age for freshness, no-cache to force a check, immutable to promise the URL never changes. A conditional request sends the stored ETag in If-None-Match and gets 304 Not Modified with no body. A cache hit costs zero bytes on the wire and zero server time.Cache-Control กำหนดกฎ: max-age บอกอายุความสด, no-cache บังคับเช็กทุกครั้ง, immutable สัญญาว่าไฟล์ใต้ URL นี้ไม่เปลี่ยน conditional request ส่ง ETag ที่เก็บไว้ใน If-None-Match แล้วได้ 304 Not Modified กลับมาแบบไม่มี body cache hit = 0 byte บนสาย และ 0 เวลาของ server

Analogy

Asking a librarian whether the report changed since your last visit. If nothing changed, you read the copy already on your desk.ถามบรรณารักษ์ว่ารายงานเปลี่ยนไหมตั้งแต่มาครั้งก่อน ถ้าไม่ ก็อ่านสำเนาที่อยู่บนโต๊ะอยู่แล้ว

Why it mattersทำไมสำคัญ

Static assets and API responses need opposite policies; mixing them costs freshness or bandwidth. Set rules at the edge (Cloudflare, Varnish) and read the real hit ratio there. Versioned filenames make conditional requests unnecessary.static asset กับ API ต้องการนโยบายตรงข้ามกัน สลับกันเมื่อไหร่เสียความสดหรือ bandwidth ตั้งกฎที่ edge (Cloudflare, Varnish) แล้วดู hit ratio ของจริง ถ้าทำ versioned filename แล้ว conditional request ก็แทบไม่จำเป็น

What it isคืออะไร

TCP cannot know the bandwidth between you and your user. Guessing high floods the path and drops packets, so it guesses low and probes upward: the window starts around 10 packets (about 14 KB) and doubles on every successful round trip. Packet loss halves it and switches to a slower climb.TCP ไม่รู้ว่าระหว่างคุณกับผู้ใช้มี bandwidth เท่าไหร่ เดาสูงไปจะท่วมเส้นทางจน packet หล่น เลยเดาต่ำแล้วค่อย ๆ probe ขึ้น: window เริ่มราว 10 packet (ประมาณ 14 KB) และเพิ่มสองเท่าทุก round trip ที่สำเร็จ เจอ packet loss ก็หั่นครึ่งแล้วไต่ช้าลง

Analogy

Merging onto a motorway: you accelerate in stages instead of flooring it blind into traffic you cannot see yet.ขับรถเข้าทางด่วน ค่อย ๆ เร่งเป็นช่วง ไม่ใช่เหยียบมิดทั้งที่ยังมองไม่เห็นรถข้างหน้า

Why it mattersทำไมสำคัญ

The first 14 KB of your HTML carry more weight than the next 500. Put critical CSS and the hero image reference inside that window and let Lighthouse confirm the render path. A reused connection keeps the window it already earned.14 KB แรกของ HTML มีน้ำหนักกว่า 500 KB ถัดไป ใส่ critical CSS และ hero image reference ไว้ใน window นั้น แล้วให้ Lighthouse ยืนยัน render path ส่วน connection ที่ใช้ซ้ำก็เก็บ window ที่ไต่มาได้แล้วไว้

What it isคืออะไร

A connection carries many streams; each stream is one request-response pair; each message splits into frames tagged with the stream id, so frames from different requests share the wire and reassemble correctly. A few bytes of label per frame is what makes concurrency on one connection practical.connection หนึ่งมีหลาย stream แต่ละ stream คือ 1 คู่ request-response แต่ละ message หั่นเป็น frame ที่ติดป้าย stream id frame จากคนละ request เลยแชร์สายเดียวกันแล้วประกอบคืนถูกที่ ป้ายไม่กี่ byte ต่อ frame นี่แหละที่ทำให้ concurrency บน connection เดียวเป็นจริง

Analogy

One highway with many lanes. Every car carries a destination label, so they travel together and still arrive at different lanes.ทางด่วนหลายเลน รถทุกคันมีป้ายปลายทาง เลยวิ่งปนกันได้แล้วไปถึงคนละเลน

Why it mattersทำไมสำคัญ

Default stream limits rarely match the concurrency your service sees. Set http2_max_concurrent_streams in nginx and the matching limit in Envoy against your real p99.stream limit ค่า default มักไม่ตรงกับ concurrency ของจริง ตั้ง http2_max_concurrent_streams ใน nginx และค่าเทียบเท่าใน Envoy ตาม p99 จริงของคุณ

What it isคืออะไร

Frames of many requests and responses interleave over one connection, so the queue disappears: request one waits on a slow database while the others return and render, and the server replies in whatever order the data is ready. Desktop pages open fewer connections on HTTP/2 than on HTTP/1.1, roughly half on lighter pages.frame ของหลาย request และ response สลับกันวิ่งบน connection เดียว คิวเลยหายไป: request แรกรอ DB ช้าอยู่ ตัวอื่นก็กลับมา render ได้ server ตอบตามลำดับที่ข้อมูลพร้อม หน้าเว็บบน desktop เปิด connection น้อยลงบน HTTP/2 และบนหน้าเบา ๆ เหลือราวครึ่งเดียว

Analogy

One conversation channel where every sentence carries the speaker’s name. Three people talk at once and nobody loses the thread.ช่องสนทนาเดียวที่ทุกประโยคติดชื่อคนพูด สามคนคุยพร้อมกันก็ไม่มีใครหลุดเรื่อง

Why it mattersทำไมสำคัญ

Multiplexing changes how you bundle: many small files beat one big one for cache reuse. Check the protocol column in DevTools and measure the bundling change in WebPageTest. TCP head-of-line blocking is the limit it could never remove.multiplexing เปลี่ยนวิธี bundle: ไฟล์เล็กหลายไฟล์ชนะไฟล์ใหญ่ไฟล์เดียวเรื่อง cache reuse เช็กคอลัมน์ protocol ใน DevTools แล้ววัดผลการเปลี่ยน bundle ใน WebPageTest ส่วน TCP head-of-line blocking คือขีดจำกัดที่มันถอดไม่ได้

What it isคืออะไร

Flow control caps the data a sender may have outstanding, per stream and across the whole connection. The receiver sets a window (65,535 bytes by default) and grants more room with WINDOW_UPDATE frames as it consumes data. It protects slow consumers, like a browser decoding a large image, and stops one greedy stream from monopolizing the connection.flow control จำกัดปริมาณข้อมูลที่ฝั่งส่งค้างได้ ทั้งต่อ stream และทั้ง connection ฝั่งรับตั้ง window (ค่าเริ่มต้น 65,535 byte) แล้วให้พื้นที่เพิ่มผ่าน WINDOW_UPDATE frame เมื่อย่อยข้อมูลไปแล้ว มันปกป้องผู้รับที่ช้า เช่น browser ที่กำลัง decode รูปใหญ่ และกัน stream ตะกละตัวเดียวยึด connection ไว้ทั้งหมด

Analogy

A coworker saying “send me five files at a time and I’ll ask for more.” They control the pace, so nothing piles up on their desk.เพื่อนร่วมงานบอกว่า “ส่งมาทีละ 5 ไฟล์ แล้วเดี๋ยวขอเพิ่มเอง” เขาคุมจังหวะเอง งานเลยไม่กองบนโต๊ะ

Why it mattersทำไมสำคัญ

Large uploads, gRPC streams and video segments hit this ceiling before they hit bandwidth. Watch window updates with nghttp and confirm socket-level throughput with ss. QUIC applies the same idea per stream.upload ใหญ่ ๆ, gRPC stream และ video segment ชนเพดานนี้ก่อนชน bandwidth ดู window update ด้วย nghttp และยืนยัน throughput ระดับ socket ด้วย ss ส่วน QUIC ใช้ไอเดียเดียวกันแบบแยกต่อ stream

What it isคืออะไร

Server Push sent resources before the browser asked, but it pushed files already in the cache and gains were inconsistent, so Chrome disabled it and Firefox removed it. Early Hints is the simpler replacement: a 103 response with Link headers while the final response is prepared, so the browser can preconnect and preload CSS before the HTML arrives. Adoption is still 2.9% of desktop pages, about 90% of it Shopify.Server Push ส่ง resource ก่อน browser จะขอ แต่มันดันส่งไฟล์ที่อยู่ใน cache แล้ว และผลลัพธ์ไม่สม่ำเสมอ Chrome เลยปิด ส่วน Firefox ถอดออก Early Hints เป็นตัวแทนที่ง่ายกว่า: ตอบ 103 พร้อม Link header ระหว่างเตรียม response จริง browser จึง preconnect และ preload CSS ได้ก่อน HTML มาถึง การใช้งานยังแค่ 2.9% ของหน้า desktop และราว 90% ในนั้นคือ Shopify

Analogy

Push is a waiter setting down a dish you never ordered and may already have. Early hints is a waiter handing you the menu while the kitchen warms up.push คือบริกรวางจานที่ไม่ได้สั่งและอาจมีอยู่แล้ว ส่วน early hints คือบริกรยื่นเมนูให้ระหว่างครัวกำลังอุ่นเตา

Why it mattersทำไมสำคัญ

Dead push configuration survives in production long after browsers stopped honoring it. Enable early hints at Cloudflare or Fastly and prove the gain with real-user monitoring, not a lab score.config ของ push ที่ตายแล้วยังค้างใน production ทั้งที่ browser เลิกสนใจไปนานแล้ว เปิด early hints ที่ Cloudflare หรือ Fastly แล้วพิสูจน์ผลด้วย real-user monitoring ไม่ใช่คะแนน lab