จุดเริ่มต้นสู่ความเร็วของเว็บไซต์

Techniques of Website Speed Optimization.

https://www.igeargeek.com/

การตอบสนองที่รวดเร็วของเว็บไซต์นั้น ส่งผลต่อความน่าสนใจในการใช้งานจากผู้ใช้เป็นอย่างมาก แถมยังส่งผลทางเทคนิคที่จะทำให้เว็บไซต์เราขึ้นเป็นอันดับต้นๆของการค้นหาผ่าน Google อีกด้วย

ลองนึกภาพเวลาที่เราต้องรอเว็บโปรด ที่เราอยากจะเข้าชม เข้าใช้งานมันอย่างทันที แต่เจ้าเว็บไซต์นั้นค่อยๆโหลดเนื้อหาขึ้นมาอย่างช้าๆ ค่อนข้างขัดใจเรามากเลยทีเดียวใช่ไหมครับ

หรือบางทีเรากดปุ่ม กดเลือกเมนูใดๆแล้วดันนิ่งกริบกันต่อหน้าต่อตา สักพักถึงจะตอบสนองกลับมา แต่ก่อนหน้านั้นเราคงคิดไปแล้วว่า เว็บนี้มันเจ็ง มันล่มรึเปล่าไป เรียบร้อยแล้ว ซึ่งแน่นอนว่า เว็บไซต์นั้นๆย่อม น่าเชื่อถือ และน่าใช้น้อยลง

ฉะนั้น “ความเร็วของเว็บไซต์” เป็นจุดหลักสำคัญที่เราไม่ควรจะมองข้าม ในบล็อกนี้ผมจึงจะมาแนะนำ และช่วยทบทวน การปรับปรุงความเร็วของเว็บไซต์ด้วยวิธีต่างๆ สำหรับผู้ที่สนใจพัฒนาปรับปรุงประสิทธิภาพของเว็บไซต์กันครับ

อะไรที่ส่งผลต่อความเร็วของเว็บไซต์บ้าง

https://picksaas.com/blog/website-builder-software/

ก่อนอื่นเลยเราต้องเข้าใจในส่วนประกอบ โครงสร้างต่างๆของตัวเว็บไซต์ ว่ามันถูกประกอบขึ้นมาจากอะไรบ้าง เราจึงจะสามารถปรับปรุง พัฒนาได้อย่างตรงจุด

สิ่งที่หน้าเว็บเราจะต้องใช้เวลาในการเรียกหน้าเว็บไซต์หน้าหนึ่งขึ้นมาแสดงนั้น

ประกอบไปด้วย

ตัวอักษร หรือข้อความ, รูปภาพ, วีดีโอ, เสียง, ไลบรารี่, เฟรมเวิร์ค รวมไปถึงปลั๊กอินต่างๆท่ีนำมาใช้กับการแสดงผล และประมวลผลในหน้าเว็บนั้นๆทั้งที่นำมาใช้ในหน้าเว็บตรงๆ กับส่วนเบื้องหลังที่เรานำมาทำงานร่วมด้วย

หน้าเว็บไซต์จะช้าจากอะไร?

• ปัญหาจากการมี ข้อมูลที่นำมาประมวลผล มากกว่า ข้อมูลที่นำมาแสดงจริง

การนำข้อมูลของเรามาใช้ในหน้าเว็บไซต์หนึ่งเราอาจ เผลอ หรือตั้งใจนำข้อมูลมาประมวลผลทั้งก้อนใหญ่ๆ ทั้งที่ต้องการนำมาใช้ และแสดงจริงๆ เพียงส่วนเดียว เช่น เราเอาข้อมูลของคนๆหนึ่งที่มีทั้ง ชื่อ อายุ ที่อยู่ เบอร์โทรติดต่อ จำนวนคนในครอบครัว นิสัย และอื่นๆอีกมากมายมาใช้ด้วยกันทีเดียว โดยที่เราจะใช้จริง และต้องการแสดงผลจริงๆเพียงแค่ชื่อ และเบอร์โทร ซึ่งข้อมูลที่เหลือนั้นเราก็ไม่ได้จะนำไปใช้ต่อใดๆทำให้ตัวเว็บต้องเสียเวลาประมวลผลเพิ่มกับข้อมูลที่ไม่จำเป็นเหล่านั้น

