SiamHTML
Published in

SiamHTML

เว็บโหลดไวขึ้นด้วย ​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 ที่มีผลต่อความรู้สึกของผู้ใช้งานน่าจะเหมาะสมที่สุดครับ

--

--

--

The collection of articles for front-end developers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suranart Niamcome

Suranart Niamcome

Lead Engineer @Tencent (Thailand)

More from Medium

Setup Git large file with unity

Day 25 of Game Dev: Adding VFX to my Player whenever they take Damage!

How to Creating Angular Project using Angular CLI Command?.

GameCI 1: Intro to GitHub Actions for Unity

Test, Build, and Deploy with GameCI