ทษฏีที่มีอยู่แล้วทั้งหลายทั้งปวงผมคงไม่พูดถึงแต่ผมอยากจะแชร์สิ่งที่ผมเข้าใจ กับสิ่งที่ศึกษาและทดลองมา เหตุการณ์มันมีอยู่ว่าได้ผมเองได้รับหน้าที่ปรับปรุงความเร็วของหน้าเว็บ(Page speed) ให้มันไว ๆ และก็ไวขึ้น เคยเห็นแว๊บ ๆ แต่ไม่ได้ใส่ใจอะไรมากกับเรื่องพวกนี้ รู้ว่ามีที่ให้ลองวัดผล (weppaget test) ได้เป็นเกรดออกมาว่าอะไรดีบ้างไม่ดี [ A-F ] as of you know เอาจริง ๆแล้วผมก็รู้เพียงนิดเดียวนั่นแหละ แต่พอเริ่มศึกษามันอย่างจริง ๆ จัง ๆ ใช้เวลาไปประมาณ 1 สัปดาห์ รวมเสา - ทิตย์ ด้วยที่นอนอยู่ห้อง เกิดเรื่องที่อยากรู้มากมาย แน่นอนว่าเวลาที่คุณทำงานย่อมอยากเห็นผลลัพธ์มันโดยเร็ววัน เครื่องมือที่ใช้วัดผล สิ่งที่ให้คำแนะนำคุณในการแก้ไขข้อมูลย่อมมีสิ่งที่สำคัญเป็นอย่างยิ่ง เอาละมาเข้าเรื่องกัน
เครื่องมือที่ใช้ในการทดสอบประสิทธิภาพ
- wep page test ซึ่งทางทีมงาน infra ได้ติดตั้งไว้ใน Local เพื่อความสะดวก ซึ่งเวลาต่อมาผมได้ค้นพบว่ามันให้ผลลัพที่ค่อยข้างเพี้ยนไป แต่ก็ได้ผลลัพธ์ที่ไว ในส่วนตัวผมคิดว่ามันน่าจะเกิดจาก ENV ที่มันเป็นเลยให้ค่าคะแนนที่ดูออกจะมากไปซะหน่อย แต่ก็ดี ที่ให้คนแก้อย่างผมรู้สึกว่ามันไวขึ้น แต่เท่าที่ทดสอบจากข้างนอก คะแนนมันยังคงน้อยมาก จริง ๆ กราฟวัดผล ออกมาเหมือนกันทุกอย่าง นั่นคือข้อดีของมัน แถมยังเก็บเป็นสถิติไว้ดูเองได้ด้วย(เขาว่ามา)
- page speed tool add on chome & firefox
ข้อดี
ถ้าใช้งานกับ Chome ก็จะได้ผลลัพธ์ที่ชัดเจนอ่านง่ายแถมยังเป็นภาษาไทยด้วย บอกจุดที่จะต้องแก้ไขแบ่งเป็นระดับที่ชัดเจนมี (H) สูง (M) กลาง (L) ต่ำ เหมือนเล่น ไฮโล อะไรประมาณนั้น บอกได้ชัดขนาดนี้การแก้ก็เลยง่ายขึ้น มีของแถมมาอีก คือ tool ตัวนี้ฉลาดมาก บีบไฟล์ให้ด้วยคำนวณเสร็ด เรียบร้อยว่าจะต้องลดลงกี่ % สามารถเอาไฟล์ css /js /image ไปใช้งานได้เลยที่บีบให้แล้ว ส่วนรายละเอียดอื่น ๆไปหาลองทำเอาแล้วกันเยอะพอสมควร
ข้อเสีย
เมื่อทำการทดสอบใน ENV Local เอง พบว่ามีรายเรื่องที่มันรายงานมาผิด นั่นก็คือข้อมูลที่ได้มันเชื่อไม่ได้ ว่าอันนี้ยังไม่ได้น่ะ ต้องแก้อันนี้ แต่จริง ๆ พอไปทำการทดสอบกับ ENV ที่อื่นกับได้ผลลัพท์ที่แตกต่างออกไป แต่ผมก็ยังไม่ได้ฟังธงตรงนี้ว่ามันเกิดอะไรขึ้นที่แน่ ๆ เมื่อมันพูดคำเดียวกันแต่ให้ความหมายที่ต่างกัน แสดงว่ามันเพี้ยนไปล่ะ
ถ้าใช้กับ Firefox ค่อนข้างที่จะดูการวัดผลประเมินผลลำบาก เป็นภาษาอังกฤษล้วน ๆแต่มันแบ่งกลุ่มแบบ อ่านยาก ๆ กดถูก กดผิด เหมือน ลูกเมียน้อยได้ใช้กับเขาหน่อย ๆ ซึ่งก็แน่นอนว่ามันไม่ได้ทำมาเพื่อ firefox นั่นเอง แต่ผมเห็นว่า Developer tool ที่ดีที่สุดคือ Firefox
page speed insign by google
ข้อดี คือมันค่อนข้างที่จะไวในการทดสอบประสิทธิภาพบอกให้เลยว่าต้องแก้ไฟล์ไหน อะไรยังไงบ้าง คล้าย ๆกับ add on ตัวบนแต่มีบางอย่างที่ add on ตัวข้างบนไม่มี (ไม่รู้ว่าจะทำแยกกันมาทำไม) แต่ความจริง คือตัวเว็ปเกิดก่อน (tool) มาทีหลังนั่นเอง อีกเรื่องคือมันบอกวิธีทำด้วย แจ่มสัสเลยทีเดียวว่าต้องแก้ไง อ่านกันยาว ๆ
ข้อเสีย ให้ผลลัพธ์ไม่ค่อยละเอียดและไม่ครบนั่นเอง
Yslow
เอาจริง ๆ ก็ไม่ค่อยได้ใช้ตัวนี้เท่าไหร่ แค่สองสามตัวที่ผ่านมาก็ยังจะใช้กันไม่หมด การทำงานก็คล้ายกับเอา web page test มารวมกันกับ pagespeed ของ google แต่ Yslow เป็นของ yahoo หลาย ๆคนก็บอกว่าดี ผมก็เห็นว่าดีเหมือนกันถ้ามันแม่นพอ มันมีคล้าย ๆ กันกับ google แต่เจ้านี้เกิดก่อนแค่นั้นเอง
[แถม] เครื่องมือที่ใช้บีบอัดขั้นเทพ
ผมค้นหาใน google เช่น compress css / js เครื่องมือพวกนี้บีบไฟล์ได้ดีกว่าของ google นิดหน่อย เช่น css จะเปลี่ยนจาก black เป็น #FFFFF ไรทำนองนี้ ลด code ที่มันซ้ำ ๆ กันออกให้ด้วยมันก็เลยแจ่มกว่านิดหน่อย ส่วนมันอยู่ไหนไปหาเอาเองแล้วกัน
มีทฤษฏีอยู่ว่า Javascript มัน blocking หน้าเว็บให้โหลดช้า
หลาย ๆ ท่านก็บอกว่า ให้ย้าย javascript ไปไว้ข้างล่างให้หมด จริง ๆแล้วมันมีทางเป็นไปได้ ที่จะทำแต่ script บางตัวมันต้องอยู่ข้างบน ถ้ามันไม่อยู่ข้างบนแล้วล่ะก็แน่นอนว่ามันอะไรบ้างอย่างทำงานไม่ได้แน่นอน และอีกเรื่องมันไม่ได้มีแค่ JS เท่านั้นที่ Block การโหลดหน้าเว็บ CSS ก็เหมือนกัน การแก้ปัญหาเพื่อไม่ให้มัน Block ก็มีหลาย ๆวิธี แต่ละวิธีก็มีความเสี่ยงที่คุณพร้อมจะรับมันหรือเปล่า เกริ่น ๆ เช่นการทำ async ข้อมูลเพื่อไม่ให้ js มันโหลดพร้อม ๆ กัน ความเสี่ยงคือมันไม่รอบรับทุก browser นั่นเองแหละอีกหลาย ๆวิธี (หาอ่านเอาเองแล้วกัน) การย้ายมันลงมาข้างล่าง จริง ๆ เวลาที่ใช้โหลดมันก็ เท่าเดิม ก็แหงล่ะมัน script ตัวเดิมหนิ ซึ่งเราก็ไม่ได้ไปแตะอะไรมันเลยแค่ย้ายบรรทัด เพียงแต่หน้าเว็บคนใช้จะเห็นไวขึ้นเท่านั้นเอง แต่มันจะดีกว่าที่เราทำให้มันเห็นไวขึ้นและพร้อม ๆ กันในข้อมูลที่มันเล็กลงกว่าเดิม รายละเอียดเรื่องนี้ค่อยข้างจะเยอะ
ถ้าลองไปดูเว็ปใหญ่ ๆ หลาย ๆ เว็บ จะเห็นว่ามี script เยอะแยะมากมาย โหลดตั้งแต่ head body contents จนถึง footer คำถามคือเขาทำกันอย่างไร ? ให้มันโหลดไว ?พร้อม ๆกัน แน่นอนว่าเว็บใหญ่ ๆ มีทีมงานที่คอยดูเรื่องนี้อยู่นั่นคือ คุณภาพการทำงานของเว็บ และแน่นอนอีกเรื่อง การสร้าง First Impression ผู้ใช้เข้าเว็ปครั้งแรก รอโหลดไป 20 วิ เหอะๆ พูดเลย ว่าอยากจะใช้มันรึเปล่า ?ถ้ามันไม่ดีจริง ๆ คือกูรอได้ มึงอยากโหลดมึงโหลดไป และอีกเรื่องการย้าย script มาอยู่ด้านล่าง เขาก็บอกแค่ว่าถ้าเป็นไปได้ให้คุณย้ายมันมาข้างล่างน่ะ อยู่ในระดับ (M) กลาง ๆ ทำได้ก็ทำไม่ได้ ก็ช่างแมร่ง
วิธีแก้การ blocking
js /
การทำ async ข้อมูลไม่ต้องโหลดแบบต่อเนื่องแต่ให้ผลลัพธ์ที่ไม่ค่อยดีเท่าไหร่ แบบมีไว้ประดับอะไรทำนองนั้น
สร้าง Element script ขึ้นมาทีหลังจากหน้าโหลดเสร็ด วิธีนี้ดีเลยทีเดียวแต่เสียหน่อยได้เขียน code เยอะขึ้นไปแต่ถ้า โปรแกรมเมอร์ฉลาดหน่อยคงทำเป็น function กลาง ๆ เรียกใช้ได้ทั้งหน้า แต่จริง ๆ เป็นเรื่องที่เสี่ยงมาก ๆ น่าดู คงทำได้แค่กับ script ที่ไม่ต้อง วอรี่ วอเตอร์อะไรกับมันมากนัก
ใช้ js library ที่สามารถทำให้ js โหลดแบบ parallel กันได้ คงเป็นภาพที่สวยงามเมื่อ js เป็น สิบ ๆ ตัวพร้อมใจกัน โหลดว้าว ๆ เลยทีเดียว มีอยู่หลายตัว ลองให้ใน google เอา เช่น labs js ใช้ง่ายดี
css/
อ่านแบบผ่าน ๆ ตาเห็นเขาบอกว่า ต้องแก้ external css ยุบรวมกัน และก็วิธีการเรียกแบบอย่าไปบังคับให้มัน ตอน include <sceen> อะไรทำนองนี้ ถ้าบังคับให้ พฤติกรรมของบาวเซอร์เองก็จะโหลดให้เสร็ดเพื่อสร้าง โครงมันนั่นแหละ คนที่ใช้จะได้เห็นว่ามันไม่เพี้ยน ๆนะหน้าเว็บแสดงผลเดะแจ่มสัส อะไรทำนองนี้
ปัญหาของ ads
โฆษณาเจ้ากรรม ฉไนนเจ้าจึงเกินเวลาของเว็บเราไปเกือบ 70 % ของชีวิตการโหลด แถมเสือกไม่อยากเก็บไว้ใช้ซ้ำ (แคช cache) อีกหนา ถ้าสังเกตเวลาทำ ads อะไรก็แล้วแต่มันจะมีพารามิเตอร์ติดมาตัวหนึ่งคือ Random number ? ไม่ก็ time() ; ติด iframe ที่เป็น ads ก็ไม่ใช่จะทำให้ดีแต่ยิ่งแก้ยิ่งแย่ อ้างอิงจากผลการทดสอบ ผลลัพทธ์ก็คือ ถ้าเป็นไปได้ ท่านอย่ากะแดะ เสือกเอา iframe มาติดแปะ หน้าเว็บท่านเลย เป็นคำพูดที่ฟังแล้วก็เศร้าน่ะ นี่กรูอยากให้มึงไวขึ้นนะเว้ย ถึง iframe โหลดไม่เสร็ด ไงก็ไม่สนใจอยู่แล้ว แต่หน้าเว็บต้องมาก่อน ... กลับเข้ามาเรื่อง time กับ rand เมื่อกี้ browser ตอบกับมาว่าเพราะมึงนั่นแหละกูเลยจำชื่อเก่ามึงไม่ได้ แมร่งเสือกมาเปลี่ยนทุกครั้งที่กูขอดู สัสเลยแล้วบอกให้กูจำ เออ กูจำแล้วมึงเสือกเปลี่ยนใหม่ ไอ้ห่า !! Fuck cache อะไร ฝั่ง Ads เซิฟเวอร์เองก็ตอบกับมาว่า เห้ยถ้าเกิดว่ากรูเปลี่ยนข้อมูลไปเมิงเสือกจำอันเก่าอยู่มันก็แสดงผลผิดดิ อะไรที่กูเปลี่ยนไปแล้วมึงก็ต้องเปลี่ยนตามเพราะนี้มันเป็นเรื่องของ เงิน เอาละจะอะไรก็ช่าง (ช่างมันเหอะ") อีกเรื่องนะเมิง ads เสือกเป็น script ที่ทำให้ browser อย่างพวกตรูปวดใจ โหลดมึงแต่ละที ต้องรอมึงเข้า คิว กันมาทีละตัว ไม่แคช เข้าคิว อีก บร๊ะ " แจ่มสัสเลยทีเดียว
สรุปเรื่อง Page speed อะไรบ้างที่โปรแกรมเมอร์ควรทำ และทำได้ง่าย
- Stack logic of code ควรจะให้มัน ลัดสั้งไว ทำงานได้เหมือนกัน รวมถึงปลอดภัยด้วย ที่เห็น ๆ อยู่คือกว่าจะได้หน้าหนึ่งมาวิ่งไปวิ่งมาเช็คอะไรบ้างก็ไม่รู้เป็นสิบ ๆ อย่างแค่คน ๆ เดียวเข้ามาแต่ logic เมพมาก
- comment ลบทิ้งเหอะโดยเฉพาะ comment ที่เป็น html มันกลายเป็นข้อมูลที่ไม่ได้ใช้แต่ถูกโหลดมาด้วยแต่นอนว่ามันมีพื้นที่ byte แน่นอน ถ้าคอมเมนต์ก็ <?php /*?> ซะ อีกเรื่องก็คือ ถ้าเห็นว่ามีบรรทัดว่างก็ ลบมันทิ้งไปด้วยก็ดี
- รบกวนช่วย Compress css js sprite ที่พอจะแนะนำทีมอื่นหรือ ถ้าไม่ลำบากกว่าแรงก็แก้ด้วยตัวเอง yourself น่ะ ช่วยได้มาก ๆ เหมือนกัน
- ลบ script ที่ไม่ได้ใช้งานออกไปซะเมื่อมันไม่ได้ใช้แล้ว จริง ๆด้วยความขึ้นเกียจของ คนทำเอง กาลครั้งหนึ่งมันเคยใช้งาน แต่มาบัดนี้มันถูกโหลดมาทำ เกลือ ค้างไว้แต่ไม่ได้ใช้งานอะไรเลย ถามว่าเปลืองไหม ? สั้น ๆ "เปลืองสัส ๆ" บางอันก็หลาย kb เหมือนกัน ถ้า comment หรือ เอาออก คงจะดีขึ้นไม่น้อย
การทำ Page speed แบ่งเป็น สามส่วนคือ อดีต ปัจจุบัน อนาคต
อดีต คือเซิฟเวอร์ ถ้า config ทุกอย่างดีแล้ว แน่นอนว่า คนที่ทำ ชุดโปรแกรมขึ้นมาเพื่อเอามารัน มันย่อมดีแน่นอน มีการแบ่งเป็นสัดส่วนแน่นอนทำหน้าที่ ใคร หน้าทีมัน อย่างชัดเจน เช่น multiple swaping sever auto selection , static server , image/js server, web server , แบ่งอย่างชัดเจนไม่ให้เกิด คอขวด หรืออะไรก็แล้วแต่เท่าที่จะแก้ไขได้
ปัจจุบัน คือการเขียนชุดโปรแกรม ที่เขียนขึ้นมามันย่อมมีผลอย่างมาก ๆ เมื่อท่านทั้งหลาย หยิบจับเอาอะไรมาใส่เข้าไป เรื่องนี้ต้องรวมไปถึงคนที่ทำออกแบบหน้าตาความส่วนงามด้วย คงต้องกลับมาคิดกัน คุยกันให้มากขึ้น
อนาคต คือคนที่ใช้ สภาพคนใช้คงแปรไปตาม อุปกรณ์ ความไวของเน็ต แหละอื่น ๆ เป็นสิ่งที่ควบคุมไม่ได้
"ถ้าเราลดขนาดของไฟล์โดยรวมเราลง แน่นอนว่าการโหลดมันย่อมไวกว่า 100%"
"ถ้าเราจัดวิธีการโหลดของไฟล์เราลง แน่นอนว่ามันย่อมแสดงผลที่ดีกว่า"
"ถ้าเราจัดการวิธีการคิด คำนวณ ประมวลผลให้มันลดขั้นตอนลง แน่นอนมันย่อมน้อยกว่า"
"ถ้าเราจัดการข้อมูลที่ใช้ช้ำได้ แน่นอน โหลดครั้งที่สอง มันน้อยกว่า 100%"
จะแก้อนาคต ต้องกับไปแก้ที่ อดีตและปัจจุบัน
จะข้ามไปแก้ อนาคตเลยไม่ได้ (สำคัญ)
สมัคร ชัยสงวน
12/07/2014
0 ความคิดเห็น:
แสดงความคิดเห็น