--- title: "phatdev.net: tốc độ điện thoại từ 95 lên 99 điểm và nội dung mở cho cả người lẫn AI đọc" url: https://phatdev.net/vi/case-studies/phatdev-net-speed-and-ai lang: vi updated: 2026-11-08 alternate: en: https://phatdev.net/en/case-studies/phatdev-net-speed-and-ai markdown: https://phatdev.net/vi/case-studies/phatdev-net-speed-and-ai.md --- # phatdev.net: tốc độ điện thoại từ 95 lên 99 điểm và nội dung mở cho cả người lẫn AI đọc > Website cá nhân của mình cũng là nơi chạy tài liệu và cập nhật plugin. Mình đo, sửa những thứ nằm trước khi trang hiện ra, rồi làm cho cùng nội dung đọc được bằng trình duyệt, bằng Google và bằng AI. - Khách hàng: phatdev.net (dự án của chính mình) - Lĩnh vực: Portfolio, tài liệu và cập nhật plugin - Năm: 2026 - Vai trò: Kế hoạch, kiến trúc và vận hành (code viết cùng Claude Code) - Thời gian: Hai ngày, 18 đến 19/10/2026 - Công nghệ: Next.js, TypeScript, MySQL, Nginx, PM2, Lighthouse, MCP ## Kết quả chính - 99 / 100: PageSpeed điện thoại / máy tính, 18 trên 18 lần đo - 2,8 s → 1,9 s: thời gian hiện phần chính của trang chủ trên điện thoại (LCP) - 0: độ xô lệch bố cục (CLS) ở mọi trang đã đo - 12: công cụ MCP chỉ đọc cho AI agent ## Bối cảnh phatdev.net là nơi khách hàng và nhà tuyển dụng xem mình làm gì. Nó cũng làm thêm hai việc nặng hơn một trang giới thiệu bình thường: chạy bộ tài liệu cho các plugin WordPress của mình, và là máy chủ phát bản cập nhật cho các plugin đó. Trang có hai ngôn ngữ, tiếng Việt và tiếng Anh, và không dùng CMS (hệ quản trị nội dung dựng sẵn như WordPress). Nội dung nằm trong một cơ sở dữ liệu MySQL, mình tự viết cả phần quản trị. Đây là dự án của chính mình, nên không có khách nào bị nêu tên ở đây. Mình chọn kể nó vì nó có đủ số đo trước và sau, và vì mọi quyết định trong đó là quyết định mình tự chịu. ![Trang chủ phatdev.net trên máy tính, giao diện tối](https://phatdev.net/uploads/case/phatdev-net-speed-and-ai/home-desktop-1440.webp) ## Thách thức Ngày 18/10/2026, trang chủ đạt 95 điểm tốc độ trên điện thoại. Khá, nhưng chưa phải mức mình muốn khi đặt trang này làm bộ mặt. Phần chậm nhất là thời gian chờ phần chính của màn hình đầu hiện ra: 2,8 giây (chỉ số này tên là LCP). Có ba việc khác cần giải quyết cùng lúc. Thứ nhất, hai ngôn ngữ phải đúng với Google, tức mỗi trang biết trang bản dịch của nó ở đâu. Thứ hai, ngày càng nhiều người hỏi AI thay vì tự tìm, nên nội dung cần đọc được cả bằng máy mà không phải gỡ ra khỏi giao diện. Thứ ba, trang chỉ có một người vận hành, nên phải tự biết ai vào, lỗi gì xảy ra, mà không thuê thêm công cụ. ## Cách làm ### 1. Đo trước khi sửa Mình chạy Lighthouse (công cụ chấm tốc độ của Google) từ chính máy chủ, giả lập điện thoại tầm trung và mạng chậm, và đo mỗi trang ít nhất ba lần. Một lần đo không nói được gì, vì kết quả dao động theo việc máy đang bận hay rảnh. ### 2. Giảm những thứ nằm trước khi trang hiện ra Công cụ đo tính thời gian hiện trang bằng cách cộng mọi thứ phải tải trước đó. Nên mình đi tìm thứ nặng nhất nằm trước điểm đó: - Ảnh đại diện nặng khoảng 150 KB nhưng chỉ hiển thị nhỏ. Sau khi cắt đúng cỡ chỉ còn 3 đến 7 KB. - Một thư viện hiệu ứng khoảng 37 KB chỉ để làm hiệu ứng hiện dần. Mình thay bằng CSS và một đoạn mã nhỏ. - Bốn ảnh chụp màn hình ở trang giới thiệu plugin SL Migrations là PNG gần 1 MB mỗi ảnh. Đổi sang WebP (định dạng ảnh nhẹ hơn PNG) còn khoảng 90 KB. - HTML trang chủ nặng 19 KB sau nén gzip. Khi mới nối với máy chủ, lượt gửi đầu tiên chỉ chở được khoảng 14,6 KB, phần dư phải chờ thêm một vòng hỏi đáp qua mạng. Mình đổi sang nén brotli (gọn hơn gzip) ở Nginx, phần mềm máy chủ web đứng trước ứng dụng. HTML còn 12,2 KB, gửi gọn trong lượt đầu. Phần giải thích kỹ cho dev nằm ở bài [Từ 95 lên 99 điểm tốc độ mobile: mình đã làm gì với một site Next.js](https://phatdev.net/vi/blog/core-web-vitals-99-case-study). Ở đây mình chỉ giữ lại ý chính: tìm thứ nặng nhất nằm trước điểm LCP, sửa một thứ, đo lại. ### 3. Một nguồn dữ liệu, nhiều cách đọc Mỗi trang nội dung đọc từ cùng một chỗ trong cơ sở dữ liệu, rồi ra bốn dạng: trang HTML cho người và Google, bản Markdown (văn bản thuần) cho máy, mục lục `llms.txt` (danh sách trang dành cho AI), và một cổng MCP để AI hỏi thẳng. Vì cùng nguồn nên không có chuyện bản cho AI cũ hơn bản cho người. ![Sơ đồ một yêu cầu đi qua Nginx, Next.js và MySQL rồi ra bốn dạng: HTML, Markdown, llms.txt và MCP](https://phatdev.net/uploads/case/phatdev-net-speed-and-ai/architecture-vi-1920.webp) Thêm `.md` vào cuối địa chỉ của bất kỳ trang nội dung nào là ra bản Markdown của trang đó. Với trang nhiều chữ như một bài blog, bản này gọn hơn nhiều so với HTML đầy khung và hiệu ứng. ![Bản Markdown của một bài blog, mở bằng trình duyệt](https://phatdev.net/uploads/case/phatdev-net-speed-and-ai/md-view-1440.webp) Cổng MCP (chuẩn để AI dùng công cụ của một trang web) có 12 công cụ, tất cả chỉ đọc và có giới hạn số lần gọi mỗi phút. Một AI agent có thể tìm dự án, đọc một bài, hay lấy thông tin liên hệ mà không cần thêm khoá hay tài khoản. Cách kết nối nằm ở [tài liệu MCP](https://phatdev.net/docs/phatdev-portfolio/mcp). ### 4. Một mình vẫn vận hành được Phần quản trị mình tự viết ghi lại lượt xem ngay ở máy chủ, tách người thật khỏi bot, gom lỗi theo nhóm và gửi cảnh báo về hộp thư riêng. Tài khoản quản trị có sẵn đăng nhập hai lớp. Nhờ vậy một người vẫn nuôi được cả hệ thống mà không phải thuê dịch vụ theo dõi bên ngoài. ## Kết quả Số đo ở đây là số đo trong phòng thí nghiệm, chạy bằng Lighthouse trên máy chủ của mình. Chúng khác dữ liệu người dùng thật và có thể lệch vài điểm so với công cụ PageSpeed của Google. **Điểm PageSpeed trên điện thoại** | Chỉ số | Trước | Sau | | --- | --- | --- | | Trang chủ tiếng Việt (/vi) | 95 | 99 | | Trang chủ tiếng Anh (/en) | 95 | 99 | **Thời gian hiện phần chính của trang chủ (LCP)** | Chỉ số | Trước | Sau | | --- | --- | --- | | Trang chủ /vi, điện thoại | 2.8 giây | 1.92 giây | **Dung lượng phải tải** | Chỉ số | Trước | Sau | | --- | --- | --- | | Một ảnh chụp màn hình ở trang giới thiệu plugin SL Migrations | 900 KB | 90 KB | | Toàn bộ trang chủ /vi | 436 KB | 194 KB | | Ảnh đại diện (hiển thị nhỏ) | 150 KB | 7 KB | | HTML trang chủ khi gửi đi (đã nén) | 19 KB | 12.2 KB | Điểm trên điện thoại đi từ 95 lên 99. Ở các trang chính, 18 trên 18 lần đo đạt từ 99 trở lên, bản máy tính 100, và ba mục còn lại là Accessibility (dễ truy cập), Best Practices (làm đúng chuẩn) và SEO đều 100. Độ xô lệch bố cục (CLS) giữ ở 0. Có một điều mình không làm được. Thời gian trình duyệt bị kẹt (TBT) gần như không đổi, vì phần khởi động của chính React và Next.js (hai thư viện dựng giao diện) đã chiếm khoảng 115 mili giây mô phỏng và code của site không giảm thêm được. ![Trang chủ phatdev.net](https://phatdev.net/uploads/case/phatdev-net-speed-and-ai/m-home-780.webp) ![Trang dự án phatdev-portfolio](https://phatdev.net/uploads/case/phatdev-net-speed-and-ai/m-project-780.webp) ![Bài blog về tốc độ](https://phatdev.net/uploads/case/phatdev-net-speed-and-ai/m-blog-780.webp) ## Bài học Đo ba lần rồi mới tin. Một lần đo ra 98 hay 99 là chuyện may rủi của máy. Phần đáng giảm nhất là thứ nằm trước điểm LCP. Giảm byte của thứ tải sau đó thường không đổi điểm. Làm cho AI đọc được không tốn nhiều khi trang đã có một nguồn dữ liệu sạch. Phần khó là giữ cho bản máy và bản người không lệch nhau, nên mình để chúng sinh ra từ cùng một chỗ. Và nén phải có người đảm nhận. Mình tắt nén trong ứng dụng để Nginx nén thay. Nếu Nginx không được cài để nén thì trang đi ra không nén gì cả, nên sau khi đổi phải đo lại kích thước thật của trang. ## Cần việc tương tự? Nếu site của bạn đang chậm trên điện thoại, hoặc bạn muốn nội dung của mình đọc được bằng AI, gửi mình vài dòng về trang đó. Mình sẽ đo trước, rồi nói rõ cái nào đáng sửa và cái nào không. - Xem trang dự án: https://phatdev.net/vi/projects/phatdev-portfolio.md ## Case study khác - [Tân Doanh: theme riêng, công cụ ráp cấu hình PC và tính trả góp, PageSpeed điện thoại từ 65 lên 96](https://phatdev.net/vi/case-studies/tandoanh-theme-buildpc.md) - [IGA: 5.256 sản phẩm đổi giao diện, tốc độ điện thoại từ 61 lên 99, giữ nguyên địa chỉ trang](https://phatdev.net/vi/case-studies/iga-website.md) - [PixGamma: phóng ảnh AI trên Mac, sai lệch kết cấu 0,084 thay vì 0,152, chữ đọc đúng 91%](https://phatdev.net/vi/case-studies/pixgamma-macos-upscale.md)