Unlighthouse để report điểm PageSpeed

mở đầu

Trong quá tình tìm kiếm thông tin liên quan đến Vite, mình tìm thấy blog của bác Harlan là ~~core-meme~~ core-member của Vue. Như tất cả các thành viên khác trong team Vue, bác này đóng góp cho kha khá project open-sourced. Một trong số đó là Unlighthouse. Mình khá quan tâm đến project này, vì mình vừa rãnh rồi ngồi tối ưu điểm PageSpeed cho cái blog bạn đang đọc 🤭. Vậy, cùng mình lướt nhanh qua project này nhé.

đây là cái gì

project này dùng để đo điểm Google PageSpeed của một trang bất kì.
mỗi lần run npx unlighthouse-ci --site <your-site> [1], project sẽ trả về điểm PageSpeed dưới dạng json, csv hoặc một trang web tĩnh.

tại sao, khi nào dùng

nghe có vẻ đơn giản nhỉ, vậy tại sao không dùng tay cho nhanh? trong hầu hết các trường hợp thì đúng là nên dùng tay cho nhanh. project này phục vụ những dự án chú trọng đến điểm PageSpeed, cần đo đếm điểm liên tục. ví dụ như trang landing page hay trang e-commerce như team cũ của mình ở ShopBase làm.
một use-case cụ thể dùng trong các dự án là sử dụng project này như một CI step khi build / release sản phẩm. khi đó, project sẽ trả về kết quả. developer có thể config để xem kết quả dưới các định dạng đã nêu ở trên hoặc bắn event về Slack hoặc Telegram.

project hoạt động như thế nào

khá đơn giản. khi chạy [1], project sẽ dùng puppeteer để chạy trang chấm điểm PageSpeed. sau đó crawl điểm về. từ đó, modify kết quả rồi trả về định dạng người dùng mong muốn.
đối với trường hợp trả về một trang web tĩnh show kết quả. tác giả đã viết một Vue app để đọc kết quả từ file js và hiển thị nó ra.

biết rồi thì làm gì

đọc tới đây, nếu bạn có hứng thú thì tiếp tục nhảy vào trang docs để tìm hiểu kĩ hơn. bài viết này đơn thuần giới thiệu về project, không phải copy lại docs của nó 🤣.
còn mình, thì mình sẽ thử project bằng cách integrate nó vào chính trang blog này. bắt đầu thôi!
đầu tiên, cài đặt nó đã.

npm i unlighthouse -D

thiết lập cài đặt.

export default {
	routerPrefix: "/unlighthouse",
	scanner: { exclude: ["/p/*"] },
	outputPath: "dist/unlighthouse/",
	ci: { buildStatic: true },
};

trông hơi loằng ngoằng đúng không 🫠. giải thích qua nhé.
- scanner: { exclude: ['/p/*'] }. nếu số lượng bài viết nhỏ thì không sao, nhưng nếu ngược lại thì … oẳng. do đó, mình không đo cho nó nhanh.
- outputPath: 'dist/unlighthouse/' và routerPrefix: '/unlighthouse'. do mình muốn build thẳng kết quả vào route /unlightouse.
- ci: { buildStatic: true } thì quá rõ rồi, chỗ này bảo project build ra kết quả là một trang tĩnh.
thiết lập npm command

{
	"script": {
		"lighthouse": "npx unlighthouse-ci --site duyanh.dev"
	}
}

chạy thử, và toang… lỗi rồi 😭.
sau một hồi mò mẫm thì có vẻ như thư viện của tác giả bị lỗi, chưa hỗ trợ hoàn toàn cho custom routerPrefix. trong trường hợp này, mình đã thiết lập để tải ảnh từ route /unlighthouse nhưng một vài chỗ trong thư viện vẫn đang tải ảnh từ /. thôi thì ta lại phải workaround thôi, cũng đơn giản. hãy xem đây 🤣.

{
	"script": {
		"lighthouse": "npx unlighthouse-ci --site duyanh.dev && cp -R dist/unlighthouse/reports dist"
	}
}

đọc code các bạn biết workaround là gì rồi phải không 🤣. giờ thì xem kết quả nhé, trông khá là nguy hiểm đấy.

tổng kết

thư viện Unlighthouse khá hay cho dự án nào cần theo dõi chặt chẽ điểm Google PageSpeed. nếu rảnh thì cũng đáng thử.

Góc của Anh