เว็บโหลดไวขึ้นด้วย DNS Prefetch
--
บทความนี้ผมจะมาแนะนำวิธีง่ายๆ ที่จะช่วยให้เว็บโหลดเร็วขึ้นอีกวิธีหนึ่ง ที่เรียกว่าการทำ DNS Prefetching ซึ่งก็คือการบอกให้ web browser ไป resolve domain name ที่เราระบุล่วงหน้าก่อนเลย พอถึงเวลาที่จะใช้ resource จาก domain name นั้นๆ ก็จะได้ไม่ต้องมาเสียเวลามา resolve แล้ว
เพราะ DNS Resolution นั้นเสียเวลา
โดยปกติแล้ว เวลาเราจะให้ web browser ไปโหลดไฟล์ต่างๆ มาใช้นั้น เราก็จะระบุ url ไปใช่มั้ยครับ แต่การที่ web browser จะรู้ว่าไฟล์ต่างๆ อยู่ที่ไหนนั้น มันจะต้องทำสิ่งที่เรียกว่า DNS resolution ก่อนครับ ซึ่งมันก็คือการไปดูว่า domain name นั้นๆ มันคือ IP address อะไร มันจะได้วิ่งไปหาไฟล์ได้ถูก
ถึงแม้ว่าขั้นตอนการทำ DNS resolution นี้จะใช้เวลาไม่มากเท่าไรนัก แต่ลองนึกเล่นๆ ดูว่า หากเว็บเรามีการเรียกใช้ไฟล์ภายนอกจาก domain name ที่หลากหลายเอามากๆ เวลาที่เสียไปกับ DNS resolution ก็ถือว่าไม่น้อยเลยล่ะครับ
แก้ปัญหาด้วย DNS Prefetching
ปัญหาดังกล่าวสามารถแก้ได้ง่ายๆ เลยด้วยการทำ DNS prefetching ครับ ให้เราบอก web browser ไปเลยว่าอยากให้มันไป resolve domain name ไหนล่วงหน้าเลยบ้าง รูปแบบการใช้งานจะเป็นแบบนี้ครับ
<head>
<link rel="dns-prefetch" href="//static1.siamhtml.com">
<link rel="dns-prefetch" href="//static2.siamhtml.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
.
.
.
</head>จากโค้ดด้านบน ผมบอกให้ web browser รีบไปดูก่อนเลยว่า domain name ด้านบนนั้น มันมี IP address เป็นอะไร พอเวลาจะเรียกใช้อะไรจาก domain name เหล่านั้น มันก็จะไม่ต้องเสียเวลาไปกับการทำ DNS resolution แล้วครับ
แล้วทำก่อนมันจะเร็วกว่าทำหลังยังไง ?
ผมเองก็เคยสงสัยว่าสุดท้ายแล้วมันก็ต้อง resolve domain name อยู่ดี แล้วเราจะรีบ resolve ล่วงหน้าไปทำไม ? รอให้ถึงเวลาที่จะใช้ค่อย resolve ไม่ดีกว่าหรอ ? คำตอบที่ได้มาก็คือ การทำ DNS prefetching นั้น มันจะเป็นแบบ asynchronous ครับ คือมันจะไม่ไป block การ render หน้าเว็บเลย ดังนั้น เราจึงสามารถใส่โค้ดสำหรับทำ DNS prefetching ไว้ต่อจาก <head> ได้เลยครับ มันจะได้ resolve เสร็จก่อนที่ web browser จะไล่ไปถึงตัว resource ที่จะต้องโหลดเข้ามา
อย่างไรก็ตาม ใช่ว่าเราจะทำ DNS prefetching กับ domain name ทั้งหมดที่มีการใช้ในหน้าเว็บนั้นๆ ได้เลยนะครับ เพราะยังไงมันก็ต้องใช้ network อยู่ดี เผลอๆ ใส่เยอะไปอาจจะทำให้ช้าลงก็ได้ครับโดยเฉพาะใน mobile ที่เน็ทไม่ได้เร็วมาก แนะนำว่าให้ใส่เฉพาะกับ domain name ที่เก็บพวกไฟล์ static ที่มีผลต่อความรู้สึกของผู้ใช้งานน่าจะเหมาะสมที่สุดครับ
