11 thủ thuật Tối ưu css tăng tốc cho wordpresss (2020)

Css trung bình của website WordPress thì không nhiều chỉ chiến từ 50 kb đến 200 kb .
Tuy nhiên yếu tố đang nói là thứ tự load của css thuộc hàng rất ưu tiên của trình duyệt, nếu bạn làm tốt thì hoàn toàn có thể tăng vận tốc website toàn diện và tổng thể full load nhưng tối ưu css thì quan trọng nhất là hiện thì màn hình hiển thị sớm cho người dùng .
Dù 1 bytes cũng tạo lên cải tổ cho chỉ số hiện thị màn hình hiển thị đầu trang .

Tốc độ trong thực tiễn không quan trọng bằng vận tốc cảm nhận của người mua

Hạnh phúc thật không quan trọng bằng bạn cảm thấy niềm hạnh phúc .
Vũ trụ là có thật, nó có trong tâm chí bạn .

Lựa chọn themes mã hóa tốt

khi bạn sử dụng WordPress lựa chọn themes một điều cực kỳ quan trọng ảnh hưởng tác động đến vận tốc load website của bạn theo kinh nghiệm tay nghề của mình thì nó chiếm từ 50 % đến 80 % vận tốc load website của bạn .
Hãy thật tận trọng khi lựa chọn themes để bạn gắn bó .
Còn trong trường hợp bạn đã chọn rồi thì đừng ngần ngại thay thôi themes của bạn, đổi khác themes rất đơn thuần không có yếu tố gì là khó khăn vất vả cả .
Thông thường mới sử dụng WordPress mình cũng nghĩ biến hóa themes rất khó khăn vất vả nhưng đập cả website đi đập lại nhưng khi đã thưởng thức và đổi khác vài lần themes rồi thì mình Tóm lại đổi khác themes không có gì là khó khăn vất vả cả rất đơn thuần .
Lời khuyên của mình : hãy tạo lập localhost để biến hóa themes và chỉnh sửa khi làm xong mới uploads lên webhost đừng sửa trực tiếp trên webhost. ( lỗi này thường xảy ra nhiều với những người mới khởi đầu )
Cách nhìn nhận themes chất lượng tốt thì có rất nhiều yếu tố mình có san sẻ một bài viết về 9 tiêu chuẩn chọn themes WordPress chất lượng
Nhưng tiêu chuẩn này theo kinh nghiệm tay nghề của mình là quan trọng, mà nó không quan trọng bằng cung ứng đúng nhu yếu của bạn, bạn hoàn toàn có thể tìm hiểu thêm bài viết của mình .

Sửa css nên đưa vào file không nên đưa vào nội tuyến

theo mình 99 % những website của WordPress thì không nên để trong phần tùy chỉnh giao điện mà hãy để trong file cứng như style.css
Đây là lỗi phổ cập của nhưng người mới khởi đầu sử dụng WordPress, thấy đoạn css nào hay được san sẻ trên mạng thì sẽ đưa vào phần tùy chỉnh giao diện css ( tính năng này gần như themes nào cũng đều có ), tuy nhiên css nội tuyến thì không hề cache được .
Bạn nên được vào file style.css file cứng của css thì sẽ tốt hơn .
Mình biết là nhiều bạn bảo em đưa vào file style.css thấy có không hiệu lực thực thi hiện hành ngay, bạn nói đúng .
Bạn đưa vào phải style.css thì cần hiểu thêm về kỹ năng và kiến thức trình duyệt cache nữa còn nếu bạn đưa vào tùy chỉnh css thì sẽ ăn ngay .

Sửa lại tùy chỉnh css khung

