นอกจากรับทำเว็บไซต์ งานหลักๆ อีกอย่างของทีมงานเราก็คือ รับปรับแต่งเว็บไซต์ให้ได้ตามต้องการของลูกค้าด้วย ซึ่งลูกค้าส่วนใหญ่มักจะมีเว็บเป็นของตัวเองมาแล้ว และปัญหาที่ลูกค้ามักจะติดต่อเข้ามามี 2 เรื่องด้วยกันคือ คนรับงานคนเก่าไม่สามารถทำได้ตามต้องการ หรือ เว็บช้าเกินไป โดยเรื่องปรับเว็บตามต้องการนั้นทางเราดำเนินการมาอย่างต่อเนื่องโดยไม่มีปัญหา แต่เรื่องเว็บช้านั้นเราพบว่าทางเดียวที่จะแก้ปัญหาได้อย่างหมดจดคือ เริ่มปรับตั้งแต่โครงสร้างพื้นฐานของเว็บเลย พูดแบบง่ายๆ แต่ทำใจลำบากเลยก็คือ ต้องให้ลูกค้าทำเว็บใหม่นั่นเอง ซึ่งส่วนใหญ่ไม่มีใครยินดี เพราะพวกเขาเพิ่งจะเสียเงินในการทำเว็บไปหลายหมื่นหรืออาจจะหลายแสน
ดังนั้นเราจึงนำปัญหาเรื่องความเร็วนี้มาเป็นปัญหาสำคัญ หรือ Key Success ของเราในการให้บริการทำเว็บ เพื่อให้ไม่ต้องเสียเงินหลายหมืนไปแล้วแต่ต้องมาทำเว็บใหม่ หรือต้องเสียค่าทำ Speed Optimize อีกหลายหมื่น
เว็บโหลดเร็วขึ้นมีข้อดีอย่างไร
ดีต่อลำดับผลลัพธ์การค้นหา หรือ SEO
กูเกิลประกาศหนักแน่นหลายครั้งว่าจะให้คะแนนเว็บที่มีความเร็วสูงอยู่อันดับที่สูงกว่า และยิ่งมีคะแนน Google PageSpeed Insights สูงๆ กูเกิลก็ยิ่งชอบครับ Google PageSpeed Insights คืออะไรเดียวผมจะอธิบายให้ฟังอีกทีครับ นอกจากนี้ทั้ง Google แล้ว Search Engine อื่นๆ เริ่มลงโทษเว็บที่โหลดช้าด้วยการลดอันดับผลการค้นหาลงให้อยู่ลำดับท้ายๆ หรือถูกส่งไปอยู่หน้าหลังๆ ของผลการค้นหาอีกด้วย
ป้องกันลูกค้าหาย ยอดขายหด
ในยุคนี้สิ่งมีค่าที่สุดคือเวลา ทำให้ผู้คนรับไม่ได้กับอะไรที่ทำให้เขาต้องเสียเวลา
มีการศึกษาพฤติกรรมของผู้ใช้งานเว็บไซต์ใหญ่ๆ หลายๆ แห่งเช่น Amazon, Google และเว็บอื่นๆ ให้ผลลัพธ์ออกมาว่า ถ้าเว็บโหลดช้าลง 1 วินาทีจะได้ผลเป็นดังนี้
- สูญเสีย Conversion 7% เปรียบได้ยอดขายอาจหายไปถึง 7 %
- การดูหน้าเว็บลดลง 11% เท่ากับลดโอกาสการเสนอขายสินค้าไปถึง 11%
- ความพึงพอใจของลูกค้าลดลง 16% โอกาสที่กลับมาซื้อซ้ำลดลงไปอีก 16%
แถมยังมีงานวิจัยออกมาว่าตั้งแต่ปี 2010 จนถึงปัจจุบัน สมาธิของผู้คนนั้นลดลงจาก 12 วินาที เหลือเพียง 7 วินาทีเท่านั้น
จากงานวิจัยข้างต้นจะส่งผลอย่างมากต่อเว็บ E-commerce ที่สินค้าเป็นแบบราคาไม่สูงมากและที่ลูกค้ามักใช้อารมณ์เป็นตัวตัดสินใจซื้อ ยกตัวอย่างเช่น คุณทำ salepage มาอย่างดีทำเนื้อหา copywrite มาอย่างสมบูรณ์แบบ เรียกได้ว่าใครเข้ามาอ่านก็ถูกกระตุ้นความอยากให้ซื้อสินค้าชิ้นนี้ได้ไม่ยาก แถมยังตบท้ายด้วยโปรโมชั่นเย้ายวนใจเข้าไปอีก เรียกได้ว่าใครหลงเข้ามาจะต้องกดปุ่มสั่งซื้อทันที แต่ปรากฏว่า พอกดปุ่ม “สั่งซื้อ” ไปแล้วต้องอีกรอหลายสิบวินาที กว่าจะพาไปสมัครสมัครสมาชิก และรออีกหลายวินาทีกว่าจะพาไปหน้ากรอกข้อมูลจัดส่ง และรอกอีกหลายวินาทีกว่าจะพาไปหน้าเลือกช่องทางการจัดส่ง และรออีกหลายวินาทีกว่าจะพาไปหน้าช่องทางชำระเงิน แบบนี้ลูกค้าคงหายไปกลางทางหลายรายแน่นอน เนื่องจากมีเวลาให้เขาเปลี่ยนใจหรือได้สตินานเกินไป
ท้ายสุดยังมีสถิติที่น่าตกใจพบว่า ผู้เข้าเว็บกว่า 50% ไม่กลับมาเข้าเว็บที่โหลดช้ากว่า 3 วินาทีอีกเลย
การทำให้เว็บโหลดเร็วขึ้น ต้องคำนึงถึงสิ่งเหล่านี้
เนื่องการทำเว็บก็เปรียบเสมือนการสร้างสินทรัพย์ให้ธุรกิจ หากสร้างสินทรัยพ์แล้วไม่ทำเงินหรือทำกำไรก็ไม่คุ้มค่าที่จะทำ เราจึงให้ความสำคัญในเรื่องความเร็วเพราะมันส่งผลต่อยอดขายและผลกำไรโดยตรง จากที่ได้ทราบมาแล้วในหัวข้อก่อนหน้า
หัวข้อนี้ทางเราจึงอยากอธิบายถึงสิ่งที่ทางเราดำเนินการเพื่อช่วยเหลือให้เว็บของลูกค้าที่ใช้บริการของทางเรามีความเร็วไม่เกิน 3 วินาที แต่หากคุณไม่ได้เป็นลูกค้าของเรา เราก็ยินดีอย่างยิ่งที่จะให้คุณนำความรู้เหล่านี้ไปปรับใช้ หรือนำไปเป็นแนวทางในการเลือกใช้บริการกับผู้ให้บริการรายอื่นๆ
ทำความรู้จักกับ HTML
เว็บที่พวกเราเห็นกันอยู่บน Web Browser เช่น Chrome, Opara, Safari, Firefox นั้นถูกแสดงผลด้วยภาษาโปรแกรมที่เรียกว่า HTML
โดยการสร้างหน้าเว็บนั้นแบ่งได้เป็น 2 แบบคือ
- Static คือหน้าเว็บไม่มีการเปลี่ยนแปลงเหมือนการอ่านไฟล์ Text โดยตรง ส่งผลให้ อ่านได้รวดเร็วมาก เว็บที่สร้างโดยแนวทางนี้จะเป็นเว็บที่เนื้อหาไม่สามารถเปลี่ยนแปลงได้ หากต้องการเปลี่ยนต้องให้โปรแกรมเมอร์เป็นผู้เปลี่ยนแปลงเท่านั้น นอกจากนี้คุณจะไม่มีระบบพื้นฐานใดๆ เลย เช่น สมัครสมาชิก, ระบบค้นหา, ระบบโพสบทความ,ระบบขายสินค้า และอื่นๆ
- Dynamic คือหน้าเว็บมีการเปลียนแปลงสม่ำเสมอ เช่น เว็บที่มีระบบโพสบทความข่าวสารๆ ที่ผู้ใช้งานทั่วๆไปไม่ต้องเป็นโปรแกรมเมอร์ ก็สามารถพิมบทความที่ต้องการจากนั้นเพียงกดบันทึกเพื่อเผยแพร่ ก็ทำให้หน้าเว็บนั้นๆ มีหน้าหาเปลี่ยนไปแล้ว แต่ข้อเสียคือต้องมีการประมวลผลอีกหลายขั้นตอนก่อนมากกว่าแบบ Static เพราะภาษาที่ใช้จะเป็นภาษาที่ Web Browser ไม่สามารถอ่านได้เช่น PHP, ASP, JSP หรืออื่นๆ ซึ่งจะต้องมีการประมลผลต่างๆ และแปลงเป็นภาษา HTML อีกครั้ง Web Browser ถึงจะอ่านได้ และข้อเสียอีกข้อคือทุกๆ ครั้งที่มีการเปิดหน้าเว็บ( แม้จะหน้าเดิม ) ก็จะต้องมีการประมวลผลใหม่อีกครั้งหนึ่ง
ดังนั้นการทำเว็บแบบ Static หรือทำเป็น HTML จะช่วยให้เว็บโหลดเร็วขึ้นมากเพราะเว็บโฮสติ้งหรือ Web Server ไม่ต้องทำงานหนักเนื่องจากลดกระบวนการทำงานไปได้มาก จะอธิบายเพิ่มเติมในหัวข้อถัดไป
**เว็บโฮสติ้งหรือ Web Server คือ บริการวางไฟล์เว็บไซต์บนโลกออนไลน์ ทีเปรียบเหมือนวางไฟล์ไว้บนคอมสักเครื่อง แต่ต่างกันที่ที่ใครก็ตามสามารถเข้าถึงไฟล์บนคอมของคุณได้นั่นเอง
ตัวอย่างขั้นตอนการแสดงผลหน้าเว็บแบบ Static
จากภาพแบ่งเป็นขั้นตอนได้ดังนี้
- ผู้เข้าเว็บพิมพ์ชื่อ url ที่ต้องการลงบน Web Browser จากนั้น Web Browser จะไปขอข้อมูลหน้าเว็บนั้นๆ มาจาก Web Server ( ที่เก็บไฟล์เว็บที่ได้กล่าวถึงไปแล้วก่อนหน้านี้ )
- Web Server ส่งข้อมูลเป็นไฟล์ภาษา HTML มาให้ Web Browser แสดงผลแก่ผู้เข้าเว็บ
ตัวอย่างขั้นตอนการแสดงผลหน้าเว็บแบบ Dynamic
จากภาพแบ่งเป็นขั้นตอนได้ดังนี้
- ผู้เข้าเว็บพิมพ์ชื่อ url ที่ต้องการลงบน Web Browser จากนั้น Web Browser จะไปขอข้อมูลหน้าเว็บนั้นๆ มาจาก Web Server ( ที่เก็บไฟล์เว็บที่ได้กล่าวถึงไปแล้วก่อนหน้านี้ )
- Web Server ไปทำการอ่านข้อมูลไฟล์ PHP และประมวลต่างๆ พร้อมทั้งดึงข้อมูลจาก Database หรือ ฐานข้อมูลเข้ามาร่วมด้วย
- Web Server แปลงผลการประมวลที่ได้เป็นไฟล์ภาษา HTML
- Web Server ส่งข้อมูลเป็นไฟล์ภาษา HTML มาให้ Web Browser แสดงผลแก่ผู้เข้าเว็บ
จากขั้นตอนทั้ง 2 รูปแบบ คุณจะเห็นว่าแบบ Dynamic มีขั้นตอนเพิ่มขึ้นมาถึง 2 ขั้นตอนซึ่งทั้ง 2 ขั้นตอนนี้นี้ทำให้ Web Server ใช้ทรัพยากรสูงขึ้นหรือทำงานหนักขึ้นนั่นเอง
**ทรัพยากรใน Web Server ก็คือ RAM และ CPU ดังที่ได้กล่าวไปแล้วว่า Server ก็เปรียบเสมือนคอมพิวเตอร์เครื่องหนึ่ง
Cache
แล้วถ้าเราอยากได้ระบบพื้นฐานต่างๆ แต่เว็บโหลดเร็วขึ้นด้วยละจะทำอย่างไร วิธีแก้ก็คือการสร้างไฟล์ HTML เก็บไว้ก่อนเพื่อลดขั้นตอนการต้องประมวลผล PHP และสร้างไฟล์ HTML ใหม่ทุกครั้งที่มีการเปิดหน้าเว็บ ซึ่งวิธีนี้เรียกว่า Cache
HTML Optimize
ถึงแม้จะมีการทำ cache แล้วแต่ยังสามารถเพิ่มความเร็วได้อีก เพราะหากโครงสร้างของ html มีความซับซ้อนสูงก็จะทำให้การโหลดหน้าเว็บช้าขึ้นได้อีก เพราะฉะนั้นก็ต้องมาปรับแก้ที่ระดับโครงสร้าง html อีกต่อหนึ่ง
ในไฟล์ HTML นั้นนอกจากภาษา HTML แล้วยังมีการใช้งานภาษาอี่นๆ เข้ามารวมด้วยดังนี้
- CSS คือภาษาที่ใช้จัดการหน้าตาการแสดงผลเว็บเช่น สีตัวอักษร, ขนาดตัวอักษร, ชนิดตัวอักษร, สีพื้นหลัง เป็นต้น
- JS / Javascript คือภาษาที่ใช้ทำให้เว็บมีการประมวลผลได้มากกว่าแค่แสดงข้อความ เช่น การทำ Animation, การทำระบบปรับขนาดตัวอักษร ซึ่งห็นได้ในเว็บราชการส่วนใหญ่ เป็นต้น
ซึ่งการใช้งานภาษาเหล่านี้ทำได้ 2 วิธีคือเขียนแทรกไว้ในไฟล์ HTML โดยตรง หรือเรียกไฟล์เข้ามาใช้งาน ซึ่งหากเราเรียกใช้งานไฟล์ต่างๆ ผิดตำแหน่ง ก็ส่งผลให้เว็บช้าลงได้อีกเช่นกัน เพราะฉะนั้นการวางตำแหน่งการเรียกใช้ไฟล์อื่นๆ ในโครงสร้าง HTML เช่นไฟล์ CSS, JS จะต้องจัดวางอย่างถูกตำแหน่งด้วย
Merge + Minify
หัวข้อก่อนหน้าได้พูดถึงการจัดวางตำแหน่งการเรียกใช้ไฟล์อื่นๆ ในโครงสร้าง HTML มาแล้ว แต่หากมีการเรียกใช้งานหลายๆ ตำแหน่ง ก็จะส่งผลให้เว็บช้าลงได้อีก ดังนั้นการ รวมไฟล์ หรือ Merge ก็จะช่วยลดการเรียกใช้ไฟล์อื่นๆ ลงได้ เปรียบเสมือนจากที่ต้องเรียกไฟล์หลายสิบไฟล์ จะเหลือเพียงแค่ 1-3 ไฟล์เท่านั้น
และสิ่งที่มักทำคู่กับการ Merge ไฟล์ก็คือการทำ Minify ซึ่งก็คือการบีบอัดไฟล์ให้เล็กลงไปอีก ก็จะช่วยเพิ่มความเร็วให้เว็บได้มากยิ่งขึ้น
CDN
ถึงแม้เราจะจัดการกับไฟล์อื่นๆ ตามวิธีก่อนหน้าแล้ว แต่ก็ยังเป็นการเรียกไฟล์จาก server ของเราซึ่งก็ทำให้ server ของเรามีงานเพิ่มขึ้น ซึ่งวิธีที่จะลดงานของ Server ลงก็คือ CDN ที่เป็นการไปฝากไฟล์ไว้กับบริการรับฝาก และเมื่อต้องเรียกใช้งานก็เพียงไปดึงมาจากบริการเหล่านั้น ทำให้ภาระงานไปเป็นของผู้ให้บริการแทน
ไฟล์ภาพ
เรื่องไฟล์ภาพ ก็ต้องมีขนาดเล็กที่่สุด แต่ยังชัดเจนพอให้ ผู้เข้าเว็บเห็นด้วย โดยเทคนิคการเลือกใช้ไฟล์ให้เหมาะสมก็มีด้วยกัน 3 วิธี
- JPG / JPEG ใช้งานกับรูปภาพทั่วไปที่ไม่มีพื้นหลังโปรงแส่ง เพราะเป็นไฟล์ที่มีการบีบอัดจึงขนาดเล็ก
- PNG ใช้กับรูปภาพที่ต้องการพื้นหลังโปรงแสงเท่านั้น เนื่องจากไฟล์ไม่มีการบีบอัดจึงมีขนาดใหญ่กว่า JPG / JPEG
- WebP คือไฟล์ภาพที่ถูกคิดค้นโดย Google ซึ่งสามารถใช้งานได้ทั้งมีหรือไม่มีพื้นหลังโปรงแสง แถมได้ไฟล์ที่มีขนาดเล็กมากที่สุดใน 3 ชนิดนี้ แต่การใช้งานไฟล์ชนิดนี้ทางเราจะพิจารณาเป็นโปรเจคไปว่าเหมาะสมหรือไม่ เนื่องจากต้องเพิ่มขั้นตอนการแปลงไฟล์ และทาง iOS ยังไม่รองรับไฟล์ชนิดนี้
Server
สุดท้ายปัจจัยที่ส่งผลที่สุดคือ เว็บโฮสติ้ง เนื่องจากโฮสติ้งนั้นก็เหมือนคอมพิวเตอร์ 1 เครื่อง คุณลองเปิดโปรแกรมหลายๆ โปรแกรมพร้อมๆ กันดูสิครับ คุณจะรู้สึกได้ว่าเครื่องคุณช้าลงอย่างมากทันที โฮสติ้งก็เหมือนกันครับ บนโฮสติ้งโดยเฉพาะ Shared Hosting เขาก็มีเว็บมากมายที่ไม่ใช่แค่เว็บคุณคนเดียว ซึ่งเทียบกัน 1 เว็บก็เหมือน 1 โปรแกรมที่เปิดหลายๆ โปรแกรมไว้ตลอดเวลานั้นเองครับ
ทางแก้ต้องทำ 2 ทางด้วยกันคือ
- เพิ่ม RAM และ CPU ( เหมือนคอมพิวเตอร์ที่เพิ่ม RAM และ CPU แล้วเครื่องแรงขึ้น )
- ไม่แบ่งเครื่องให้ใครใช้
สรุปแล้วเราทำอะไรให้เว็บโหลดเร็วขึ้นบ้าง
เราดำเนินการทั้งหมดตามที่ได้กล่าวถึงในทุกๆ หัวข้อก่อนหน้า พร้อมทั้งใช้ Server ในรูปแบบ Cloud Server ที่มาแก้ปัยหาได้ทั้ง 2 ทางที่พูดถึงในหัวข้อ Server
โดยวิศกรของเราจะพิจารณ์เลือก RAM และ CPU ที่เหมาะสมกับธุรกิจหรือเว็บไซต์ของคุณเพื่อไม่ให้ลงทุนเกินความจำเป็น และนอกจากที่ระบบ Cloud จะเปรียบเสมือนคอมพิวเตอร์ส่วนตัวที่ไม่แบ่งให้ใครใช้แล้ว ยังมีความเสถียรกว่า โฮสติ้ง อย่างมากเพราะไม่ใช่แค่เป็นเหมือนคอมเครื่องเดียวสำหรับคุณ แต่คือ คอมหลายๆ เครื่องที่มีการโคลนข้อมูลกันไว้ตลอดเวลา เรียกว่าเครื่องไหนใช้ไม่ได้ ก็ไปใช้เครื่องใหม่ต่อได้ทันทีนั่นเองครับ ซึ่งโฮสติ้งนั้นจะว่างอยู่แค่คอม 1 เครื่องเท่านั้น
นอกจากนี้สำหรับโปรเจคที่มีการใช้ทรัพยากรสูงๆ ทางเราก็มีบริการในระดับ Advance ขึ้นไปอีก เช่น แยก MySQL Server, Block Storage, Blob Storage, เพิ่ม Compute Node, และ Load balancing เป็นต้น
สรุป
ทุกเว็บที่ทางเราให้บริการพยายามทำให้การโหลดหน้าเว็บได้เร็วกว่า 3 วินาที และนอกจากความเร็วแล้ว สิ่งที่ทางเราให้ความสำคัญควบคู่กันไปก็คือด้านความปลอดภัยของเว็บไซต์นั้นเอง