การวัดประสิทธิภาพเว็บโดยอัตโนมัติ

แอดดี ออสมานี

Twitter GitHub

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

คะแนนของ PageSpeed ขึ้นอยู่กับปัจจัยหลายอย่าง รวมถึงประสิทธิภาพในการย่อสคริปต์ของคุณ การเพิ่มประสิทธิภาพรูปภาพ การซิปเนื้อหาแบบ gzip การกำหนดขนาดเป้าหมายอย่างเหมาะสม และเพื่อหลีกเลี่ยงการเปลี่ยนเส้นทางของหน้า Landing Page

ผู้ใช้ 40% อาจออกจากหน้าเว็บที่ใช้เวลาโหลดนานกว่า 3 วินาที การคำนึงถึงความเร็วในการโหลดหน้าเว็บบนอุปกรณ์ของผู้ใช้จึงกลายเป็นส่วนสำคัญของเวิร์กโฟลว์การพัฒนาของเราเพิ่มขึ้นเรื่อยๆ

เมตริกประสิทธิภาพในกระบวนการบิลด์ของคุณ

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

คำตอบคือได้แน่นอน

ขอแนะนำ PSI สำหรับโหนด

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

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

ลดอุปสรรคในการเข้าสู่ PageSpeed Insights

หากเคยลองใช้ PageSpeed Insights API มาก่อนหรือเคยลองใช้เครื่องมือใดๆ ที่เราพัฒนาต่อยอด คุณอาจต้องลงทะเบียนคีย์ API โดยเฉพาะ เราทราบดีว่าแม้การใช้เวลาเพียง 2-3 นาทีจะเป็นการปิดการรับข้อมูลเชิงลึกซึ่งเป็นส่วนหนึ่งของเวิร์กโฟลว์ปกติได้

เรายินดีที่จะแจ้งให้คุณทราบว่าบริการ PageSpeed Insights รองรับการสร้างคำขอโดยไม่ต้องมีคีย์ API สำหรับคำขอสูงสุด 1 รายการทุก 5 วินาที (เหมาะสำหรับทุกคน) สำหรับการใช้งานปกติหรือเวอร์ชันที่ใช้งานจริงที่จริงจังมากขึ้น คุณอาจต้องลงทะเบียนสำหรับคีย์

โมดูล PSI รองรับทั้งตัวเลือก nokey สำหรับการตั้งค่าในเวลาไม่ถึง 2-3 นาทีและตัวเลือก key ที่นานขึ้นอีกเล็กน้อย จะมีการระบุรายละเอียดวิธีลงทะเบียนสำหรับคีย์ API ไว้

เริ่มต้นใช้งาน

คุณมี 2 ตัวเลือกในการผสานรวม PSI เข้ากับเวิร์กโฟลว์ คุณสามารถผสานรวมในกระบวนการสร้าง หรือเรียกใช้เป็นเครื่องมือที่ติดตั้งทั่วโลกในระบบของคุณ

กระบวนการบิลด์

การใช้ PSI ในกระบวนการสร้าง Grunt หรือ Gulp นั้นค่อนข้างตรงไปตรงมา หากทำงานในโปรเจ็กต์ Gulp คุณสามารถติดตั้งและใช้ PSI โดยตรง

ติดตั้ง

ติดตั้ง PSI โดยใช้ npm แล้วส่งผ่าน --save-dev เพื่อบันทึกไปยังไฟล์ package.json ของคุณ

npm install psi --save-dev

จากนั้นระบุงาน Gulp สำหรับไฟล์ Gulpfile ดังนี้ (ซึ่งรวมอยู่ในโปรเจ็กต์ตัวอย่าง Gulp ของเราด้วย)

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

สำหรับวิธีการข้างต้น คุณจะเรียกใช้งานได้โดยใช้สิ่งต่อไปนี้

gulp psi

และถ้าคุณกำลังใช้ Grunt คุณสามารถใช้ grunt-pagespeed ของ James Cryer ได้ ซึ่งตอนนี้ใช้ PSI เพื่อขับเคลื่อนการรายงานแล้ว

ติดตั้ง

npm install grunt-pagespeed --save-dev

จากนั้นโหลดงานใน Gruntfile:

grunt.loadNpmTasks('grunt-pagespeed');

และกำหนดค่าสำหรับใช้งาน ดังนี้

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

จากนั้นคุณจะเรียกใช้งานได้โดยใช้สิ่งต่อไปนี้

grunt pagespeed

การติดตั้งเป็นเครื่องมือส่วนกลาง

นอกจากนี้คุณยังติดตั้ง PSI เป็นเครื่องมือที่ใช้ได้ทั่วโลกในระบบของคุณ เราสามารถใช้ npm เพื่อติดตั้งเครื่องมือได้ ดังนี้

$ npm install -g psi

และส่งคำขอรายงาน PageSpeed Insights สำหรับเว็บไซต์ผ่านทางหน้าต่างเทอร์มินัลใดก็ได้ (โดยใช้ตัวเลือก nokey หรือ key สำหรับ API โดยเฉพาะ ดังนี้)

psi http://www.html5rocks.com --nokey --strategy=mobile

หรือสำหรับผู้ที่มีคีย์ API ที่ลงทะเบียนแล้ว:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

จบเพียงเท่านี้

ออกเดินทางเพื่อให้การแสดงเป็นส่วนหนึ่งของวัฒนธรรมของคุณ

เราต้องเริ่มคิดถึงผลกระทบจากการออกแบบและการติดตั้งใช้งานที่มีต่อประสบการณ์ของผู้ใช้มากขึ้น

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

เราอยากทราบความคิดเห็นของคุณ และหวังว่า PSI จะช่วยพัฒนาวัฒนธรรมด้านประสิทธิภาพในทีมของคุณ