• ปัญหาจากการใช้งานรูป เช่น แสดงรูปในพื้นที่ขนาดเล็กด้วยรูปขนาดใหญ่

บางทีเราอาจไม่ได้ตระหนักในการนำรูปๆหนึ่งมาใช้กับเว็บของเราแต่แท้ที่จริงแล้วขนาดของรูปส่งผลโดยตรงกับเวลาที่ใช้โหลดหน้าเว็บขึ้นมาเลยด้วยซ้ำ ยิ่งรูปมีขนาดพื้นที่มาก ตัวเว็บไซต์เองก็ต้องใช้เวลาในการโหลดขึ้นมาแสดงมากขึ้นเท่านั้น

• ปัญหาจากการ เขียนโค้ดซ้ำและ ซับซ้อนโดยไม่จำเป็น

Divitis

ลืมวางแผนก่อนเริ่มทำ หรืองานเร่งจนต้องรีบเขียนให้เสร็จ ทำให้เราไม่ทันได้สังเกตสิ่งที่ได้เขียนลงไปอย่างรอบคอบ จึงเกิดการเขียนโค้ดที่ซับซ้อนเกินไป ทั้งๆที่เขียนได้เรียบง่ายและประหยัดโค้ดมากกว่านี้ หรือเขียนโค้ดซ้ำกันหลายที่บ้างทั้งๆที่ทำหน้าที่เหมือนกัน ใช้เหมือนกัน แต่ต้องไปเสียเวลาประมวลผลหลายรอบ ทำให้ตัวเว็บเรามีขนาดที่ใหญ่เกินความจำเป็น ถ้าเลยเถิดไปไม่ไกลก็กลับมาปรับปรุง แก้ไขได้ง่ายอยู่ แต่หากทำมานานจนขนาดงานเราใหญ่ และมีโครงสร้างที่ซับซ้อนมากแล้ว ก็รอรับกรรมกันยาวๆได้เลยครับ

• ปัญหาจากการ ใช้เครื่องมือมากเกินไป และอาจใช้งานไม่คุ้มค่า

ในปัจจุบันนั้นมีเครื่องมืออำนวยความสะดวกในการสร้างเว็บไซต์มากมาย และน่าใช้งานเต็มไปหมด ซึ่งในบางครั้งเรานำมาใช้มากเกินไป(เกินความจำเป็น) และในบางครั้งตัวเครื่องมือนั้นมีขนาดใหญ่มากจากการที่มีลูกเล่นให้เราเยอะ แต่เราดันใช้จริงๆเพียงอย่างสองอย่างเท่านั้นเอง

• ปัญหาจากการละเลยการสร้างมาตรฐานที่ดีสำหรับการพัฒนาเว็บ

มันทำงานได้แล้วอย่าไปแตะเดี๋ยวมันพัง!!

หลายๆคนอาจติดการพัฒนาเว็บแบบ ให้มันพอทำงานได้ก็จบ แต่เมื่อคุณต้องเจอกับรูปแบบงานที่หลากหลาย และซับซ้อนขึ้น การไม่มีมาตรฐานที่ดี หรือรูปแบบการจัดการที่เหมาะสมในการพัฒนานั้นจะส่งผลเสียมาอย่างมากมายแน่นอน

*** ยังมีปัญหาอื่นๆเพิ่มเติมอีกยิบย่อยตามสถานการณ์ที่คุณอาจเจอะเจอได้อีก***

รู้แล้วว่าเว็บไซต์จะช้าเพราะอะไรได้บ้าง ก็มาดูหนทางเสริมความเร็วต่อกันครับ

หนทางการเพิ่มพลังความเร็วให้กับเว็บไซต์

https://steemit.com/flash/@pavaya66/what-is-the-maximum-speed-of-the-superhero-the-flash

1. การลดขนาดไฟล์

• Minification

