35 tối ưu hóa hiệu suất cho trang WordPress của bạn
Trang được xây dựng bằng Canvas chỉ tải CSS và JavaScript của các khối mà trang hiển thị, không tải thêm gì khác. Ngoài ra còn có 35 tối ưu hóa, mỗi tối ưu là một công tắc bạn tự kiểm soát, với mặc định thận trọng và giải thích rõ ràng về tác dụng của nó.
Cập nhật
Tải tài nguyên theo từng khối
Hầu hết giao diện đều đi kèm một tệp stylesheet lớn và một tệp script lớn, khiến mọi trang đều phải tải mọi tính năng của giao diện. Canvas ánh xạ từng khối trong số 314 khối của mình tới đúng CSS và JavaScript mà khối đó cần, rồi chỉ tải tổng hợp những gì trang thực sự hiển thị.
- Trang bảng giá không bao giờ tải tập lệnh slider
- Trang không có biểu mẫu sẽ không bao giờ tải trình xử lý biểu mẫu
- Trình chỉnh sửa tải kiểu khối theo cách tương tự
- Không cần cấu hình, và không thể vô tình tắt
Công bố rõ ràng, không phỏng đoán
Mỗi khối tự khai báo tài nguyên của riêng nó. Bản đồ tài nguyên nằm trong chính khối, nên không có danh sách trung tâm nào để ai đó quên cập nhật.
Hoạt động với các khối lõi
Các khối lõi và khối của bên thứ ba giữ nguyên cách tải riêng của chúng. Canvas không tiếp quản tài nguyên của chúng hay tranh giành với WordPress.
Mẫu cũng được tính
Header, footer, tiêu đề trang và slider cũng là khối, nên trang dùng header đơn giản sẽ không tải mã của mega menu.
Không cần mua thêm
Tải có điều kiện không phải là tính năng cao cấp hay tiện ích bổ sung. Đó là cách thư viện hoạt động trên mọi gói và cả khi giấy phép đã hết hạn.
35 tối ưu hóa, được nhóm theo những gì chúng tác động
Không có gì ở đây là phép màu và cũng không có gì bị giấu kín. Mỗi tùy chọn thực hiện một thay đổi cụ thể, có thể kiểm chứng đối với trang mà WordPress gửi đi.
Đang tải 7
Ngừng để CSS và JavaScript chặn lần hiển thị đầu tiên, và bắt đầu tải trang tiếp theo sớm.
- Tải các tệp kiểu không thiết yếu một cách không đồng bộ
- Trì hoãn JavaScript không thiết yếu
- Trì hoãn JavaScript cho đến lần tương tác đầu tiên
- Tải trước hình ảnh lớn nhất trong vùng hiển thị ban đầu
- Thiết lập preconnect tới các nguồn mà trang sẽ sử dụng
- DNS prefetch cho máy chủ bên thứ ba
- Tải trước theo dự đoán, trang tiếp theo được tải trước khi người dùng nhấp vào
Phông chữ 3
Văn bản vẫn dễ đọc trong khi font web vẫn đang tải, và font Google không cần phải là yêu cầu bên thứ ba chút nào.
- Thêm font-display swap vào web font của bạn
- Tải trước các phông chữ mà màn hình đầu tiên cần
- Phục vụ Google Fonts từ máy chủ của bạn
Tệp phương tiện 6
Ảnh là phần nặng nhất trên hầu hết các trang và cũng là phần dễ làm sai nhất.
- Tải lười ảnh nằm dưới phần hiển thị ban đầu
- Tải trễ iframe và nội dung nhúng
- Đặt chất lượng JPEG mà WordPress tạo ra
- Giới hạn chiều rộng tối đa của hình ảnh tải lên
- Kiểm soát các bộ ảnh responsive mà WordPress tạo
- Kiểm soát kích thước ảnh nào được tạo ra
Dọn dẹp 8
WordPress đi kèm nhiều tính năng mà trang web nào cũng phải gánh, nhưng ít trang thực sự dùng đến.
- Xóa chuỗi truy vấn khỏi tài nguyên tĩnh
- Tắt script và kiểu dáng emoji
- Tắt khám phá oEmbed và tập lệnh nhúng
- Tắt Dashicons ở phía người xem
- Tắt XML-RPC
- Tắt nguồn cấp RSS
- Xóa jQuery Migrate
- Tắt pingback nội bộ
Cơ sở dữ liệu 5
Phần quản trị của một trang web chậm: bản sửa đổi, bản tự động lưu và nhịp heartbeat không bao giờ dừng.
- Giới hạn số bản sửa đổi mà một bài viết được lưu giữ
- Đặt khoảng thời gian tự động lưu
- Giới hạn tần suất hoặc tắt heartbeat của trang quản trị
- Dọn sạch bản sửa đổi, transient và spam khỏi cơ sở dữ liệu
- Chỉ cho phép người dùng đã đăng nhập truy cập REST API
WooCommerce 5
Cửa hàng tải các script trên mọi trang của website, kể cả những trang không bán gì.
- Gỡ JavaScript của WooCommerce trên các trang không hiển thị nội dung cửa hàng
- Tắt theo dõi nguồn gốc đơn hàng
- Ngừng việc script cart fragments thăm dò liên tục trên mọi trang
- Không tải thư viện kiểm tra độ mạnh mật khẩu ngoài các trang tài khoản
- Gỡ bỏ thư viện Select2 đi kèm ngoài trang thanh toán
Viết lại mạng phân phối nội dung 1
Trỏ các stylesheet, script, hình ảnh và phông chữ của bạn tới mạng phân phối nội dung mà bạn đã đăng ký, bằng cách viết lại địa chỉ của chúng khi trang được hiển thị. Canvas không bán cho bạn mạng phân phối nào và không định tuyến lưu lượng truy cập của bạn qua máy chủ của chúng tôi.
Tổng cộng có 35 công tắc, và năm công tắc dành cho WooCommerce chỉ xuất hiện khi WooCommerce đang hoạt động. Tìm hiểu thêm về tích hợp cửa hàng.
Mỗi mục trong số này đều là một công tắc, và các giá trị mặc định được đặt ở mức thận trọng
Canvas bật những gì an toàn cho mọi website và để phần còn lại cho bạn, kèm lý do được ghi ngay cạnh mỗi tùy chọn. Thiết lập duy nhất thường là ý tưởng tệ sẽ được nêu rõ trong bảng, ngay tại thời điểm bạn đang đưa ra quyết định.
Nền tảng SEO và khả năng truy cập
Một trang tải nhanh nhưng không thể đọc, không thể được thu thập dữ liệu hay thao tác bằng bàn phím thì chưa hoàn chỉnh. Tất cả những điều này đều có trong chính giao diện, trên mọi gói, không có tính năng nào bị phân tầng sau khi nâng cấp.
Siêu dữ liệu từ nội dung của bạn
Tiêu đề, mô tả, thẻ chia sẻ mạng xã hội, URL chuẩn (canonical), quy tắc robots và sitemap, tất cả được tạo từ trang khi hiển thị. Bạn không cần duy trì một bản sao thứ hai của nội dung.
16 kiểu schema
Organization, WebSite, WebPage, Person, breadcrumbs, Product, Brand, Offer, đánh giá và xếp hạng, địa chỉ, tọa độ địa lý, giờ mở cửa và tìm kiếm trên trang, được xuất ra ở nơi áp dụng.
Vùng đánh dấu ngữ nghĩa
Các vùng đánh dấu header, điều hướng, nội dung chính và footer, liên kết bỏ qua đến nội dung, tiêu đề theo đúng thứ tự, và viền focus hiển thị trên mọi phần tử có thể tương tác.
Menu hỗ trợ bàn phím
Menu, mega menu, bảng bên và modal mở, di chuyển và đóng bằng bàn phím, và chuyển động tôn trọng cài đặt giảm chuyển động của khách truy cập.
Khả năng truy cập, bảo mật và xuất dữ liệu không bao giờ là tính năng cao cấp. Chúng vẫn khả dụng khi giấy phép đã hết hạn, vì một website ngừng hoạt động là vấn đề hỗ trợ, chứ không bao giờ là quyết định về giấy phép.
Cách chúng tôi xác minh điều này
Những tuyên bố về tốc độ và khả năng truy cập thì dễ đưa ra và dễ kiểm chứng. Chúng tôi kiểm chứng của mình, và đây là cách làm.
Trang được so sánh với thiết kế của chúng trong trình duyệt thực
Mỗi trang của bản demo được hiển thị trong trình duyệt và đo đạc so với thiết kế gốc: chiều cao tài liệu, chiều rộng phần, khoảng cách đã tính toán, và mọi thứ do JavaScript điều khiển đều được đo sau khi chạy xong, không bao giờ đo ở lần vẽ đầu tiên.
Website này được kiểm tra ở ba chiều rộng màn hình
Mỗi trang ở đây được kiểm tra bằng axe-core theo WCAG 2.1 mức A và AA ở 1440, 1024 và 390 pixel, cùng với các kiểm tra mà axe không thực hiện: một h1, cấp độ tiêu đề không bao giờ bỏ qua, bốn vùng landmark, liên kết bỏ qua nội dung hoạt động, không tràn ngang, không có chữ nhỏ hơn 12 pixel, liên kết đọc như văn bản và vùng chạm có kích thước tối thiểu 24 pixel.
Canvas cần những gì để hoạt động
WordPress
Canvas được xây dựng trên trình chỉnh sửa khối, nên cần WordPress có Trình chỉnh sửa trang. Phiên bản 7.1 trở lên.
PHP
PHP 7.4 trở lên. Nâng cấp lên phiên bản PHP hiện tại là cách cải thiện tốc độ đơn giản và rẻ nhất mà hầu hết website có thể thực hiện.
Đã kiểm tra đến phiên bản
Canvas được kiểm thử với WordPress 7.1, và có bản cập nhật sau mỗi bản phát hành WordPress.
Về hiệu suất
Bao gồm cả câu hỏi chúng tôi được hỏi nhiều nhất, và đó là lý do trang này không có điểm số nào.
Tôi có còn cần plugin bộ nhớ đệm không?
Có lẽ là có, và đó là câu trả lời trung thực. Canvas kiểm soát những gì giao diện và WordPress thường kiểm soát: tài nguyên nào mỗi trang tải, phông chữ và hình ảnh hoạt động ra sao, cùng lượng công việc mà cơ sở dữ liệu thực hiện. Bộ nhớ đệm trang, bộ nhớ đệm đối tượng và phân phối tại biên thuộc về nhà cung cấp hosting hoặc plugin bộ nhớ đệm của bạn. Đây là các công việc khác nhau, nên chạy cả hai là cấu hình thông thường.
Bật những tùy chọn này có làm hỏng website của bạn không?
Mỗi công tắc đều có thể đảo ngược, và những công tắc dễ xung đột nhất với plugin khác mặc định ở trạng thái tắt. Mỗi công tắc đều giải thích chức năng và khi nào nên để yên, còn cài đặt thực sự rủi ro sẽ nói rõ điều đó trong bảng. Hãy bật từng cái một và tải lại trang web công khai sau mỗi lần.
Tôi có phải cấu hình việc tải tài nguyên theo từng khối không?
Không, không có gì cần tìm hoặc bật. Đây là cách thư viện khối hoạt động. Mỗi khối khai báo CSS và JavaScript mà nó cần, và trang sẽ tải tập hợp những gì thực sự được hiển thị.
Các bản demo có được tối ưu sẵn không?
Việc nhập bản demo cho toàn website sẽ áp dụng Tùy chọn giao diện của bản demo đó, và các công tắc hiệu năng cũng nằm trong đó, để bản demo bắt đầu với những thiết lập mà nó được xây dựng và kiểm tra. Bạn có thể thay đổi bất kỳ thiết lập nào sau đó.
Tại sao trang này không công bố điểm tốc độ?
Điểm số từ một bài kiểm tra tổng hợp trên phần cứng của chúng tôi không cho bạn biết gì về máy chủ lưu trữ, plugin, hình ảnh hay khách truy cập của bạn. Điều chúng tôi công bố là chính xác mỗi tối ưu hóa làm gì, vì vậy hãy bật chúng và tự đo lường trang web của mình trên hạ tầng riêng của bạn.
Một website nhanh mà vẫn dễ chỉnh sửa
Mọi gói đều có cùng thư viện khối, cùng 35 tối ưu hóa và cùng cơ chế tải tài nguyên có điều kiện. Không có cấp hiệu năng nào.