เมื่อผมอยากจะ Optimize เว็บแบบที่ Addy Osmani บอก EP. 2/2

ใครยังไม่อ่านตอนแรกไปอ่านตอนแรก ที่นี่ ก่อนนะครับ

มาต่อกันกับตอนที่สองของ “เมื่อผมอยากจะ Optimize เว็บแบบที่ Addy Osmani บอก” หลังจากตอนที่แล้วจบไปแล้วกับ “1 Slide” มาดูกันต่อครับว่า Addy เนะนำอะไรเราอีก

• ผมข้ามไป Slide ที่ 34 เลยนะครับเพราะ Slide ก่อนหน้านี้เป็นเรื่อง แนวคิดเป็นหลักครับ

• หลักๆบนโลกนี้ Mobile internet ยังเป็น Slow 3G อยู่ เพราะฉะนั้นแล้ว เพื่อให้เว็บโหลดเสร็จภาพใน 3 วินาที เราควรทำให้ Bundle ไฟล์ใหญ่ไม่เกิน 170KB และนั่นคือเป้าหมายของการ Optimize นี้
• Slide นี้มีเรื่องบางอย่างที่ซ้ำกับ Slide แรกอยู่แล้วแต่ว่าจะมีบางส่วนที่ไม่ได้ถูกพูดถึงเอาไว้

• Strip Lodash modules — จริงๆแล้ว Lodash ก็เป็น Lib อีกตัวที่มีขนาดใหญ่มากๆ โดยหากเราต้องการ strip lodash เราต้องใช้ plugin ที่ชื่อว่า lodash-webpack-plugin หรือ babel-plugin-lodash เพื่อตัวส่วนที่เราไม่ใช้ออก

new LodashModuleReplacementPlugin({
    ‘collections’: true,
    ‘paths’: true,
}),

• Moment.js — นี่ก็เป็นอีกตัวครับที่กินทรัพยากรมากๆ เพราะว่า moment.js จะโหลด locale ของทุกประเทศมาด้วยซ้ำมีขนาดค่อนข้างใหญ่ ซึ่งต้องใช้ Build in plugin ตัวนึงใน Webpack ช่วย ก็คือ ContextReplacementPlugin โดยเราต้องกำหนดให้ plugin นี้ stip เอา locale ที่เราใช้เท่านั้นเพื่อเป็นการลด site ของ moment ลง

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|th/)

• คราวนี้มาพูดเรื่อง Image ต่อครับ อันนี้ก็สำคัญ จริงๆ เรื่องที่ Addy แนะนำ อยู่ในเว็บ https://images.guide หมดแล้วครับ ลองเข้าไปอ่านได้ หลักๆ ก็จะเป็นเรื่อง เลือกใช้ format ไฟล์ให้ถูก compress ก่อนทุกครั้ง ปรับขนาดภาพให้ตรงกับที่ใช้
• เราสามารถใช้ Plugin อย่าง https://github.com/Klathmon/imagemin-webpack-plugin มาช่วย compress file ได้อีกทางนึง สำหรับคนที่ไม่อยาก compress ทีละรูป
• ส่วนเรื่องขนาดรูปกับ format รูป เราสามารถใช้ srcset ช่วยตรงนี้ได้

<picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>

• อันนี้เป็น เทคนิคที่ดีครับสำหรับคนที่ใช้ webfont อย่างที่บอกไปครั้งที่แล้วครับว่า เราควรเลือก format ของ font ที่จะเอามาให้ พยายามอย่าเรียกมาใช้หมดทุก format สำหรับ Project ของผมตอนนี้ใช้ Google Fonts อยู่ ซึ่งไม่ต้องห่วงครับ เค้า optimize มาให้เราแล้ว

• อันนี้เป็นอีกอันที่ผมไม่ได้ใช้ครับ แต่ถ้าใครต้อง request อะไรที่เป็น static มากๆอย่างพวก json file Addy แนะนำให้เรา Preload ไว้ก่อนเลยครับ ซึ่ง Preload ไม่ได้ใช้ได้แต่ css หรือ js นะครับ แต่ใช้ได้หลายอย่างเลย ทั้งวิดิโอ รูป font ไปลองอ่าน spec ดูได้ครับ

• Slide นี้ พูดถึงเรื่องการใส่ NavigationPreload เข้าไปใน Service Worker เพราะว่า ปกติแล้วถ้าเรามี Service worker อยู่ เราจะต้องรอ Service worker Boot ถึงจะเริ่ม Request ได้

• Addy ยังบอกอีกว่า ให้เรา Build สอง version คือ พวกที่เป็น modern browser กับ legacy browser ซึ่งการแยกว่าจะให้ serve bundle อันไหน ก็ต้องใช้ Server Side Render ช่วย แต่หลังจากที่ลองไปแล้วไม่รู้ว่าทำไม แต่ว่า ฝั่ง modern ผมดันไฟล์ใหญ่กว่า Default ของ Vue.js เดิมอีก คาดว่า Addy คง optimize มาแล้ว
• Addy บอกว่าถ้าใครใช้ React กับ Webpack อยู่ ให้ อัพเกรด เป็น React 16 และ Webpack 3 อยู่จะช่วยได้มากๆ
• ถ้าใครใช้ Vue.js อยู่ให้ Upgrade template เป็นตัวใหม่ล่าสุด ก็ช่วยเหมือนกันครับ
• จริงๆแล้ว Slide ชุดนี้ Addy ไม่ได้พูดถึงเรื่อง การวิเคราะห์ Critical Path เลย เพราะว่าส่วนนั้นเนี่ย จำเป็นต้องดูโครงสร้าง ของเว็บแต่ละคน ซึ่งผมจะมาเล่าอีกทีว่าจะลดง่ายๆยังไง
• สุดท้ายแล้วนี่คือ สภาพ Bundle ของผมก่อนทำและหลังทำ

• ด้านซ้านเนี่ย vendor.js เนี่ยใหญ่ไป 1.3MB และ app.js ใหญ่ไป 400KB แต่ด้านขวาที่ทำแล้ว vendor.js เหลือแค่ 780KB และ ไฟล์ app ใหญ่สุด แค่ 100 กว่าๆ KB

• ถ้าดูจาก Network Request แล้ว size เยอะกว่าเดิม เพราะไฟล์เยอะกว่า แต่ข้อดีคือ Cache ของหน้าต่อไปไว้รอแล้วแต่ถ้าดูในเชิง Response time ข้างขวาดีกว่ามากๆ ( อันนี้ไม่ได้เทสบน 3G Speed นะครับ)

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