Cách đạt 100/100 trên Google PageSpeed Insights với trang WordPress và Elementor của trình tạo trang
Tôi muốn kiểm tra xem liệu có thể đạt điểm tuyệt đối 100/100 trên Google PageSpeed Insights bằng một trang web được xây dựng bằng WordPress, trình tạo trang Elementor và chủ đề Astra hay không.
Tôi đã quyết định xây dựng trang web của riêng mình https://davidloor.com/ bằng cách sử dụng WordPress với Elementor và làm theo các đề xuất mà tôi sẽ mô tả bên dưới, trang web của tôi đạt 100/100 như bạn có thể thấy trong ảnh chụp màn hình sau.
Hướng dẫn này giả định rằng bạn có một trang web WordPress đang hoạt động.
Contents
Tạo tài khoản miễn phí trên Cloudflare
“Cloudflare là một trong những mạng lớn nhất hoạt động trên Internet. Mọi người sử dụng dịch vụ Cloudflare với mục đích tăng cường bảo mật và hiệu suất cho các trang web và dịch vụ của họ.” Nó có phiên bản Miễn phí là phiên bản mà tôi đang sử dụng cho trang web của mình.
Bạn có thể tạo một tài khoản miễn phí tại đây: https://dash.cloudflare.com/sign-up
Để biết thêm chi tiết về Cloudflare, bạn có thể truy cập tài liệu riêng của họ tại https://www.cloudflare.com/learning/what-is-cloudflare/
Khi bạn đã hoàn tất đăng ký tài khoản, hãy truy cập https://dash.cloudflare.com/profile/api-tokens , trong Global API Key, nhấp vào View, nhập mật khẩu của bạn và sao chép Key mà chúng tôi sẽ sử dụng trong phần sau các bước.
Cài đặt các plugin WordPress miễn phí
Chúng tôi cần cài đặt hai plugin trên trang WordPress của mình. Nếu bạn không biết cách cài đặt plugin trong WordPress, vui lòng truy cập Liên kết này và nhận bí quyết.
1. Tự động tối ưu hóa
Có thể tải xuống plugin từ Liên kết này .
Trên trang này, https: //YOUR-SITE/wp-admin/options-general.php? Page = autoptimize bật tất cả các tùy chọn được bật, nhưng vẫn tắt các tùy chọn sau:
- Cũng tối ưu hóa cho các biên tập viên / quản trị viên đã đăng nhập?
- Giữ bình luận HTML?
Trên trang này, https: //YOUR-SITE/wp-admin/options-general.php? Page = autoptimize_imgopt bật tất cả các tùy chọn.
Trên trang này, https: //YOUR-SITE/wp-admin/options-general.php? Page = autoptimize_extra bật tất cả các hộp kiểm và nếu bạn không sử dụng phông chữ Google, hãy chọn tùy chọn Xóa phông chữ Google và nhấp vào lưu.
2. WP Cloudflare Super Page Cache
Có thể tải xuống plugin từ Liên kết này .
Trên trang này, http: //YOUR-SITE/wp-admin/options-general.php? Page = wp-cloudflare-super-page-cache-index nhập email mà bạn đã sử dụng để tạo tài khoản Cloudflare và khóa API mà bạn nhận được như đã giải thích ở trên.
Trên trang này, https: //YOUR-SITE/wp-admin/options-general.php? Page = wp-cloudflare-super-page-cache-index đảm bảo rằng tùy chọn Bật bộ đệm trang dự phòng được bật, vì vậy trong trường hợp trang không thể được lưu vào bộ nhớ cache trong Cloudflare, bộ nhớ cache từ đĩa có thể được sử dụng.
3. Vô hiệu hóa các phông chữ mặc định từ Chủ đề Astra và plugin Elementor
Đặt các bộ lọc sau vào tệp functions.php của chủ đề của bạn.
/**
* Disable default astra fonts.
*/
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
* Disable astra google fonts.
*/
add_filter('astra_google_fonts_selected', function($fonts) {
return [];
});
/**
* Disable google fonts from elementor.
*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Cập nhật vào 02/12/2022
Tôi đã chuyển từ chủ đề astra sang chủ đề hello elementor, https://elementor.com/hello-theme/ và nó cũng giúp nhận được 100/100 trên thiết bị di động.
