tools - วิเคราะห์ สาเหตุที่ทำเว็บของคุณช้าด้วย PageSpeed Insights (by Google)

|


สวัสดีครับ โฮะๆๆๆ ห่างหายไปนาน นี่น่าจะเป็นบทความแรกตั้งแต่ย้ายบ้าน(จดโดเมนแล้วแว้วๆ) ฮะๆ

วันนี้ ไม่ได้มีเทคนิคอะไรเป็นพิเศษเลยครับ แต่อยากจะแนะนำเครื่องมือดีๆจาก google ซึ่งจะช่วยวิเคราะห์เว็บของเราว่า ควรจะปรับปรุงอะไรตรงไหนเพื่อให้ ประสิทธิภาพการทำงานดีขึ้นครับ ^^ โดยเราจะใช้ PageSpeed Insights ซึ่งสามารถหาโหลดได้จากทาง extension ใน chrome นะครับ

page insight extension

ตามรูปเลยนะครับเพื่อใครหาไม่เจอ 🙂 จากนั้นเมื่อเราติดตั้งเสร็จจะพบสัญลักษณ์ที่มุมขวาบน ก็เป็นอันว่าติดตั้งเสร็จเรียบร้อยครับ สามารถกดเพื่อดูรายละเอียดได้นะครับ
Screen Shot 2556-12-21 at 3.47.16 AM

จากนั้นให้เราเข้าเว็บไซต์ของเรากันเลยเมื่อเข้ามาแล้วให้คลิกขวา เลือกที่ inspect element ตามรูปเลยครับ
Screen Shot 2556-12-21 at 3.49.48 AM

จากนั้นจะมีหน้าพวกโค้ด html ขึ้นมาไม่ต้องสนใจครับกดที่ Pagespeed ด้านบนแล้วเลือก start analyzing เพื่อทำการวิเคราะห์หน้าเว็บไซต์ของเรา และ โหลดสักครู่ครับ
Screen Shot 2556-12-21 at 3.50.00 AM

Screen Shot 2556-12-21 at 3.52.43 AM

จากนั้นเมื่อมันโหลดเสร็จเรียบร้อยก็จะได้หน้าตาแบบนี้ครับด้านซ้ายมือก็คือรายละเอียดหัวข้อต่างๆขึ้นมาบอกว่าเราควรแก้ไขอะไรบ้างและจะแบ่งเป็นข้อย่อยๆไป และมีอะไรที่เราแก้ไขเสร็จไปแล้ว ยกตัวอย่างเช่น
Screen Shot 2556-12-21 at 3.37.54 AM

อาจจะแนะนำให้บีบอัดไฟล์แล้วก็จะขึ้นรายละเอียดไฟล์ขึ้นมาว่าไฟล์ไหนบ้าง

Screen Shot 2556-12-21 at 3.38.03 AM

หรือจจะเป็นการทำ minify เพื่อลดขนาดของไฟล์ ทำให้เราโหลดได้เร็วขึ้น

หรือถ้าเรามาดูว่าเราทำอะไรเสร็จไปแล้วก็อาจจะมีบอกว่าเราวางโค้ดเรียก css ได้ถูกที่แล้ว อะไรแบบนี้ครับ
Screen Shot 2556-12-21 at 3.59.13 AM

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

สุดท้ายในนี้ขอทิ้งท้ายหน่อยครับ ฮะๆ เนื้อหาบทความ วิธีการต่างๆ สามารถอ่านเพิ่มเติมได้ครับ ถ้ารีบ ฮะๆ
https://developers.google.com/speed/articles/optimizing-javascript ตามลิ้งนี้แนะนำวิธีการเขียน javascript ให้ได้ประสิทธิภาพสูงสุดครับ มีอย่างอื่นด้วย ทางผมเดียวจะนำมา เฉพาะบางส่วนที่ผมใช้บ่อยๆมาลงฮะๆ หวังว่าบทความนี้จะมีประโยชน์ต่อทุกๆคนนะครับ ^^ ขอบคุณที่ติดตามครับ

Share Button

Comments

comments