Đây là phần khá là nâng cao dành cho những người nâng cao và biết lập trình ngôn từ css .
Nếu khuyên nên không nên sử dụng css khung thì không đúng, tự tạo css lên website từ đầu đến cuối mất rất nhiều thời hạn và sức lực lao động không phải ai cũng có đủ trình độ làm được, css khung rất tốt tuy nhiên nó chứa rất nhiều điểm yếu kém là rất nhiều css thừa .
css thừa vì đơn thuần một themes tạo ra nhiều css để phân phối mọi nhu yếu, như bán hàng, blog, forum. người lập trình viên càng phân phối càng nhiều nhu yếu thì themes của họ càng hút khách .
Css thừa chúng mình cần phải cắt giảm và vô hiệu chúng, quy trình cắt giảm tốn rất nhiều thời hạn, dù chỉ là một đoạn css thừa không sử dụng thì cũng lên vô hiệu .
Công thức cắt giảm css thì không có, chỉ có là sự cần mẫn miền mài và bạn hiểu themes đó và hiệu nhu yếu của bạn để cắt giảm chuẩn những đoạn css không sử dụng .
Có những ứng dụng tìm những đoạn css không sử dụng, nhưng mình thấy không hề hiệu suất cao vì css nếu bạn xử dụng đồng thời javascript những tính năng chuyển cảnh những thứ thì ứng dụng công cụ đó sẽ không phát hiện ra .
Hy vọng trong tương lai sẽ có những ứng dụng vô hiệu css không sử dụng thật sự tốt hiện tại năm 2020 thì vẫn chưa có .
Cách duy nhất và tốt nhất là chỉ có làm thủ công bằng tay mà thôi .

Sử dụng tạo css quan trọng và tải không đồng nhất css

Tuy nhiên không phải ai cũng hiệu tạo lập css quan trọng và tải không đồng điệu css rất nhiều người không hiểu nó, và cứ bật bừa lên thì thật chất rằng 90 % là tai hại không phải là tác lợi, và như mong muốn thì không bị lỗi thường thì sẽ bị lỗi. ( trong thực tiễn đây là thứ mọi người chưa hiệu về tính năng này cứ bật xong lỗi thường hận thú những plugin tối ưu vận tốc WordPress )

Kỹ thuật này bạn làm không chuẩn thì rất dễ lỗi FOUC .
bạn hoàn toàn có thể tìm hiểu thêm :

• Nếu bạn muốn tìm hiểu kỹ thuật tạo css quan trọng và tải không động css cho WordPress

Tải có điều kiện kèm theo file css

Một website thì tổng hợp sẽ có rất nhiều trang .
Ví dụ bạn sử dụng bạn có trang website bán hàng, bạn dùng plugin tạo loại sản phẩm biến thể nổi tiếng woo variation swatches tuy nhiên bạn nó load css ở khắm mọi trang bạn phải tải có điều kiện kèm theo lại file css. ( nghĩ là chỉ được load ở những trang mà nó có tác dùng, còn những trang những thì không được load )
đây là đoạn code ví dụ mình chỉ cho load ở những trang tương quan đến trang loại sản phẩm, shop, giao dịch thanh toán, giỏ hàng. còn những trang như trang blog tin tức, trang chủ thì không được load .

add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_dieu_kien_woo_variation', 100 );
function wptangtoc_deregister_dieu_kien_woo_variation() {
if ( ! class_exists( 'WooCommerce' ) || ( ! is_shop() && ! is_woocommerce() && ! is_cart() && ! is_checkout()) )   {
wp_deregister_style( 'woo-variation-swatches-theme-override' );
wp_deregister_style( 'woo-variation-swatches' );
wp_deregister_style( 'woo-variation-swatches-tooltip' );
}
}

Một thủ pháp nhỏ nếu bạn đang dùng woo variation swatches thì cho vào functions.php để tải điều kiện kèm theo plugin này đi nhé .

Bỏ trọn vẹn file css

Một nguyên do nào đó bạn sử dụng plugin mà nó load file css mà bạn không sử dụng bất kể thứ gì bạn có giải pháp khác tốt hơn bạn hoàn toàn có thể xóa bỏ nó .

add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_xoa_woo_variation', 100 );
function wptangtoc_deregister_xoa_woo_variation() {
wp_deregister_style( 'woo-variation-swatches-theme-override' );
wp_deregister_style( 'woo-variation-swatches' );
wp_deregister_style( 'woo-variation-swatches-tooltip' );
}

xóa hàng loạt css của plugin woo variation swatches
Ghi chú : ví dụ thôi nhé chứ thực tiễn thường thì thì xóa css của plugin woo variation swatches thì toang đó .
Nguyên tắc xóa : bạn hoàn toàn có thể sử dụng hook : wp_enqueue_scripts hoặc hook : wp_print_styles và hàm wp_deregister_style để xóa file css .

Viết tắt css

