เกริ่นกันก่อนว่าเราทำเว็บไซต์นี้ขึ้นมาใหม่ เพราะเรากำลังจะไปออกบูธกันที่งาน Techsauce Summit 2017 ที่ผ่านมา (คำเตือน: เราทำเว็บใหม่นี้ ภายใน 10 ชม.)
ทำไมต้องที่ 2 วิ, 3G และ disable cache
- ยิ่งเร็วยิ่งดี ไม่มีใครชอบการรอ
- เราไม่สามารถคาดเดาความเสถียรของสัญญาณมือถือในงานได้ เพราะฉะนั้นลองทดสอบกับ network แบบแย่ๆ จะดีที่สุด
- คนที่จะเข้าเว็บ maqe.com เป็นผู้ใช้งานครั้งแรกแน่นอน เพราะเป็นคนที่พึ่งมารู้จักเราในงาน เพราะฉะนั้นเค้าไม่มี cache ใน browser เค้าแน่ๆ
ทำไมเว็บโหลดช้า ปัญหาหลักๆ เลยคือ
- ไฟล์ HTML, CSS, JS มีขนาดใหญ่
- มีไฟล์ CSS, JS หรือ รูปภาพหลายไฟล์ ทำให้มีการยิง request เยอะเกินไป และทำให้เกิดการ block request
มาเริ่มกันเถอะ
โดยปกติของการแปลงดีไซน์ออกมาให้เป็นหน้าเว็บไซต์ เราก็มาดูกันก่อนว่ามีเทคนิคอะไรเป็นพิเศษไหม
- จะเห็นว่ามี 2 อย่างที่ดูพิเศษกว่าตรงจุดอื่น ก็คือเมนูที่มีแท่งเอียงๆ, ฉากเฉียงที่ขั้นไปมาระหว่าง section
- พวกรูปภาพตามจุดต่างๆ เช่น ฉากหลัง, รูปภาพ portfolio
แก้ปัญหาด้วย CSS ให้ได้มากที่สุดเท่าที่จะทำได้
เพราะจะลดภาระจากการโหลด JavaScript หรือไฟล์รูปภาพ
จะเห็นว่า แท่งเอียง และฉากเฉียงสามารถใช้เทคนิค CSS Skew เข้ามาช่วยได้ก็จัดไปครับ
แต่เจอปัญหาว่า ถ้าเราทำฉากเฉียงด้วย CSS Skew จะทำให้ องศาการเอียง มันต่างกันระหว่างหน้าจอเล็กใหญ่ สุดท้ายก็เลยต้องไปจบที่ SVG ซึ่งมีขนาดเล็กเพียง 1KB แล้วยืดขยายขนาดแทน
(แต่ท้ายสุด เราก็ทำ embed SVG เป็น inline ลงไปใน HTML เลย เพราะว่าไฟล์เล็กมาก เปลืองจำนวน request เปล่าๆ)
รู้เป้าหมายของรูปภาพว่านำไปใช้ตรงไหน จะได้ย่อรูป และบีบอัดให้เหมาะสม
ตรงนี้คิดว่าหลายคนคงจะรู้เทคนิคกันดีอยู่แล้ว ก็คือการบีบอัดรูปภาพ (compressed) ให้มีขนาดเล็กที่สุดเท่าที่จะทำได้ แต่ปัญหาคือ เราจะเลือกอย่างไรดี?
ในหน้ามีภาพใหญ่ตรงส่วน header แต่เป็นภาพพื้นหลังซึ่งไม่มีรายละเอียดมากนัก ใช้เพื่อช่วยสร้างบรรยากาศ ตรงนี้ตัดสินใจได้เลยว่า เราไม่ได้เน้นคุณภาพว่าต้องคมชัด
และด้วยว่าขี้เกียจต้องทำโหลดรูปภาพสองรูปสำหรับ มือถือและจอคอมปกติ ฮ่าๆ 😜
เลยเลือกย่อรูปมาที่ความกว้าง 1680 เพราะเป็นขนาดระหว่าง หน้าจอคอมปกติทั่วไปที่ 1920 และหน้าจอโน๊ตบุคที่ 1366, 1440 ซึ่งคนใช้กันเยอะ
ลองดูภาพประกอบด้านล่าง อ้อ เผื่อให้มือถือความละเอียดสูงด้วยอย่าง iPhone
พอลองบีบอัดแล้วดูด้วยตาเปล่า ดูไม่ต่างกันมากเลยเลือกเป็นไฟล์ jpg คุณภาพที่ 30% ขนาดไฟล์อยู่ที่ 30kb ใช้ได้เลยละ! ไฟล์เล็กขนาดนี้
ส่วนของภาพ portfolio เรารู้อยู่แล้วว่าขนาดใหญ่สุด อยู่ที่ 500px เพราะว่าพอย่อไปอยู่ในมือถือก็จะมีขนาดเล็กลง ไม่มีทางขยายใหญ่ไปกว่าขนาดนี้ ก็จัดไป jpg คุณภาพที่ 30% เช่นกัน
ตรงนี้จะมีเทคนิคอีกนิดหน่อยในการเลือกประเภทไฟล์ เพราะถ้าเป็นรูปที่มีหลายสีสันแนะนำควรทำเป็นไฟล์ jpg แต่ถ้าสีสันน้อยมากก็ลองเป็น png แบบ 8bit ไปเลย 😉 อันนี้คงต้องลองทำเทียบดูว่าไฟล์ไหนมีขนาดเล็กกว่า
เอาละ จุดที่พิเศษๆ ก็หมดแล้ว ที่เหลือก็เริ่มลุยตัด HTML, CSS กัน
เขียน หรือใช้ CSS เท่าที่จำเป็น, แน่ใจหรือ ว่าต้องใช้ Bootstrap ?
คิดว่าทุกวันนี้ ส่วนใหญ่ก็จะมีเครื่องมือที่ใช้กันประจำ ชนิดที่ว่าถ้าทำโปรเจคใหม่ก็โหลด CSS พวกนี้มาใช้กันเป็นพื้นฐานเลย เช่น Normalize, Bootstrap, Bulma
แล้วทำไมต้องกังวล? ก็เพราะว่าไฟล์แต่ละอันที่เราเรียกใช้ มันเพิ่มขนาดไฟล์ที่ต้องส่งไปยังเครื่องปลายทางนะสิ! เพราะฉะนั้นยิ่งน้อยก็ยิ่งเร็ว 😜
แนะนำว่าให้ลองคิดทบทวนให้ดี อย่างโปรเจ็ค maqe.com เราดูกันแล้วว่าไม่จำเป็น เพราะ Grid เราก็เขียนกันง่ายๆ โดยใช้ flex ได้เลย ส่วนเรื่อง reset เราก็ไม่ได้มี element หนักๆ ก็ reset กันเฉพาะบางจุดดีกว่า
แต่สุดท้ายก็เจอปัญหาอยู่ดี ตรงส่วนของรายชื่อลูกค้า
เนื่องจากมีไฟล์รูปหลายตัว และไม่สามารถใช้เทคนิค image sprite ได้ เพราะต้องทำขนาดที่ต่างกันในมือถือ และจอปกติ (Responsive) ทำไงดีละ!? 😨
ใช้ Lazy load ให้กับรูปภาพที่ยังไม่เห็น
คือโหลดเฉพาะภาพที่ user กำลังเห็น หรือกำลังจะเห็นนั่นเอง เทคนิคนี้คงคุ้นเคยกันดีอยู่แล้ว ถ้าอยากลองเห็นตัวอย่าง ก็ที่นี่เลย เทคนิคนี้ช่วยลดภาระในการโหลดข้อมูลไปได้เยอะเลย
ยัง…ปัญหายังไม่หมด
ตอนลองทดสอบกับความเร็ว 2G ปรากฏว่าโหลดภาพไม่ทัน เพราะตัว lazy load ทำงานช้าไป ทำให้ user เห็นแต่กรอบว่างเปล่า นั่นไม่ใช่ประสบการณ์ที่ดีสำหรับ user เลย! ก็เลยแก้ด้วยการ trigger การ load ภาพให้เร็วขึ้น
เพราะโดยทั่วไป user กำลังอ่านข้อมูลอยู่ คงมีน้อยคนที่จะไถหน้าจออย่างรวดเร็วไปที่ด้านล่าง ตรงนี้ช่วยซื้อเวลาให้การโหลดภาพได้ระดับนึง
ใกล้จะจบแล้ว :)
แต่….. เราเพิ่งมาเจอว่า ตอนคลิกเมนูต้องทำให้เป็น smooth scroll ภายในหน้าด้วย ทำไงดี เลยไปไล่ดูเว็บ maqe.com ตัวเก่า ปรากฏว่าใช้ jQuery 😢
โอ้ววววส์ ไม่นะ! 😦
ถ้าเลี่ยงได้ก็ไม่ต้องใช้ jQuery
เทคนิคนี้คล้ายๆ กับการใช้งาน CSS เท่าที่จำเป็น เพราะ jQuery ถึงแม้จะ minified และ gzip แล้วก็ยังมีขนาดใหญ่อยู่ดี (30kb) ถ้าต้องแลกมากับการใช้งานในจุดเล็กๆ อย่าง smooth scroll ดูไม่ค่อยคุ้มเท่าไหร่ ตรงจุดนี้เราเลยใช้เป็น Vanilla JS แทน
ทำไฟล์ขึ้น production
ใช้การ minified และ bundled ให้เป็นแพ๊คเดียวกันทั้งหมด เพื่อลดจำนวนการยิง request 😉 ทั้ง CSS และ JS
ในที่สุด! สรุป
จะเห็นว่าหลักการทั้งหมด คือใช้ทรัพยากรต่างๆ เท่าที่จำเป็น
- ใช้ CSS แก้ปัญหาให้กับการแสดงผล เท่าที่จะเป็นไปได้
- บีบอัดรูปภาพ, เลือกขนาดไฟล์ และประเภทไฟล์ที่เหมาะสม
- ใช้ CSS, JS ที่เป็น 3rd party libraries เท่าที่จำเป็น ถ้าเลี่ยงได้ก็ดี ให้ลองคิดถึงขนาดไฟล์ และความถี่ในการใช้งาน
- Lazy load รูปภาพ เพราะถ้า user ยังไปไม่ถึงรูปนั้นๆ ก็ยังไม่ต้องโหลดก็ได้
- ลดจำนวนการ requests ระหว่าง server กับเครื่องปลายทาง ให้น้อยที่สุด
สามารถทำให้เว็บเร็วกว่านี้อีกได้ไหม?
ได้สิ! ยังมีอีกหลายเทคนิคให้เรียนรู้ ไม่ว่าจะเป็น Time To First Byte (TTFB), Cached, CDN, การโหลด CSS หรือ JS เป็นโมดูล หรือ HTTP2 สนใจก็มาลองคุยกันดู 👌
ตอนนี้ MAQE กำลังเปิดรับสมัคร FrontEnd และ BackEnd ถ้าใครสนใจอยากทำอะไรแบบข้างต้น หรือว่าถ้าสามารถทำให้มันเร็วกว่านี้ได้อีก ก็เข้ามาคุยกันได้เลย! 😃 recruit@maqe.com