ทำการลดขนาดไฟล์ต่างๆได้ด้วย Minify tools รวมไปถึงการใช้ปลั๊กอิน Minifier ที่จะช่วย — กำจัดสิ่งที่ไม่มีก็ไม่ส่งผลต่อการทำงานของโค้ด — ไม่ว่าจะเป็น อักขระขึ้นบรรทัดใหม่, ช่องว่าง, ตัวแบ่งบล็อกโค้ด(“{}”), คอมเมนต์ ซึ่งจะทำให้ไฟล์เราเบาขึ้นในระดับหนึ่ง

• Compression

ทำการบีบอัดไฟล์ให้เล็กลง อย่างเช่นไฟล์ก้อนข้อมูล JSON ที่เรานำมาเป็นฐานข้อมูลเพื่อเรียกใช้ในส่วนต่างๆ เช่น การค้นหา, การแสดงผล โดยการใช้เครื่องมือ compressor มาช่วย ซึ่ง gzip ก็เป็นตัวหนึ่งที่นิยมกันมาก

***ควรระวังการใช้ไฟล์ที่บีบอัดแล้วอาจส่งผลต่อการใช้งาน เพราะโครงสร้างไฟล์ต่างไปจากเดิมซึ่งเราอาจต้องปรับโค้ดให้สามารถอ่านไฟล์ในรูปแบบนั้นๆได้ด้วย***

การ compress ไม่เหมือนกับ การ minify นะครับ เพราะการ compress นั้นจะเป็นการทำไฟล์ให้มีขนาดเล็กลงโดยการปรับเปลี่ยนโครงสร้าง รูปแบบของไฟล์ใหม่ด้วยวิธีการต่างๆ ซึ่งสิ่งที่ทำการ compress ไปแล้วจะดูต่างจากเดิม แต่การ minify นั้นจะไม่ไปปรับเปลี่ยนเนื้อหา หรือโครงสร้างหลักของไฟล์ เพียงแต่ลบอักขระที่ไม่จำเป็น หรือไม่ส่งผลกระทบต่อการประมวลผลออกเท่านั้น

2. Image Optimization (การปรับปรุงรูปภาพ)

คือการจัดการการใช้งานรูปภาพให้มีประสิทธิภาพมากที่สุด เช่นการบีบอัดรูปภาพให้มีขนาดเล็กลงโดยไม่เสียความละเอียดของภาพไป ทำให้ภาพมีขนาดเล็กลงแต่คุณภาพการแสดงผลจะคงเดิม

สรุปวิธีการจัดการกับรูปภาพที่จะนำมาใช้งานแบบสั้นๆ เรียบง่ายดังนี้

• ใช้เครื่องมือบีบอัดรูปก่อนนำมาใช้งาน เช่น https://compressor.io/compress
• ใช้แพลตฟอร์มที่ช่วยจัดการรูป และวีดีโอ อย่างเช่น https://cloudinary.com/ ซึ่งตัวนี้มีฟีเจอร์ในการกำหนดค่าต่างๆของรูปภาพที่จะนำมาใช้ในตัวเลย
• ทำ LazyLoad Image (โหลดรูปเมื่อต้องใช้งาน หรือโหลดรูปเมื่อผู้ใช้จะมองเห็นเท่านั้น) โดยจะได้ไม่ต้องโหลดรูปทั้งหมดทีเดียวทั้งหน้า ทั้งๆที่ผู้ใช้ก็ยังไม่ได้ดูเลย ซึ่งเครื่องมือตัวหนึ่งที่น่าใช้งาน คือ https://github.com/verlok/lazyload
• ถ้าเบื่อการบีบอัดรูปก็สามารถใช้ไฟล์รูปนามสกุล WEBP ซึ่งขนาดพื้นที่เบากว่า JPG, PNG ได้
• ภาพเคลื่อนไหวอาจจะใช้เป็นไฟล์ MP4 แทนไฟล์ GIF เพราะมันเบากว่า และไฟล์ MP4 ใช้เวลาในการประมวลผลน้อยกว่าไฟล์ GIF

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video