viết tắt css là cách tăng vận tốc load website, giảm sự được một chút ít dung tích file css của bạn, nó giúp tăng vận tốc load website bạn

ví dụ: bạn dùng { padding: 10px 20x 15px 30px;}
thay vì bạn dùng {padding-top: 10px; padding-left: 20px; padding-right: 15px; padding-bottom: 30px;}
Ví dụ 2: bạn dùng { border-top: 2px solid #333;}
thay vì bạn dùng { border-top:2px; border-style: solid; border-color:#333;}
ví dụ 3: ví dụ: bạn dùng { margin: 10px 20x 15px 30px;}
thay vì bạn dùng {margin-top: 10px; margin-left: 20px; margin-right: 15px; margin-bottom: 30px;}
ví dụ 4: {color: #fff}
thay vì dùng { color: #ffffff}

Viết tắt những đoạn css trình duyệt vẫn hiểu được mà file css của bạn vẫn nhỏ lại .

Nén css

Thuật toán nén css hiểu một cách đơn thuần vô hiệu ghi chú và khoảng chừng trắng và viết tắt css .
Ghi chú và khoảng chừng trắng chỉ thiết yếu cho những người lập trình viên hoàn toàn có thể thuận tiện chỉnh sửa và thao tác với code một cách thuận tiện hơn .

Nhưng với trình duyệt máy móc thì khoảng trắng và những dấu ghi chú lại là một gánh nặng, nó không cần thiết mà làm nặng thêm file giúp giảm tốc độ website đi đáng kết.

Ví dụ : lúc chưa nén dung tích file này là 149 bytes

.wptangtoc {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
.giatuan {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Lúc đã nén : giảm được 26,8 % còn lại là 109 bytes

.wptangtoc{margin:20px;padding:20px;color:#333;background:#f7f7f7}.giatuan{font-size:32px;margin-bottom:10px}

Ví dụ trên chỉ là file nhỏ. hình ảnh dưới mình sẽ test file themes của mình .

Đặc biệt bạn nào file css trên 100 kb thì cứ nén đi vận tốc trở lên tiêu biểu vượt trội hơn nhiều .
Những hình ảnh trên mình sử dụng công cụ nén css trực tuyến là https://csscompressor.net/vi/ bạn hoàn toàn có thể thứ lấy file css của bạn ra kiểm tra nó như thế nào .
Nếu bạn muốn tìm hiểu và khám phá và sử dụng kích hoạt tính năng này bạn hãy tìm hiểu thêm bài viết : nén css

Kỹ thuật sử dụng css tối ưu

Ví dụ bạn sử dụng css làm cho giao diện bạn hoàn toàn có thể css bắng dấu cách .

ví dụ.
đoạn css: .giatuan{color:#fff; padding:10px;margin:20px}
Xong sử dụng css là

Thì hãy sử dụng kiểu này tối ưu hơn .
Đoạn css :. color_fff { # fff }. pt { padding : 10 px }. mt { margin : 20 px }

Các giá trị sẽ ra là như nhau tuy nhiên giải pháp 2 bạn hoàn toàn có thể sử dụng lại class không cần phải nhét thêm vào đó một cách tốt ưu tuyệt vời .

Dùng class không nên dùng style

Dùng class trong class vẫn tốc độ luôn tốt hơn là dùng style.css
Dùng Style chỉ tốt khi bạn làm trang web đó gần như rất ít người vào thì bạn mới làm một mình nó độc lập.( trả ai mong muốn tạo ra trang như thế này cả)

Ví dụ về style :

Dùng style nó không cache được và làm cho trình duyệt web của người mua thao tác nhiều hơn .
cách code kiểu style toàn tập này thì chỉ dành cho những thời mà css mới nổi cách đây khoản cái thời www.domain còn đang ở ngôi đỉnh điểm tức khoảng chừng 10 năm về trước .
Giờ cách code kiểu style nó thực sự là không tốt .
Hãy dùng kiểu code class
Ví dụ : file style.css cho giá trị :. giatuan { padding : 10 px ; color : # fff }
Bạn sử dụng :

2 những code thì đều ra giá trị là như nhau nhưng vận tốc thì khác nhau .
Style thuật ngữ chuyên ngành gọi là nội tuyến những thuộc tính CSS vào trong thành phần HTML

Gộp hoặc chia nhỏ file css

Đây là một kỹ thuật phù thuộc vào giao thức của bạn đang sử dụng
Gộp css có nên sử dụng cho WordPress
Nếu website của bạn không tương hỗ giao thức http / 2 trở lên thì hãy gộp toàn bộ những file css vào làm 1
thì vận tốc sẽ tốt hơn .

trong trường hợp website của bạn tương hỗ giao thức http / 2 trở lên ( http / 2 hoặc http / 3 – quic )
Thì hãy san sẻ nó ra làm nhiều phần đều nhau, mỗi cái không quá 60 kb css là tốt nhất .
Hiểu đơn thuần giao thức http / 2 trở lên tương hỗ đã luông hoàn toàn có thể làm nhiều việc được một lúc .

Ví dụ: bạn làm nhân viên ngân hàng
Có 2 lựa chọn khách hàng:

lựa chọn 1 : 1 ông người mua lớn tạo doanh thu cho bạn là 100.000 VNĐ hoặc lựa chọn 2 : 10 người mua nhỏ tạo lợn nhuận cho bạn 120.000 VNĐ

Với bạn đang sử dụng giao thức http2 trở xuống sử chọn một là giải pháp tốt hơn.
Bạn chỉ phục vụ được 1 người tại một thời điểm loại bỏ những khách hàng nhỏ lựa chọn tập trung vào khách hàng lớn sẽ tối ưu hơn.

với bạn đang sử dụng giao thức http/2 trở lên thì lựa chọn 2 sẽ giao pháp tốt hơn
bạn phục vụ được tất 120.000 VNĐ lớn hơn 100.000 VNĐ bạn chọn 120.000 VNĐ nó nhiều hơn 20.000 VNĐ

Nguyên tắc : bán loại sản phẩm 1 triệu đô cho một người khó hơn bán mẫu sản phẩm 1 đô cho một triệu người. ( nó đúng với giao thức http / 2 trở lên ) .

Giảm thiểu chồng chéo css

ví dụ về css chồng chéo :

.giatuan{
  color:blue;
}
.giatuan{
  color:red;
  background-color:#eee;
}

Chào mừng những bạn đến với WP Tăng Tốc

Kết quả sẽ trả về :
Chào mừng những bạn đến với WP Tăng Tốc
Hiểu theo nguyên tắc : nó yêu tiên từ dưới lên trên và từ phải qua trái .

Thuộc tính color:red; sẽ đè chồng chéo color:blue; các thuộc tính background-color:#eee; vẫn hiện thị bình thường không bị chồng chéo.

Chính vì nó do đó bạn khi bạn thêm css vào file style.css bạn cần phải cho đoạn css đó xuống cuối file, sẽ được yêu tiên chồng tréo .
Khi tối ưu vận tốc load website bạn cần tìm ra những đoạn css chồng chéo để xóa đi, ví dị trên bạn hoàn toàn có thể xóa đi. giatuan { color : blue ; } để cho website của bạn nhẹ hơn mà không tác động ảnh hưởng đến công dụng giao diện. ( có một số ít trường hợp trồn chéo là do javascript cố ý rất khó để xóa nếu xóa rất dễ lỗi bạn cần phải xem xét trước khi xóa ) .

Trường hợp này phổ biến nhất và là nguyên nhất chính tạo ra css chồng tréo lãng phí dung lượng css của bạn.

Hiện tại thì vẫn chưa có công cụ nào thật sự ngon auto vô hiệu css chồng tréo thật sự tốt bạn chỉ hoàn toàn có thể làm bằng giải pháp thủ công bằng tay mà thôi .

• Bạn muốn tìm hiểu về kỹ thuật thứ tự tải yêu tiên css hạn chế chống chéo css bạn có thể tham khảo bài viết này: Thứ tự yêu tiên CSS và loại bỏ css chống chéo

Tóm tắt :
Ngôn ngữ lập trình css là ngôn từ mình yêu thích nhất, trong quy tắc quan trọng trong tối ưu vận tốc load website thì hãy nỗ lực chuyển javascript hay ảnh thành css nếu hoàn toàn có thể .

Xem thêm: Top 10 xu hướng thiết kế website năm 2022 đẹp nhất

Source: https://migoda.vn
Category: SEO Website