Chào các bạn, hôm nay mình sẽ nói về một case study tối ưu tốc độ. Đó là web https://kiencang.net/
Website này đã thành lập được 10 năm bởi Mr Đức Anh (thầy dạy SEO, WordPress). Trang web có lượng traffic nhất định và nhiều bài viết.
Website Kiến Càng dùng theme GeneratePress – một theme tối ưu tốc độ và chuẩn SEO, tuy nhiên với lịch sử hình thành lâu đời, thì một số plugin khá cũ. Ở thời điểm trước thì đa phần plugin có dùng đến Jquery, và tất nhiên là nó không được tối ưu tốc độ lắm.
Bạn có thể xem thêm ở bài này: Giới thiệu theme Nevo để biết thêm chi tiết.
Vậy hãy cùng bắt đầu nhé!
Về căn bản…
Thì website Kiến Càng đã rất tốt rồi và pass bài kiểm tra web vital vì Mr Đức Anh cũng là một người dùng WordPress có kinh nghiệm và hay chia sẻ nhiều về tốc độ tối ưu.
Tuy nhiên, có một số chỗ chưa hoàn hảo:
Và mình bắt tay vào cải thiện cho trang web hoàn hảo hơn:
Tối ưu một chút về core Backend:
- Ẩn thông báo cập nhật WordPress cho người dùng không phải Quản trị viên
- Vô hiệu hóa hoàn toàn hệ thống cập nhật tự động Core cho các bản cập nhật chủ đề, plugin và WordPress
- Vô hiệu hóa tự động cập nhật cho plugin (bao gồm cả giao diện người dùng)
- Vô hiệu hóa tự động cập nhật cho các chủ đề (bao gồm cả giao diện người dùng)
- Vô hiệu hóa việc cài đặt các mục đi kèm trong quá trình nâng cấp Core
- Vô hiệu hóa trình chỉnh sửa mã tích hợp cho phép người dùng sửa đổi mã plugin và chủ đề thông qua khu vực quản trị
- Giới hạn số lần sửa đổi bài đăng để giữ (mỗi bài đăng) ở mức tối đa thân thiện với cơ sở dữ liệu là 5
- Giảm số ngày cho đến khi bài đăng bị xóa khỏi thùng rác xuống còn 7 (Mặc định của WordPress: 30 ngày)
- Giới hạn việc tạo Mật khẩu ứng dụng cho người dùng cấp Quản trị viên
- Vô hiệu hóa hoàn toàn mật khẩu ứng dụng
- Vô hiệu hóa màn hình xác nhận email của quản trị viên
- Xóa mục ‘W’ của thanh quản trị WordPress
- Xóa văn bản chân trang của quản trị viên
Tối ưu một chút về Front End:
- Ẩn phiên bản WordPress
- Xóa tham số phiên bản khỏi kiểu và tập lệnh
- Xóa liên kết Bản kê khai WLW
- Xóa liên kết RSD
- Xóa URL liên kết ngắn của bài đăng
- Xóa thẻ trình tạo khỏi nguồn cấp RSS
- Xóa các liên kết nguồn cấp dữ liệu RSS (Cung cấp thông tin thực sự đơn giản) cho các bài đăng và nhận xét
- Xóa tìm nạp trước DNS thành s.w.org
- Xóa tập lệnh Di chuyển jQuery
- Vô hiệu hóa các tập lệnh và kiểu biểu tượng cảm xúc của riêng WordPress
- Tối ưu hóa tập lệnh bình luận bằng cách chỉ tải nó khi cần (khi bình luận được kích hoạt và mở)
- Xóa khối kiểu nội tuyến khỏi của trang web được sử dụng bởi các chủ đề cũ
- Vô hiệu hóa siêu liên kết có thể nhấp tự động của các URL trong nhận xét mới
- Giảm khoảng thời gian Nhịp tim từ 15 giây (mặc định) xuống 60 giây để giảm tải cho máy chủ.
- Bình thường hóa favicon bằng cách xóa mặc định: Chỉ có biểu tượng ‘W’ mặc định của WordPress sẽ không được đặt. Các biểu tượng yêu thích tùy chỉnh vẫn có thể được đặt thông qua Tùy biến.
- Bình thường hóa mục tiêu liên kết logo trên trang đăng nhập
- Bình thường hóa tiêu đề logo trên trang đăng nhập
- Tắt bộ chọn ngôn ngữ trên trang đăng nhập
Tối ưu một chút về Block Editor:
- Vô hiệu hóa thư mục khối
- Xóa các mẫu khối lõi
- Tắt Trình chỉnh sửa mẫu
- Tự động đóng Hướng dẫn chào mừng khi tải trình chỉnh sửa
- Tự động thoát Chế độ toàn màn hình khi tải trình chỉnh sửa
Rồi, như vậy là xong tối ưu phần căn bản.
Tối ưu sâu hơn một chút…
Lỗi: Eliminate render-blocking resources
Lỗi “Eliminate render-blocking resources” xảy ra khi trình duyệt cố gắng tải các tài nguyên cần thiết để hiển thị trang web, nhưng có những tài nguyên chậm hoặc cần thiết phải tải trước khi trang web có thể hiển thị đúng cách. Điều này có thể gây trễ trong việc hiển thị nội dung cho người dùng và làm ảnh hưởng đến trải nghiệm của họ.
Nguyên nhân chính của lỗi này bao gồm:
- Tải tài nguyên chậm: Các tài nguyên như file CSS, JavaScript hoặc hình ảnh có thể tải chậm do kích thước lớn, mạng kém hoặc máy chủ đang hoạt động không ổn định.
- CSS và JavaScript không tối ưu: Sử dụng các thư viện và mã không tối ưu có thể làm tăng thời gian tải. Đôi khi, mã JavaScript có thể phải chờ cho đến khi nó hoàn thành tải và thực thi mới cho phép trang web hiển thị.
- Không tận dụng bộ nhớ cache: Nếu tài nguyên không được lưu trữ trong bộ nhớ cache của trình duyệt, trang web sẽ phải tải lại chúng mỗi khi người dùng truy cập trang, làm tăng thời gian tải.
- Sự cần thiết của tải trước: Một số tài nguyên cần phải tải trước khi trang web có thể hiển thị chính xác, nhưng việc tải chúng có thể bị trì hoãn bởi việc tải các tài nguyên khác.
Cách để khắc phục lỗi này bao gồm:
- Tối ưu hóa tài nguyên: Tối ưu hóa kích thước và định dạng của tất cả các tài nguyên trên trang web, bao gồm cả CSS, JavaScript và hình ảnh. Sử dụng công cụ nén và tối ưu hóa để giảm thiểu thời gian tải.
- Sử dụng Lazy Loading: Áp dụng kỹ thuật lazy loading cho hình ảnh và các tài nguyên không cần thiết phải hiển thị ngay lập tức, giúp tối ưu hóa thời gian tải ban đầu.
- Kết hợp và tối ưu hóa mã: Kết hợp các tệp CSS và JavaScript thành các tệp nhỏ hơn, và loại bỏ mã không cần thiết. Sử dụng các phương pháp như minification để giảm kích thước mã.
- Sử dụng bộ nhớ cache: Đảm bảo rằng các tài nguyên của trang web được lưu trữ trong bộ nhớ cache của trình duyệt để giảm thiểu việc tải lại chúng mỗi lần truy cập.
- Ưu tiên tải trước: Xác định các tài nguyên cần thiết để trang web hiển thị chính xác và tải chúng trước, có thể thông qua việc sử dụng thuộc tính
asynchoặcdefercho các tệp JavaScript.
Cụ thể: Tối ưu loại bỏ các CSS không cần dùng, tải JS về cuối trang.
Lỗi: Reduce initial server response time
Lỗi “Reduce initial server response time” xuất hiện khi thời gian mà máy chủ mất để phản hồi ban đầu cho yêu cầu từ trình duyệt của người dùng là quá lâu. Điều này có thể gây trễ trong việc tải trang web và làm ảnh hưởng đến trải nghiệm người dùng.
Các nguyên nhân chính của lỗi này bao gồm:
- Hiệu suất máy chủ không tốt: Máy chủ của bạn có thể không đủ mạnh để xử lý nhiều yêu cầu đồng thời, dẫn đến thời gian phản hồi kéo dài.
- Tải quá nhiều yêu cầu: Nếu trang web của bạn gửi nhiều yêu cầu đến máy chủ trong cùng một thời gian, máy chủ có thể không đủ khả năng để xử lý tất cả chúng một cách hiệu quả.
- Kết nối mạng chậm: Thời gian mà yêu cầu cần để đi từ trình duyệt của người dùng đến máy chủ và trở lại phụ thuộc vào tốc độ kết nối mạng của họ.
- Thời gian xử lý mã phía máy chủ: Nếu mã của bạn cần phải thực hiện nhiều tính toán hoặc truy vấn cơ sở dữ liệu phức tạp, thời gian xử lý trên máy chủ có thể dài ra.
Cách để khắc phục lỗi này bao gồm:
- Tối ưu hóa hiệu suất máy chủ: Đảm bảo rằng máy chủ của bạn được cấu hình và tối ưu hóa để xử lý hiệu quả các yêu cầu từ trình duyệt.
- Giảm số lượng yêu cầu: Kết hợp các tệp CSS và JavaScript, sử dụng các hình ảnh nén và giảm số lượng yêu cầu tải xuống từ trang web của bạn.
- Sử dụng bộ nhớ cache: Lưu trữ các tài nguyên của trang web trong bộ nhớ cache của trình duyệt để giảm thiểu thời gian phải tải lại chúng mỗi lần truy cập.
- Sử dụng Content Delivery Network (CDN): Sử dụng CDN để phân phối tài nguyên trang web của bạn từ các máy chủ gần với người dùng, giúp giảm thiểu thời gian phản hồi.
- Tối ưu hóa mã phía máy chủ: Đảm bảo rằng mã của bạn được viết tối ưu và thực hiện ít tính toán phức tạp nhất có thể để giảm thời gian xử lý trên máy chủ.
Cụ thể: mình audit lại và bỏ mọt số plugin gây request nhiều, local font tại hosting thay vì tải font từ google để giảm yêu cầu, preload font để làm web có tốc độ tốt hơn.
Lỗi: Reduce unused CSS, Reduce unused JS
Lỗi “Reduce unused CSS, Reduce unused JS” xuất phát từ việc sử dụng quá nhiều mã CSS hoặc JavaScript không được sử dụng thực sự trên trang web của bạn. Điều này có thể gây lãng phí tài nguyên và làm chậm tốc độ tải trang web..
Nguyên nhân chính của lỗi này bao gồm:
- Mã không sử dụng: Trang web của bạn có thể chứa các tệp CSS hoặc JavaScript mà bạn đã thêm vào nhưng không sử dụng chúng trong bất kỳ phần nào của trang.
- Thư viện không cần thiết: Sử dụng các thư viện và mã thừa không cần thiết có thể tăng kích thước của trang và làm giảm tốc độ tải.
- Không tối ưu mã: Mã CSS và JavaScript của bạn có thể không được tối ưu hóa, dẫn đến việc chứa nhiều mã không cần thiết.
Cách để khắc phục lỗi này bao gồm:
- Loại bỏ mã không sử dụng: Kiểm tra tất cả các tệp CSS và JavaScript trên trang web của bạn và loại bỏ những mã không cần thiết. Điều này giúp giảm kích thước tệp và tăng tốc độ tải.
- Kiểm tra thư viện và plugin: Loại bỏ các thư viện, plugin hoặc mã thừa không cần thiết mà bạn không sử dụng.
- Sử dụng công cụ tối ưu mã: Sử dụng các công cụ tối ưu mã để loại bỏ khoảng trắng, dấu cách không cần thiết và mã không sử dụng trong tệp CSS và JavaScript của bạn.
- Tối ưu mã dựa trên nội dung: Tối ưu mã bằng cách tách tệp CSS và JavaScript thành các tệp nhỏ hơn chỉ chứa mã cần thiết cho từng trang cụ thể.
- Sử dụng chức năng gọn nhẹ của thư viện: Nếu sử dụng các thư viện như jQuery, hãy sử dụng phiên bản gọn nhẹ (slim version) nếu có sẵn.
Cụ thể, mình đã xem toàn bộ plugin và nắm rõ trang web. Mình hiểu JS nào cần load ở đâu và bật tắt nó đúng vị trí để giải quyết lỗi này. Về CSS thì như đã nói, mình dùng phương pháp loại bỏ CSS không dùng.
OK như vậy là xong. Và đây là kết quả::
Quá tuyệt vời phải không nào!
Blog Kiến càng hiện đang sử dụng Nevo Theme:
Kết luận
Trang web Kiencang.net đã trải qua quá trình tối ưu hóa một cách triệt để, giúp cải thiện trải nghiệm của người dùng và tăng tốc độ tải trang web. Các biện pháp tối ưu hóa đã được thực hiện để khắc phục các lỗi như “Eliminate render-blocking resources”, “Reduce initial server response time”, “Reduce unused CSS” và “Reduce unused JS”. Dưới đây là một số điểm chính về việc tối ưu hóa và khắc phục lỗi trên trang web Kiencang.net:
Để khắc phục lỗi “Eliminate render-blocking resources”, chúng tôi đã thực hiện việc tối ưu hóa tài nguyên như tệp CSS và JavaScript. Chúng tôi đã kết hợp và nén các tệp này, giúp giảm bớt thời gian tải trang ban đầu và tạo điều kiện cho trình duyệt hiển thị nội dung nhanh chóng.
Để cải thiện lỗi “Reduce initial server response time”, chúng tôi đã tối ưu hiệu suất máy chủ. Qua việc cấu hình lại máy chủ và tối ưu hóa mã phía máy chủ, thời gian phản hồi ban đầu đã được rút ngắn, giúp tăng tốc độ tải trang web và cải thiện trải nghiệm người dùng.
Chúng tôi cũng đã tiến hành tối ưu hóa tài nguyên không sử dụng trên trang web để khắc phục lỗi “Reduce unused CSS” và “Reduce unused JS”. Qua việc loại bỏ mã không sử dụng và thư viện không cần thiết, chúng tôi đã giảm thiểu kích thước trang web và tăng tốc độ tải.
Toàn bộ quá trình tối ưu hóa và khắc phục lỗi đã được thực hiện dưới sự hướng dẫn của các chuyên gia có kinh nghiệm trong lĩnh vực tối ưu hóa website. Kết quả là trang web Kiencang.net đã trở nên nhanh hơn, tải trang mượt mà hơn và mang lại trải nghiệm tốt hơn cho người dùng.
Chúng tôi cam kết tiếp tục theo dõi và duy trì tối ưu hóa để đảm bảo rằng trang web Kiencang.net luôn đáp ứng tốt nhất cho nhu cầu của người dùng và đem lại trải nghiệm tốt nhất trong việc truy cập và sử dụng.