การที่ไฟล์ GIF มีขนาดใหญ่กว่าไฟล์ MP4 นั้นก็เพราะว่าไฟล์ GIF เก็บข้อมูลแบบสมบูรณ์(Lossless) ทุกๆเฟรมบน GIF จะถูกเก็บไว้เป็นรูปของแต่ละเฟรม หรือก็คือในหนึ่งไฟล์ GIF จะประกอบไปด้วยหลายๆรูปภาพที่แตกต่างกันรวมอยู่เป็นลำดับ แล้วแสดงต่อเนื่องอย่างรวดเร็วเพื่อให้เกิดการเคลื่อนไหว

ส่วนไฟล์ MP4 จะเก็บข้อมูลแบบไม่สมบูรณ์(Lossy) ซึ่งจะมีข้อมูลบางส่วนหายไปบ้างเนื่องจากมันถูกปรับปรุงจาก Codec ที่เป็นตัวกลาง หรือซอฟต์แวร์ที่ทำหน้าที่จัดการการอ่านไฟล์วีดีโอ โดยจะทำให้การแสดงการเคลื่อนไหวในวีดิโอดีที่สุด โดยที่ไฟล์มีขนาดเล็กที่สุด

3. Code refactoring (การปรับปรุงโค้ด)

คือการปรับปรุงโครงสร้าง รูปแบบของโค้ดที่มีอยู่แล้วให้อยู่ในมาตรฐานที่เหมาะสม ดูเข้าใจง่ายต่อการพัฒนาต่อ และทำงานได้อย่างมีประสิทธิภาพ โดยที่ไม่ไปเปลี่ยนพฤติกรรม ลักษณะการทำงานเดิมของมัน

ส่วนเป้าหมายนั้นก็เพื่อ ปรับให้เข้ามาตรฐานในงานนั้นๆของทีม(ทั้งทีมสามารถเข้าใจ และร่วมทำงานต่อได้อย่างราบรื่น), ลดการใช้โค้ดซ้ำกัน และลดความซับซ้อนของโค้ด เพื่อที่ในการพัฒนาต่อ จะไม่ส่งผลให้เกิดความสับสน สงสัยในสิ่งที่ได้ทำไว้

เราอาจจะเลือกทำได้หลายวิธีการไม่ว่าจะเป็น

• การเขียนโค๊ดในรูปแบบย่อ (shorthand coding)

ในแทบทุกภาษาโปรแกรมนั้นมีความสามารถในการเขียนในรูปแบบย่อมาด้วยอยู่แล้ว เพียงแต่เราอาจยังเคยชินกับการเขียนแบบเต็มรูปแบบอยู่ โดยเราสามารถศึกษาจากคลังเอกสาร แหล่งข้อมูลออนไลน์ต่างๆได้ เช่น

https://github.com/ramchiranjeevi/JavaScript/blob/master/Javascript%20Shorthand%20conding%20Techniques

ซึ่งประโยชน์ของการเขียนโค้ดรูปแบบย่อก็คือ โค้ดเราจะดูเรียบง่าย สะอาด ประหยัดพื้นที่ไปอีกมาก ตัวอย่างเช่นการเขียน if else condition ในภาษา Javascript

ฝั่งซ้ายคือตัวอย่างการเขียน if else condition แบบเต็ม ส่วนฝั่งขวาจะเป็นแบบย่อ (ซึ่งทำงานเหมือนกัน)

• การกำหนดมาตรฐานการตั้งชื่อ (ชื่อไฟล์, คลาส, ฟังก์ชัน, รูท(route), ตัวแปร)

เราคงไม่อยากเสียเวลามาสับสน หงุดหงิดกับสิ่งเหล่านี้

“homePage, homepage, HomePage, home_page”

“getData, getdata, get_data, GetData”

“.bg-red, .background-red, bg_red, .backgroundRed, .bgRed”

“/, /home, /main”

แล้วมาลงเอยที่

ทำไมไม่ใช้แบบนี้ล่ะ?

น่าจะเขียนแบบนี้น้า

เอ๊ะ!! โค้ดนี้มาจากไหนหว่า ใช้งานอยู่รึเปล่านะ

อ่าว ต้องตั้งชื่อแบบนี้เหรอ

