Tối ưu CSS

Các tùy chọn tối ưu hóa CSS trên trang WordPress trong thực tế

Bởi

Video giới thiệu: WordPress là hệ thống mở điều đó giúp CMS này có vô số theme & plugin hỗ trợ thuận lợi cho người dùng. Tuy nhiên nó cũng tạo ra nhược điểm là các thiết kế bên trong có thể chưa tối ưu. Các lời khuyên về tối ưu tốc độ, hiệu suất cho CSS trước đây thường khuyên chúng ta gộp (combine) các file CSS trên toàn trang thành một file duy nhất và minify (giảm thiểu kích cỡ) của nó. Nhưng điều đó đã không còn là cách tối ưu nhất hiện nay khi các CSS …

Đọc thêm

Cách loại trừ ảnh hưởng xấu của mã CSS & JS dư thừa do Contact Form 7 chèn vào trên các trang không liên quan

Bởi

Contact Form 7 (CF7) là plugin form rất phổ biến, chắc nhiều anh chị em đang dùng, tuy nhiên nó có nhược điểm về mặt hiệu suất, tốc độ đó là chèn CSS và JS trên tất cả các post, page dù trang đó có nhúng form hay không! Nếu trang web của bạn có cài CF7 thì để kiểm tra vấn đề này bạn làm như sau. Bạn tạm thời vô hiệu hóa tính năng gộp (combine) và minify JS và CSS (ví dụ của các plugin cache như LiteSpeed, WP-Rocket hoặc Autoptimize), việc này giúp bạn nhận diện …

Đọc thêm

Bạn có thể bỏ gộp & minify CSS trong WordPress nếu muốn

Bởi

Tính năng gộp CSS từng rất quan trọng trong tăng tốc website, công dụng chính của nó là giảm số lượng kết nối (có thể lên đến 20 – 30), và có thể là minify (giảm thiểu dung lượng) nữa khi cần. Gộp CSS là gì? Gộp/Combine CSS là tính năng phổ biến trong các plugin cache như LiteSpeed cache, Swift Performance, hay WP Rocket hoặc proxy nổi tiếng Cloudflare. Cũng có plugin miễn phí chuyên biệt làm việc này rất tốt như Autoptimize. Nhiệm vụ chính của gộp file là nó gom tất cả các file CSS trên trang …

Đọc thêm

Tuyến hiển thị quan trọng trong tăng tốc độ website

Bởi

Tuyến hiển thị quan trọng là gì? Tuyến hiển thị quan trọng (critical rendering path) là một chuỗi các sự kiện phải diễn ra để render (hiển thị) giao diện thấy đầu tiên (initial view/nội dung thuộc màn hình đầu tiên) của trang web. Ví dụ: tải HTML > tải các tài nguyên về > phân tích cú pháp (parse) > hiển thị trang web (xem thêm: Cách trang web tải về và hiển thị) Tối ưu những sự kiện này đem lại kết quả tăng tốc website đáng kể. Tuyến hiển thị quan trọng có thể làm được điều …

Đọc thêm

Plugin Perfmatters và Gonzales: không nổi tiếng nhưng xắt ra miếng

Bởi

Tôi biết đến 2 plugin tối ưu hóa này khá muộn, cỡ năm năm sau khi dùng WordPress và hai năm chú ý đến tốc độ và hiệu suất website. Về cơ bản thì hai plugin có chức năng chính tương tự nhau: loại bỏ CSS và JS dư thừa trên trang. Chỉ là Perfmatters hay được biết đến và có nhiều chức năng râu ria hơn mà thôi, tôi nghe nói Gonzales mới là plugin triển khai ý tưởng này đầu tiên. Nếu kiểm tra bằng Google PageSpeed Insights một lỗi mà rất nhiều trang WordPress mắc phải là …

Đọc thêm

Critical CSS là gì? Cách trích xuất critical CSS trong WordPress?

Bởi

#1. Hiểu về bản chất của CSS trong WordPress Trước khi đi sâu hơn, chúng ta sẽ tìm hiểu cách CSS (thông thường) sẽ hoạt động như thế nào trong WordPress. Mọi giao diện (theme) WordPress đều bao gồm một file style.css bao gồm tất cả các đoạn mã cần thiết để tạo style cho website của bạn. Nhà phát triển theme cần hỗ trợ tất cả các tính năng của WordPress bao gồm bài đăng blog, bình luận, trang sản phẩm, trang thành viên, form, vân vân. Các plugin khác mà bạn cài cũng có thể thêm các style …

Đọc thêm

Giới thiệu plugin Gonzales để tăng tốc WordPress

Bởi

Một cách thức tăng tốc WordPress khác biệt nhưng có thể rất thú vị. Tại sao bạn lại cần Gonzales? Gonzales cho phép bạn vô hiệu hóa (có điều kiện) các file CSS, JS và thậm chí là cả các plugin dựa trên trang mà bạn ghé thăm. Nó là công cụ đơn giản và nhẹ giúp bạn thoát khỏi các trang web nặng nề bằng cách loại bỏ các file JS, CSS không dùng đã được đăng ký bởi theme và plugin. Cách tăng tốc WordPress? Tôi đã viết chi tiết một bài dành riêng cho tăng tốc WordPress. …

Đọc thêm

CSS cho người tay ngang

Bởi

Những người tay ngang tham gia lập website trên nền WordPress giờ rất nhiều, nguyên nhân là vì các yếu tố thuận lợi tăng lên nhanh chóng: WordPress dễ dùng và có nhiều plugin miễn phí cũng như trả phí hỗ trợ vô số tính năng, cài đặt chỉ cần thông qua vài click. Giao diện đa dạng, nhiều lựa chọn. Cộng đồng hỗ trợ lớn. Tài liệu hướng dẫn phong phú. Giá hosting với chất lượng khá có giá chỉ vài trăm ngàn một tháng. Tên miền đăng ký dễ và cũng không đắt. Thanh toán trực tuyến giúp …

Đọc thêm

Nội tuyến (inline) các CSS nhỏ giúp tăng tốc website

Bởi

CSS nội tuyến là gì? CSS nội tuyến (inline) đề cập đến các CSS được đặt trong file HTML; Nó được đặt trong phần đầu của tài liệu, nằm giữa các thẻ style; Nội tuyến CSS đơn giản là đặt CSS của bạn vào trong file HTML thay vì để nó ở file CSS bên ngoài (external – dạng .css). Tại sao bạn sử dụng biện pháp này? Nội tuyến CSS làm giảm số lượng file mà trình duyệt phải tải xuống trước để hiển thị trang web của bạn. Nếu bạn sử dụng một file CSS ngoài, trình duyệt …

Đọc thêm

Minify CSS hay giảm thiểu kích cỡ CSS có tác dụng gì?

Bởi

Vài lời của người dịch: nếu bạn đã sử dụng các theme được viết tốt thì minify CSS đã được giải quyết ngay từ bước đầu. Ngoài ra các plugin cache cũng hỗ trợ tốt việc này. Thêm vào đó nữa các giải pháp nén mặc định (có ở hầu hết các hosting) cũng làm vấn đề này chẳng có gì nghiêm trọng. Nên bài viết này sẽ cho bạn cái nhìn lý thuyết nhiều hơn, còn thực tế trong hầu hết các trường hợp, bạn không cần phải làm gì đâu. Cứ để yên cho các công cụ thực …

Đọc thêm