Cách tăng tốc website chạy nhanh hơn trong 8 bước
Mới gần đây tôi đã chán ngấy blog dựa trên WordPress của mình . Tôi đang sử dụng một chủ đề đóng hộp sẵn và nhìn chung có vẻ như toàn bộ điều này rất chậm chạp và khó hiểu về khả năng sử dụng cũng như giao diện hình ảnh chung. Vì tôi luôn ghen tị về tốc độ tải nhanh như chớp của dev.to, tôi nghĩ – tại sao không biến nó thành một trang được tạo tĩnh bằng Gatsby? Ý tôi là, static là sự cường điệu mới, vậy tại sao không sử dụng nó?
Contents
Gatsby không phải là câu trả lời
Sau khi mày mò với Gatsby trong một thời gian, tôi đã có một cái gì đó để làm việc. Phần khó nhất là xuất tất cả các bài viết trên WordPress sang Markdown – điều này rất khó nhưng có thể làm được. Tuy nhiên, tôi không hài lòng lắm với các chủ đề có sẵn cho Gatsby Blog. Tôi muốn một thứ gì đó cực kỳ tối giản nhưng đồng thời cũng đẹp mắt về mặt thẩm mỹ. Vì vậy, khi tôi kiểm tra nhanh một trong các bài đăng trên WordPress của mình, tôi nhận thấy rằng thời gian đến byte đầu tiên thực sự không tệ lắm và tôi nghĩ: Mhh … điều gì sẽ xảy ra nếu tôi có thể chỉnh sửa cài đặt WordPress của mình một chút và làm cho nó nhanh chóng mặt?
Thử thách được chấp nhận
Vì vậy, đây là những hành động tôi đã thực hiện:
- Đã tìm thấy một WP theme về mặt hình ảnh, đủ gần với những gì tôi muốn
- Ghi đè bằng CSS tùy chỉnh để làm cho nó sạch hơn
- Đã xóa tất cả “Hình ảnh Nổi bật” khỏi trang chủ
- Đã cài đặt WP Fastest Cache và bật tất cả các cài đặt
- Đã đăng ký trang web của tôi tại Cloudflare và có WP Fastest Cache đẩy tất cả nội dung tĩnh lên Cloudflare
- Plugin đã cài đặt Disable/Remove Google Fonts
- Đã thay đổi css
font-familyđể nó hoạt động mà không cần Google Fonts - Đã sử dụng plugin WP Smush để nén tất cả hình ảnh
Kết quả
- Thiết kế mới siêu sạch
- Thời gian trung bình đến byte đầu tiên: 350ms
- Trung bình đầy tải trong: 450ms
- 100/100 PageSpeed Insight Points cho máy tính để bàn
- 98/100 Điểm thông tin chi tiết về tốc độ trang cho thiết bị di động
- Kết quả webpagetest.org về tốc độ:
Sự kết luận
Việc tạo trang web siêu nhanh với WordPress / PHP là hoàn toàn có thể. Thủ thuật quan trọng nhất ở đây là bộ đệm tĩnh và sử dụng CDN. Kiểm tra kết quả tại https://www.timo-ernst.net . Bây giờ tôi là một con gấu trúc webdev rất hạnh phúc 🐼. Bạn có thêm mẹo về cách cải thiện tốc độ tải? Hãy cho tôi biết trong các ý kiến dưới đây 🙂
Ps: Hãy theo dõi hành trình phát triển web của tôi trên Twitter nếu bạn muốn có thêm những câu chuyện như thế này.
Câu hỏi về SEO
Nếu có bất kỳ chuyên gia SEO nào đọc được thông tin này – tôi đã xóa tất cả các hình ảnh nổi bật khỏi trang chủ để cải thiện hiệu suất và chỉ giữ hình ảnh trong các bài đăng. Điều này có tác động tiêu cực đến SEO không?
