WP2Speed
Search…
2. Tạo critical css
Tạo critical css cho các trang Home, page, single, product, archive..
Sau khi cài plugin wp2speed, bước tiếp theo là tạo critical css. Css sau khi được tạo sẽ lưu vào thư mục
wp-content/uploads/critical-css trên hosting.Trước hết bạn cần kiểm tra xem web của bạn có lỗi xẩy ra không bằng cách thêm vào tham số
?hpp-gen-critical=1 . Hãy đảm bảo rằng các files trong thư mục wp-content/mmr được tạo. Xem tài liệu api. Một lưu ý khác khá quan trọng, bạn cần xóa hoặc dùng css ẩn đi các phần tử screen loader (bao phủ lên toàn bộ nội dung trang web) vì nó có thể tạo ra critical css không chính xác.Chúng tôi phát triển công cụ tạo critical css dưới dạng phần mềm chạy trên máy tính. Bạn có thể tải phần mềm tại:
- Mac: https://drive.google.com/file/d/1gfkPJm91QBaLfDnzl5s4ZSJ3mLQ8bubw/view?usp=sharing (Chú ý: sau khi giải nén di chuyển vào mục Applications)
Sau khi tải xong, bạn giải nén file zip vào một thư mục trên máy tính. VD 'D:/critical-win32-x64'. Nhấn đúp vào file critical.exe để bắt đầu chạy ứng dụng.
Giao diện đầu tiên sẽ yêu cầu bạn đăng nhập thông tin. Để chạy được phần mềm bạn cần 2 thông tin: URL trang web & mã mua.
Giao diện đăng nhập
Sau khi bạn mua plugin wp2speed, bạn tải file license (.zip) => bạn kéo file đó vào viền khung viền mầu xanh ở bên phải của ứng dụng như ở hình trên.
Khi đăng nhập thành công, giao diện sẽ như sau:
Phần mềm tạo critical css cho wp2speed
Các chức năng chính của phần mềm:
- Tạo critical css cho URL
- Xóa cache website
- Kiểm tra tính hợp lệ của file css hoặc toàn bộ css cho URL
Chức năng phần mềm
- (1) refresh UI: nạp lại giao diện ứng dụng. Vd bạn vừa tạo xong css cho URL để xem mã css của URL mới, bạn nhấn nút này để làm mới.
- (2) Register license for new domain: đăng ký license cho domain mới. (dành cho đối tác của wp2speed)
- (3) Logout domain: thoát/đăng xuất domain hiện tại, để quay lại màn hình đăng nhập.
Tạo critical css
Critical css (hay gọi là css tối ưu) được tạo ra cho mỗi loại trang khác nhau, vd trang homepage, page, single post, product, archive..và lưu code css này thành file .css nằm trong thư mục
resources\app\criticalcss\src\dest\$domain 
Đối với website mới, ở cột bên phải sẽ liệt kê danh sách các urls đại diện được tìm thấy trên site của bạn. Các URLs này được phát hiện tự động, và có thể có những URLs không cần thiết. Bạn có thể xóa bằng cách nhấn vào biểu tượng X.
Để thêm URL bạn điền vào trường "put your link" và nhấn nút [Add]. Sau khi thêm đầy đủ các URLs đại diện cho các page như: home, single, page, product, archive nhấn nút [save] để lưu lại các URLs ở cột bên trái.
Mỗi dòng URL có 5 tùy chọn:
- (9) Remove css: Xóa file critical css của URL
- (10) Remove URL: Xóa file critical css của URL & xóa URL khỏi danh sách URLs
- (11) Validate CSS: Kiểm tra URL có hợp lệ css hay không.
- (12) Generate CSS: Tạo critical css cho URL.
- (13) Upload CSS: Tải thủ công file critical css của URL lên website.
Bạn cũng có thể áp dụng hàng loạt URLs cho các hành động sau đây.
- (4) Remove all css: xóa các files css của toàn bộ URLs
- (5) Remove all URLs: xóa toàn bộ css và cả URLs.
- (6) Generate CSS for all URLs: Tạo critical css cho toàn bộ URLs đã được thêm vào danh sách. Lưu ý: bạn cần lưu lại danh sách URLs và code trước khi thực hiện thao tác này bằng cách nhấn nút [save].
Sau khi critical css tạo thành công, bạn nhấn nút (1) refresh UI để xem kết quả. Nếu file css tạo thành công thì mỗi 1 url sinh ra 2 file .css:
- (7) view css for desktop: css hiển thị trên desktop.
- (8) view css for mobile: css hiển thị trên mobile.
Critical css được tải tự động lên hosting thông qua Wordpress Rest API , trường hợp web/host chặn tính năng này thì bạn phải upload thủ công (dùng nút 13). Toàn bộ critical css được lưu trong thư mục
wp-content/uploads/critical-css trên hosting. Load (F5) lại website nếu thấy trang không bị giật nghĩa là trang đó đã có css tối ưu.Lưu ý:
- Tạo thư mục critical-css trên hosting nếu không tồn tại, vì host chưa cấp quyền tạo thư mục.
- Sau khi kiểm tra css đã được tạo trên phần mềm và trên hosting, tuy nhiên bạn vẫn thấy trang bị giật giao diện -> rất có thể URL đó đang bị cache, hãy xóa cache trước khi test. Mẹo: bạn có thể thêm mọi tham số vào cuối URL hoặc tắt plugin cache để kiếm tra.
Bạn cũng có thể kiểm tra Rest API có hoạt động đối với website của bạn hay không bằng cách nhấn nút (13) upload css
Quan trọng: nếu bạn thay đổi layout/css khác nhiều so với giao diện ban đầu của trang mà đã tạo critical css trước đó, thì cần nhấn nút [purge all] từ trang Setting của plugin & đừng quên tạo lại critical css để cập nhật lại giao diện mới.
Nếu bạn gặp lỗi khi tạo css, nghĩa là tool có tìm thấy cú pháp css lỗi trên URL. Một hộp thoại thông báo được mở ra cho biết thông tin lỗi (nằm ở file nào & dòng nào). Lúc này bạn cần tới cột code editor bên trái.
Thông báo lỗi cú pháp css
Chúng ta sẽ sửa lại cú pháp lỗi CSS bằng mã Javascript. Sử dụng 2 hàm quan trọng:
fix_css_syntax: Sửa lại css trên file .css nhưng sau khi đã lấy nội dung css, nghĩa là sửa động không sửa trực tiếp vào file trên host. Đề nghị: sau khi phát hiện cú pháp lỗi, nên sửa trực tiếp ở file thông qua FTP/File manager.before_parse_css: Sửa lỗi inline css (<style>)
Hàm có truyền tham số chứa nội dung css, và chúng ta dùng ngôn ngữ JS để thay đổi. Xem vd sau:
1
const fix_css_syntax = function(css, file, link, domain){
2
//[begin]
3
4
if(css.indexOf('//width:')!==-1) {
5
css=css.replace('//width:','width:').replace('//height:','height:');
6
}
7
//[end]
8
return css;
9
};
10
const before_parse_css = function(css, domain){
11
//[begin]
12
13
if(css.indexOf('//')!==-1 ) css=css.split('// this align the dropdown list').join('')
14
15
//[end]
16
return css;
17
};
Copied!
Lưu ý: không xóa chuỗi
//[begin] và //[end] Sau khi sửa CSS với mã JS ở cột bên trái, bạn lưu lại với nút [Save] & đừng quên nhấn nút [Purge All] ở trang cài đặt plugin để tạo lại file mới. Sau đó bạn cần nhấn nút (11) validate css trên phần mềm để chắc chắn lỗi CSS đã được khắc phục. Sau đó tạo lại critical css cho URL.
Validate CSS
Bạn có thể kiểm tra cú pháp hợp lệ của CSS đối với URL và file css. Sử dụng nút (11) validate css nếu bạn muốn check lỗi css của từng URL.
Ngoài ra cách đơn giản hơn, bạn muốn kiểm tra tính hợp lệ của một file css cụ thể bằng cách nhập liên kết tới file css vào trường "Enter css url.." và nhấn nút (17) validate css.
Chức năng khác
- (18) List remote css: Hiển thị danh sách critical css đã được tải lên website.
- (19) Flush site: Xóa cache của web. Để xóa cache của 1 trang, bạn điền URL của trang vào trường 'put your link' & nhấn nút Flush site. Lưu ý: wp2speed không phải là một plugin cache, chúng tôi xóa cache được sinh ra bởi các plugins cache như w3 total cache, wp-rocket,...
Last modified 2mo ago
Copy link