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