Chọn một theme WordPress tải nhanh là khó. Hầu hết trong số họ nhận ra rằng theme của họ chỉ chậm sau khi họ mua và áp dụng nó cho trang web của họ.
Hướng dẫn này sẽ giúp bạn với việc chọn một theme ngay trước khi mua!
Làm thế nào để phân tích một theme WordPress?
Hãy phân tích thử 1 theme phổ biến Gutentype.
Nếu bạn dùng ThemeForest, bạn nên mở xem demo của theme trước bằng cách, ThemeForest -> Live Preview -> Remove Frame. . Một số theme có thể có một vài bản demo, hãy chọn một.
theme thử nghiệm trong bài này là Gutentype, có link demo là.
https://gutentype.ancorathemes.com/.
Dung lượng CSS & JavaScript (Quan trọng nhất)
Hầu hết các theme đều có nhiều tính năng, do đó sẽ có rất nhiều CSS và JavaScript. Đo kích thước CSS & JavaScript là một trong những yếu tố chính trong việc chọn theme WordPress tải nhanh. Phần còn lại của chúng có thể được tối ưu hóa thông qua một số plugin/ tools.
Có một số công cụ như GTmetix, Pingdom, Google PageSpeed Insights để phân tích. Công cụ mà tôi khuyên dùng để phân tích theme là https://www.webpagetest.org/. Nó cho phép bạn phân tích một trang web bằng cách chặn các tập lệnh của bên thứ ba.
Làm sao để check dung lượng CSS & JavaScript
Truy cập: https://www.webpagetest.org/
Trong phần Script, dán đoạn mã sau theo theme của bạn và nhấp vào ‘START TEST’.
[php] blockDomainsExcept gutentype.ancorathemes.comnavigate https://gutentype.ancorathemes.com/
[/php]
blockDomainsExcept là danh sách các tên miền chỉ được phép, trong trường hợp này là tên miền của trang web demo. navigate là URL cần được kiểm tra, URL theme demo.
Khi kết quả đã hiển thị, hãy chuyển đến phần Break Nội dung phân tích nội dung. Bạn sẽ thấy một cái gì đó như thế này:
Yếu tố quan trọng mà bạn cần tìm hiểu là Byte của CSS và JS. Con số càng thấp, chủ đề càng nhanh! Tốt nhất, cả hai nên dưới 100KB. Nếu nó có hơn 200KB, thì chắc chắn nó đã quá nặng và sẽ làm cho trang web của bạn bị chậm.
1000 Bytes = 1 KiloByte (KB)
Responsive Hình ảnh sử dụng SRCSET
kiểm tra theme bạn nếu có srcset
Một trong những yếu tố chính ảnh hưởng đến thời gian tải trang web là kích thước của hình ảnh. Khi bạn tải lên một hình ảnh có chiều rộng 1000px. Nó rất tốt cho máy tính để bàn, nhưng đối với thiết bị di động có 300px, đó là một hình ảnh lớn. với SRCSET bạn có thể chỉ định một hình ảnh thay đổi kích thước dựa trên chiều rộng của thiết bị.
Đoạn HTML bình thường của một file ảnh
[code lang=”html”]<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
[/code]Hình ảnh với SRCSET
[code lang=”html”]<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
[/code]
Làm sao để check SRCSET?
Trong theme demo, chỉ cần nhấp chuột phải vào bất kỳ hình ảnh nào và chọn ‘Kiểm tra Element Element:
Lưu ý: Nén hình ảnh khác với Hình ảnh Responsive
Trong trường hợp bạn đã mua theme, nhưng bạn cần hình ảnh Responsive để sử dụng hình ảnh Thích ứng ShortPixel hoặc
CDN with image resize support
No. of DOM Elements
Mô hình đối tượng tài liệu, nói một cách đơn giản, nó có một cây thư mục được viết bằng HTML.
Số lượng ‘nhánh’ trên cây là các phần tử DOM. JavaScript và CSS hoạt động bằng cách sử dụng cây DOM này. Số lượng phần tử DOM càng cao, làm chậm thời gian kết xuất của bạn.
Một theme WordPress được mã hóa kém có thể có quá nhiều yếu tố. Vì vậy, nó luôn luôn tốt để phân tích số lượng phần tử DOM trong một theme.
Google khuyên bạn nên có số lượng phần tử DOM dưới 1.500.
Hãy nhớ rằng việc thêm quá nhiều tính năng / widget cũng dẫn đến các yếu tố DOM tăng lên. Một số theme sử dụng trang chủ để giới thiệu tất cả các tính năng của chúng. Vì vậy, hãy kiểm tra một trang khác ngoài trang chủ
làm sao để kiểm tra Dom Elements?
Truy cập https://developers.google.com/speed/pagespeed/insights/ và nhập URL theme demo. Sau khi phân tích kiểm tra xem có lỗi không. Tránh một kích thước DOM quá cao.
tại sao nên bỏ qua ‘Scores’?
Các công cụ như GTmetrix, Pingdom, Google PageSpeed Insights là những công cụ tuyệt vời để phân tích một theme. Tuy nhiên, bạn không nên xem xét điểm số hoặc điểm số của họ. Những điểm số này phụ thuộc rất nhiều vào hình ảnh, server response time, server settings, sử dung CDN …
Một vài Tips chọn theme
Tránh theme “multi-Purpose” (đa mục đích)
Trừ khi bạn có một nhu cầu cụ thể, tránh các theme đa mục đích. Một giải phá phù hợp cho tất cả. Các theme đa mục đích thường có rất nhiều tính năng. Họ sẽ làm cho trang web của bạn chậm.
Chọn một theme được xây dựng cho mục đích của bạn. Giống như các theme được thiết kế đặc biệt cho blog, thương mại điện tử, Landing Page, diễn đàn, v.v.
Chọn một theme cần ít plugin hơn
Với các plugin WordPress, bạn có thể nhận được bất kỳ tính năng nào bạn muốn, đó không phải là vấn đề bạn sử dụng theme nào. Nhưng hãy lưu ý rằng các plugin này có thể tiêm một tập các tệp css cồng kềnh khác. Vì vậy, nó tốt hơn để tìm một theme có hầu hết các tính năng bạn cần.
Lấy một ví dụ, khi tôi tìm kiếm một chủ đề cho blog của mình (cái này), tôi chắc chắn rằng chủ đề của tôi hỗ trợ AMP, các nút chia sẻ xã hội, bài đăng liên quan, thanh trượt, mục lục, đăng ký, v.v … Nếu theme của bạn có sẵn , họ phải sử dụng lại các lớp css và được tối ưu hóa rất tốt.
Sử dụng bộ lọc hiệu quả
ThemeForest đi kèm với các bộ lọc tiện dụng. Sử dụng chúng hiệu quả để tìm theme tốt. Đây là những gì tôi thường sử dụng:
Tags: Responsive, Modern, Clean
Sales: High, Top Sellers
Rating: 4 stars and higher
Kiểm tra ngày cập nhật cuối cùng và đánh giá
Kiểm tra ngày cập nhật cuối cùng. Các theme được tối ưu hóa đúng sẽ được cập nhật trong vòng 60 ngày qua.
Ngoài ra kiểm tra số lượng đã bán, bình luận và đánh giá. Nó sẽ cung cấp cho bạn một cái nhìn tổng quan về chất lượng theme.
Phần kết luận
Theme chắc chắn ảnh hưởng đến thời gian tải cũng như thời gian kết xuất. Tuy nhiên, bạn cũng nên lưu ý rằng theme chỉ là một yếu tố trong thời gian tải. Một theme tốt với hàng tấn hình ảnh lớn, máy chủ hiệu suất thấp cũng có thể làm chậm trang web của bạn.