ซึ่งมักเกิดจากการที่คนในทีมสื่อสารกันผิดพลาดบ้าง หลงลืมข้อตกลงในการพัฒนาหรือ หนักสุดเลยคือการไม่มีข้อตกลงสร้างมาตรฐานการพัฒนาก่อนเริ่มงาน จนทำให้เกิดการโค้ดที่ยุ่งเหยิง ซ้ำซ้อน ชวนสับสน น่างง

เราควรสร้างข้อตกลงไว้บ้าง เช่น ชื่อไฟล์ให้ใช้เป็น snake case, ชื่อฟังก์ชัน กับตัวแปรใช้เป็น camel case ทั้งหมด, ชื่อคลาสให้ขึ้นต้นด้วยชื่อเรียก แล้วตามด้วยหน้าที่การทำงานของมัน(HomePageController, UserModel) เป็นต้น

4. Leverage Browser Caching (การใช้ประโยชน์จากการเก็บข้อมูลในเบราว์เซอร์)

เป็นวิธีการเก็บข้อมูลของเว็บไซต์ที่เคยใช้งาน หรือเรียกแสดงไว้เพื่อเพิ่มความเร็วของการเรียกชมเว็บไซต์ในครั้งต่อไป โดยข้อมูลจะถูกเก็บในรูปแบบ Cache file ไว้ในส่วนที่เก็บไฟล์ชั่วคราวของเบราว์เซอร์

ทำให้เมื่อผู้ชมทำการเข้าเว็บในครั้งต่อมา ก็จะสามารถดึงข้อมูลจาก Cache ที่เก็บไว้ได้เลยไม่ต้องไปดึงข้อมูลจากเซิฟเวอร์ทำให้หน้าเว็บสามารถโหลดได้เร็วขึ้น

***ควรใช้วิธีนี้กับข้อมูล หรือไฟล์ที่ไม่มีการเปลี่ยนแปลงบ่อย และควรกำหนดช่วงเวลาในการ cache ให้เหมาะสมกับการใช้งานข้อมูลนั้นๆ***

5. ใช้งาน Content distribution network (CDN)

Content Delivery Network (CDN) นั้นคือระบบเครือข่ายเครื่องเชิฟเวอร์ขนาดใหญ่ ที่เชื่อมต่อกันผ่านอินเตอร์เน็ต และกระจายอยู่ตามที่ต่างๆทั่วโลก เพื่อทำหน้าที่ส่งข้อมูลให้ไปถึงผู้รับปลายทางให้เร็วที่สุด ถ้ามีการร้องขอข้อมูลมา รวมทั้งช่วยจัดการการเข้าถึงข้อมูลต่างๆอย่างมีประสิทธิภาพด้วย

https://www.digitalocean.com/community/tutorials/using-a-cdn-to-speed-up-static-content-delivery

โดยเราสามารถเรียกใช้งาน static file ต่างๆ รวมไปถึงเฟรมเวิร์ค และไลบรารี่ผ่าน CDN ที่ใกล้ที่สุดได้ ซึ่งส่วนตัวแนะนำเจ้านี้เลย CloudFlare

ความเร็วอยู่ระดับไหน

PageSpeed Insights

เช็คกันได้เลยครับกับหนึ่งในเว็บไซต์ที่นิยมกันมากสำหรับการวัดความเร็วเว็บไซต์ ซึ่งเป็นของทาง Google ที่จะวิเคราะห์เว็บไซต์ที่เราใส่ URL เข้าไปแล้วจะให้รายงานด้านประสิทธิภาพทั้งในรูปแบบการเข้าเว็บไซต์ผ่านในคอมพิวเตอร์ และมือถือ

อ้างอิง:

• https://moz.com/learn/seo/page-speed
• https://codeburst.io/how-to-minify-css-js-and-html-ddd9dbea25c6
• https://developers.google.com/speed/docs/insights/v5/about?utm_campaign=PSI&utm_medium=incoming-link&utm_source=PSI&hl=en-US
• https://www.collectiveray.com/wp/tips/leverage-browser-caching-wordpress
• http://www.somkiat.cc/refactoring-vs-rewrite
• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video
• https://www.digitalocean.com/community/tutorials/using-a-cdn-to-speed-up-static-content-delivery