Hiệu suất web có thể tác động rất lớn đến toàn bộ trải nghiệm người dùng. Nếu gần đây bạn đang tìm cách cải thiện hiệu suất của trang web của mình, thì có thể bạn đã nghe nói về PageSpeed Insights – một công cụ phân tích các trang và đưa ra lời khuyên về cách tăng tốc độ trang dựa trên các phương pháp hay nhất để cải thiện hiệu suất web trên thiết bị di động và máy tính.
Điểm số của PageSpeed dựa trên một số yếu tố, bao gồm cả mức độ tối thiểu hoá tập lệnh, tối ưu hoá hình ảnh, nén nội dung, kích thước mục tiêu nhấn phù hợp và tránh chuyển hướng trang đích.
Với 40% người dùng có thể rời bỏ các trang mất hơn 3 giây để tải, việc quan tâm đến tốc độ tải trang trên thiết bị của người dùng ngày càng trở thành một phần thiết yếu trong quy trình phát triển của chúng tôi.
Chỉ số hiệu suất trong quy trình xây dựng
Mặc dù việc truy cập vào PageSpeed Insights theo cách thủ công để tìm hiểu điểm số của bạn là điều bình thường, nhưng một số nhà phát triển đã hỏi liệu có thể đưa điểm số hiệu suất tương tự vào quy trình xây dựng của họ hay không.
Câu trả lời là: hoàn toàn có thể.
Giới thiệu PSI cho Node
Hôm nay, chúng tôi rất vui được giới thiệu PSI cho Node – một mô-đun mới hoạt động hiệu quả với Gulp, Grunt và các hệ thống xây dựng khác, đồng thời có thể kết nối với dịch vụ PageSpeed Insights và trả về báo cáo chi tiết về hiệu suất web của bạn. Hãy xem trước loại báo cáo mà tính năng này hỗ trợ:
Kết quả ở trên sẽ giúp bạn nắm được những điểm cần cải thiện. Ví dụ: 5, 92 để định cỡ nội dung cho khung nhìn có nghĩa là bạn vẫn có thể thực hiện "một số" công việc trong khi 24 để giảm thiểu tài nguyên chặn kết xuất có thể cho thấy bạn cần trì hoãn việc tải JS bằng thuộc tính async.
Giảm rào cản để sử dụng PageSpeed Insights
Nếu từng thử sử dụng API PageSpeed Insights hoặc bất kỳ công cụ nào mà chúng tôi xây dựng dựa trên API này, thì có thể bạn đã phải đăng ký một khoá API chuyên dụng. Chúng tôi biết rằng mặc dù chỉ mất vài phút, nhưng việc này có thể khiến bạn không thể xem Thông tin chi tiết trong quy trình làm việc thông thường.
Chúng tôi rất vui được thông báo rằng dịch vụ PageSpeed Insights hỗ trợ việc gửi yêu cầu mà không cần khoá API với tối đa 1 yêu cầu mỗi 5 giây (đủ cho mọi người). Để sử dụng thường xuyên hơn hoặc các bản dựng sản xuất nghiêm túc, bạn nên đăng ký một khoá.
Mô-đun PSI hỗ trợ cả tuỳ chọn nokey để thiết lập trong chưa đầy vài phút và tuỳ chọn key để thiết lập lâu hơn một chút. Chúng tôi đã ghi lại thông tin chi tiết về cách đăng ký khoá API.
Bắt đầu
Bạn có hai cách để tích hợp PSI vào quy trình làm việc của mình. Bạn có thể tích hợp công cụ này vào quy trình xây dựng hoặc chạy công cụ này dưới dạng một công cụ được cài đặt trên toàn hệ thống.
Quy trình xây dựng
Việc sử dụng PSI trong quy trình tạo bản dựng Grunt hoặc Gulp khá đơn giản. Nếu đang làm việc trên một dự án Gulp, bạn có thể cài đặt và sử dụng PSI trực tiếp.
Cài đặt
Cài đặt PSI bằng npm và truyền --save-dev để lưu vào tệp package.json.
npm install psi --save-dev
Sau đó, hãy xác định một tác vụ Gulp cho tệp gulpfile như sau (cũng được đề cập trong dự án mẫu Gulp của chúng tôi):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Đối với nội dung trên, bạn có thể chạy tác vụ bằng cách sử dụng:
gulp psi
Nếu đang sử dụng Grunt, bạn có thể sử dụng grunt-pagespeed của James Cryer. Hiện tại, công cụ này sử dụng PSI để hỗ trợ báo cáo.
Cài đặt
npm install grunt-pagespeed --save-dev
Sau đó, hãy tải tác vụ trong Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
và định cấu hình để sử dụng:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Sau đó, bạn có thể chạy tác vụ bằng cách sử dụng:
grunt pagespeed
Cài đặt dưới dạng công cụ toàn cục
Bạn cũng có thể cài đặt PSI dưới dạng một công cụ có sẵn trên toàn cầu trên hệ thống của mình. Một lần nữa, chúng ta có thể sử dụng npm để cài đặt công cụ này:
$ npm install -g psi
Và thông qua bất kỳ cửa sổ dòng lệnh nào, hãy yêu cầu báo cáo PageSpeed Insights cho một trang web (bằng tuỳ chọn nokey hoặc key dành riêng cho API như sau):
psi http://www.html5rocks.com --nokey --strategy=mobile
hoặc đối với những người có khoá API đã đăng ký:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Vậy là xong!
Hãy tiếp tục và biến hiệu suất trở thành một phần văn hoá của bạn
Chúng ta cần bắt đầu suy nghĩ nhiều hơn về tác động của thiết kế và cách triển khai đối với trải nghiệm người dùng.
Các giải pháp như PSI có thể theo dõi hiệu suất web trên máy tính và thiết bị di động, đồng thời hữu ích khi được sử dụng trong quy trình làm việc thông thường sau khi triển khai.
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn và hy vọng PSI sẽ giúp cải thiện văn hoá hiệu suất trong nhóm của bạn.