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

Addy Osmani

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

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

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

เมตริกประสิทธิภาพในกระบวนการสร้าง

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

คำตอบคือใช่

ขอแนะนํา PSI สําหรับ Node

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

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

ลดอุปสรรคในการเริ่มต้นใช้งาน PageSpeed Insights

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

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

โมดูล PSI รองรับทั้งตัวเลือก nokey สำหรับการตั้งค่าในไม่กี่นาที และตัวเลือก 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 จะช่วยปรับปรุงวัฒนธรรมด้านประสิทธิภาพในทีมของคุณ