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