Hiệu suất trang web có thể có tác động lớn đến trải nghiệm toàn bộ người dùng. Nếu gần đây bạn đang xem xét việc cải thiện hiệu suất cho trang web của mình, thì có thể bạn đã nghe đến công cụ PageSpeed Insights – một công cụ phân tích các trang và đưa ra lời khuyên về cách làm cho trang nhanh hơn dựa trên các phương pháp hay nhất về hiệu suất web dành cho 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 mức độ giảm thiểu tập lệnh, hình ảnh được tối ưu hóa, nội dung được nén, mục tiêu nhấn có kích thước phù hợp và tránh chuyển hướng trang đích.
Với 40% số người có khả năng bỏ qua những 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 quan trọng trong quy trình phát triển của chúng tôi.
Các chỉ số về hiệu suất trong quy trình xây dựng
Mặc dù truy cập PageSpeed Insights theo cách thủ công để tìm hiểu xem điểm số của bạn như thế nào, nhưng một số nhà phát triển đã hỏi xem liệu họ có thể nhận được điểm hiệu suất tương tự cho quy trình xây dựng của họ hay không.
Câu trả lời là: chắc chắn.
Giới thiệu về PSI cho Nút
Hôm nay, chúng tôi xin hân hạnh giới thiệu PSI dành 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. Mô-đun này 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 bản xem trước loại báo cáo mà tính năng này cho phép:
Các kết quả trên giúp bạn biết được loại điểm cần cải thiện nào. Ví dụ: 5.92 để định kích thước nội dung theo khung nhìn có nghĩa là vẫn có thể thực hiện "một số" công việc, còn 24 để giảm thiểu các tài nguyên chặn hiển thị có thể cho thấy bạn cần trì hoãn việc tải JS bằng thuộc tính async.
Gỡ bỏ rào cản khi truy cập vào PageSpeed Insights
Nếu trước đây bạn đã thử sử dụng API PageSpeed Insights hoặc cố gắng sử dụng bất kỳ công cụ nào mà chúng tôi xây dựng dựa trên đó, có thể bạn phải đăng ký khoá API chuyên dụng. Chúng tôi biết rằng mặc dù thao tác này chỉ mất vài phút nhưng bạn có thể không nhận được Thông tin chi tiết như một phần của quy trình làm việc thông thường nữa.
Chúng tôi vui mừng thông báo cho bạn rằng dịch vụ PageSpeed Insights hỗ trợ tạo yêu cầu mà không cần khoá API cho tối đa 1 yêu cầu mỗi 5 giây (rất nhiều cho bất kỳ ai). Để 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, có thể bạn sẽ muốn đăng ký một khóa.
Mô-đun PSI hỗ trợ cả tuỳ chọn nokey để thiết lập trong vòng chưa đầy vài phút và tuỳ chọn key trong thời gian lâu hơn một chút. Có tài liệu chi tiết về cách đăng ký khoá API.
Bắt đầu
Bạn có hai lựa chọn để tích hợp PSI vào quy trình công việc. Bạn có thể tích hợp API này vào quy trình xây dựng hoặc chạy dưới dạng công cụ được cài đặt chung trên hệ thống của mình.
Quy trình xây dựng
Việc sử dụng PSI trong quy trình xây dựng Grunt hoặc Gulp của bạn khá đơn giản. Nếu đang thực hiện dự án Gulp, bạn có thể cài đặt và sử dụng trực tiếp PSI.
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ác vụ đó trong gulpfile của bạn 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ụ này bằng:
gulp psi
Và nếu đang sử dụng Grunt, bạn có thể dùng grunt-pagespeed của James Cryer, hiện sử dụng PSI để cung cấp dữ liệu báo cáo.
Cài đặt
npm install grunt-pagespeed --save-dev
Sau đó, tải nhiệm vụ trong Gruntfile của bạn:
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ụ này bằng:
grunt pagespeed
Cài đặt dưới dạng công cụ chung
Bạn cũng có thể cài đặt PSI dưới dạng một công cụ được cung cấp 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ụ:
$ npm install -g psi
Và qua cửa sổ dòng lệnh bất kỳ, hãy yêu cầu báo cáo Thông tin chi tiết về tốc độ trang 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 với những người dùng có khoá API đã đăng ký:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Xin cảm ơn!
Hãy tiến hành và biến hiệu suất thành một phần trong văn hoá của bạn
Chúng tôi cần bắt đầu suy nghĩ nhiều hơn về tác động của các 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 của bạn 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.