Categories Cache Litespeed

Tùy chỉnh Page Optimization trong plugin LiteSpeed Cache [tài liệu hướng dẫn chính thức]

tối ưu trang

Vài lời của người dịch: Trong bài viết này tôi tham khảo trực tiếp tài liệu chính thức của LiteSpeed dành cho LiteSpeed Cache phiên bản WordPress. Bên cạnh bài viết hướng dẫn sử dụng LiteSpeed Cache rất hay của Johnny đã được dịch sang tiếng Việt, tôi hy vọng bài này sẽ bổ sung thêm nguồn thông tin tham khảo hữu ích cho các bạn.

Tài liệu hướng dẫn thì ngôn ngữ khá cứng không được bay bổng, nhưng cái hay của nó là đi thẳng vào vấn đề và có nhiều chi tiết kỹ thuật mà các bài viết khác không có được. Muốn đi sâu thì chúng ta cần đọc thôi.

Chúc vui.


Tab CSS Settings (các cài đặt dành cho CSS)

các cài đặt dành cho CSS

CSS Minify (rút gọn CSS)

  • Mặc định: OFF

Các ký tự trắng (white space) dư thừa, các dòng ký tự mới (new line), và các chú thích (comments) sẽ bị loại bỏ khỏi tất cả các file CSS nếu tùy chọn này được bật (ON).

CSS Combine (kết hợp CSS)

  • Mặc định: OFF

Tất cả file CSS riêng lẻ sẽ được kết hợp (combined) thành file CSS duy nhất.

Unique CSS (CSS duy nhất)

  • Mặc định: OFF

Bật tùy chọn này để có được file CSS kết hợp duy nhất cho mỗi URI, bất kể giá trị được lưu trong Max Combined File Size là bao nhiêu (kích cỡ tối đa của file kết hợp).

Tùy chọn này sẽ hữu ích nhất khi kết hợp với dịch vụ mới Unused CSS (css không sử dụng) sẽ được cập nhật sớm trong bản phát hành sắp tới.

CSS HTTP/2 PUSH

  • Mặc định: OFF

CSS sẽ đước gửi đến trình duyệt trước khi nó được yêu cầu.

Load CSS Asynchronously (tải CSS không đồng bộ)

  • Mặc định: OFF

Tùy chọn này mặc định được để là OFF. Khi để OFF, trang web sẽ được tải theo cách thông thường, khi trình duyệt tải CSS từ header của HTML trước khi tiếp tục hiển thị nội dung trong HTML body. (xem thêm: cách trình duyệt tải trang web về).

Khi tùy chọn này được bật (ON) thì CSS và HTML sẽ được tải về cùng một lúc (same time). Trang có thể được tải nhanh hơn theo cách đó, nhưng nó có thể làm cho lượt tải đầu tiên (initially load) không có định dạng (without formatting). Để tránh phiền phức này bạn sẽ muốn tạo Critical CSS và tải nó về trước. Chúng ta sẽ nói về tùy chọn này ngay sau đây.

Generate Critical CSS (tạo CSS quan trọng)

  • Mặc định: ON

Tùy chọn này mặc định để là ON, nhưng chỉ hoạt động khi Load CSS Asynchronously cũng để là ON. Khi cả hai tùy chọn được bật, Critical CSS sẽ được tạo bởi dịch vụ CCSS (viết tắt của Critical CSS) do QUIC.cloud đảm nhiệm, và sau đó được gửi ngược trở lại LiteSpeed Cache. Tuy nhiên tôi (người dịch) thấy tốc độ tạo critical CSS của LiteSpeed rất chậm, lý do là vì có thể họ tạo nó ở cấp độ URL cụ thể, trong khi cả plugin WP Rocket và plugin Swift Performance tạo nó ở cấp độ kiểu trang, do vậy chỉ phải tạo khoảng 10 critical CSS.

Lưu ý: một số theme đã tạo sẵn critical CSS cho bạn. Trong trường hợp đấy, bạn có thể để tùy chọn này là OFF.

Một khi Critical CSS được tạo, nó sẽ được tải đầu tiên, và sau đó CSS còn lại sẽ được tải không đồng bộ với HTML. Trang sẽ không còn bị tình trạng tải mà không được định dạng nữa.

Dưới đây là cách nó hoạt động:

  1. Người đọc gửi yêu cầu đến Client Server (máy chủ của bạn hay tổng quát hơn là máy chủ web dành cho người đọc).
  2. Nếu chưa có Critical CSS thì Client Server sẽ gửi yêu cầu tạo Critical CSS cho máy chủ Critical CSS từ xa của QUIC.cloud
  3. Máy chủ CCSS sẽ lấy nội dung + tài nguyên từ máy chủ của bạn, rồi sau đó tạo Critical CSS.
  4. Máy chủ CCSS sau đó gửi Critical CSS đã được tạo trở lại máy chủ của bạn.
  5. Máy chủ của bạn phục vụ nội dung kèm với Critical CSS cho người đọc.

Điều này có một vấn đề nhỏ: khi trang web của bạn vẫn chưa tạo Critical CSS (hoặc sau khi Purge All), lượt xem đầu tiên gửi yêu cầu tới trang sẽ cần đợi đợi quá trình trên hoàn thành trước khi các style Critical CSS có sẵn. Điều đấy có thể mất vài giây và khách truy cập thường chẳng muốn vậy. Điều đó dẫn chúng tôi đến cài đặt tiếp theo.

Generate Critical CSS in the Background (tạo critical CSS trong chế độ nền)

  • Mặc định: ON

Lưu ý: Load CSS Asynchronously phải được thiết lập là ON để tính năng này hoạt động.

Cài đặt này xác định xem liệu các tính toán được thực hiện trong foreground hay trong background. Nó được để ON theo mặc định. Điều này có nghĩa là nó là chức năng background, và sử dụng hàng đợi dựa-trên-cron. Khi trang được xem, nếu không có critical CSS nào được xác định cho kiểu trang, một yêu cầu được thêm vào hàng đợi, và trang tiếp tục tải mà không cần đợi chờ.

Đây là điều bạn có thể thấy khi các trang được đưa vào trong hàng đợi:

bật tạo critical CSS ở chế độ nền

Nếu cron của bạn bị vô hiệu hóa (hoặc bạn không đợi được), bạn có thể nhấn vào nút Run Queue Manually để thúc đẩy quá trình này.

Nếu Generate Critical CSS in the Background được đặt là OFF, thì critical CSS sẽ được tạo trong foreground, ngay lập tức khi trang được yêu cầu. Điều này có nghĩa là người xem phải đợi critical CSS tính toán xong trước khi xem trang. Điều này có khả năng làm chậm quá trình tải trang & điều không nên xảy ra.

Separate CCSS Cache Post Types (CCSS cache riêng rẽ cho các kiểu bài post)

Theo mặc định, mỗi thiết lập Critical CSS được lưu cho từng kiểu bài post. Điều đó có nghĩa là có CCSS cho các Post, CCSS cho các Page, CCSS cho các sản phẩm (nếu bạn có kiểu post tùy chỉnh “Product”). Nếu bạn có kiểu bài post mà mỗi mục trong post đó có kiểu định dạng khác nhau thì một bộ Critical CSS duy nhất sẽ không được thực hiện. Thêm kiểu post vào hộp tương ứng, và Critical CSS sẽ được tạo cho từng mục của kiểu post đó.

Ví dụ nếu các Page trên trang của bạn có các định dạng khác nhau, hãy nhập page đó vào hộp. Các fiel critical CSS riêng rẽ sẽ được lưu trữ cho từng bài post cụ thể của kiểu Page trên trang của bạn.

Separate CCSS Cache URIs (cache CCSS riêng rẽ cho các URI)

Nếu bạn có các trang không giống với định dạng chung như các kiểu post còn lại, bạn có thể liệt kê các URI (hoặc một phần URI) cho các page đó trong hộp này. Các file critical CSS sẽ được tạo riêng cho các link bao gồm chuỗi đó. Các URI sẽ được so sánh với các biến máy chủ REQUEST_URI. Để chỉ định phần bắt đầu của một chuỗi, thêm ^ vào phần đầu của chuỗi. Để thực hiện khớp chính xác, thêm $ vào phần cuối của chuỗi.

Các ví dụ về khớp chuỗi

Giả sử bạn có các URI sau:

  1. /recipes/baking/
  2. /recipes/baking/cakes
  3. /recipes/baking/brownies
  4. /popular/recipes/baking/

Chuỗi /recipes/baking/ sẽ khớp với toàn bộ bốn URI.

Chuỗi /recipes/baking/$ sẽ khớp với URI số #1 (vì $ đại diện cho khớp chính xác).

Chuỗi ^/recipes/baking sẽ khớp với cái số #1, #2, #3 (vì ^ đại diện cho chuỗi bắt đầu của URI).

Inline CSS Async Lib (nội tuyến thư viện CSS không đồng bộ)

  • Mặc định: ON

Lựa chọn này sẽ inline thư viện CSS không đồng bộ để tránh chặn hiển thị (render blocking).

Font Display Optimization

Default

Cài đặt này sẽ nối thêm thuộc tính font-display vào tất cả các quy tắc @font-face trước khi caching CSS để chỉ định cách các font nên hiển thị trước khi được tải về.


Tab JS Settings (các cài đặt dành cho JS)

các cài đặt dành cho JavaScript

JS Minify (rút gọn JS)

  • Mặc định: OFF

Ký tự trắng dư thừa, dòng ký tự mới, và các chú thích sẽ được loại bỏ khỏi tất cả JS nếu tùy chọn này được bật (ON).

JS Combine (kết hợp JS)

  • Mặc định: OFF

Tất cả file JS riêng lẻ sẽ được kết hợp thành file JS duy nhất nếu tùy chọn này được bật (ON).

JS HTTP/2 Push

  • Mặc định: OFF

JS sẽ được gửi đến trình duyệt trước khi nó được yêu cầu nếu tùy chọn này được bật.

Load JS Deferred (trì hoãn tải JS)

  • Mặc định: OFF

Nếu để ON, cài đặt này áp vào tất cả các script và sẽ chỉ tải chúng chỉ khi file HTML được tải xong (trì hoãn tải JS).

Load Inline JS (tải JS nội tuyến)

  • Mặc định: Default

Tùy chọn này cho phép bạn lựa chọn khi nào thì tải JS inline (nội tuyến). Default không sửa đổi JS nội tuyến. After DOM Ready có thể được dùng để tăng khả năng tương thích JS và giảm lỗi JS có nguyên nhân từ việc sử dụng khuyến nghị Deferred ở trên.

Exclude JQuery (loại trừ jQuery)

  • Mặc định: ON

Cài đặt này loại trừ jQuery khỏi tất các các biện pháp tối ưu hóa ở trên. Khuyến nghị là vẫn nên để cài đặt này là ON, đặc biệt là trong trường hợp bạn có JavaScript nội tuyến. Nếu bạn từng gặp phải lỗi khi JS Combine được bật, bật cài đặt này có khả năng loại bỏ được chúng.


Tab Optimization Settings (các cài đặt tối ưu hóa)

cài đặt ở tab tối ưu hóa

CSS/JS Cache TTL (thời gian sống của cache CSS/JS)

  • Mặc định: 604800

Các file đã được rút gọn và kết hợp được lưu trong thư mục /wp-content/litespeed/cssjs/. Tùy chọn này được dùng để chỉ định cụ thể khoảng thời gian sống của cache. Giá trị nhỏ nhất là 3600 giây, nhưng chúng tôi khuyến nghị nên để 604800. Khi có lệnh Purge All (xóa tất cả cache), CSS/JS rút gọn và kết hợp sẽ được xóa trong quá trình purge.

HTML Minify (rút gọn HTML)

  • Mặc định: OFF

Nếu tùy chọn này được bật thì ký tự trống dư thừa, dòng mới và chú thích sẽ bị loại bỏ khỏi tất cả file HTML.

Inline CSS Minify (rút gọn CSS nội tuyến)

  • Mặc định: OFF

Nếu tùy chọn này bật (ON) thì các ký tự trắng dư thừa, dòng mới và các chú thích sẽ được loại bỏ khỏi mã CSS nội tuyến trên trang HTML.

Inline JS Minify (rút gọn JS nội tuyến)

  • Mặc định: OFF

Nếu tùy chọn này được bật thì các ký tự trắng dư thừa, dòng mới, và các chú thích sẽ được loại bỏ khỏi tất cả mã JS nội tuyến trên trang HTML.

Cá nhân người dịch thường tắt cả 3 tùy chọn HTML minify, Inline CSS minify và Inline CSS minify. Vì chúng thường không đem lại tác động đáng kể đến tốc độ trang, trong khi lại làm máy chủ mất thời gian tối ưu hóa nó, và có thể làm chậm quá trình xây dựng trước cache.

DNS Prefetch (tìm nạp trước DNS)

Mặc định: Empty List (danh sách rỗng, không điền thông tin gì)

Với cài đặt này bạn có thể thực thi tìm kiếm DNS cho danh sách tên miền trước khi nó được yêu cầu. Thông qua việc tìm nạp các kết quả DNS, độ trễ có thể được giảm đáng kể cho người truy cập cũng như khi họ click vào các liên kết bên ngoài, đặc biệt là trên mạng di động. Các tên miền nên được nhập vào theo kiểu một dòng một tên miền giống như thế này: //www.example.com

Bạn không cần nhập http hoặc https.

DNS Prefetch Control (điều chỉnh tìm nạp trước DNS)

  • Mặc định: OFF

Bật DNS Prefetch trên diện rộng cho tất cả URL trong tài liệu, bao gồm ảnh, CSS, JavaScript và những cái tương tự. Điều này có thể giúp cải thiện tốc độ tải trang.

Mặc dù tùy chọn này có vẻ rất hay nhưng người dịch không dùng, vì tôi cho rằng việc kết nối trước DNS đến tất cả các tài nguyên bên ngoài của website mà không có chọn lựa có thể đem đến kết quả trái ngược so với mong đợi.

Remove Comments (loại bỏ chú thích)

  • Mặc định: OFF

Với tùy chọn mặc định, các chú thích sẽ được giữ nguyên khi JS và CSS được rút gọn, nhưng các chú thích có thể chiếm không gian có giá trị. Bật tùy chọn này để loại bỏ chú thích khỏi các file rút gọn và giúp chúng phân phối hiệu quả hơn.

Remove Query Strings (loại bỏ chuỗi truy vấn)

  • Mặc định: OFF

Tùy chọn này sẽ loại bỏ chuỗi truy vấn ra khỏi các tài nguyên tĩnh. Các tài nguyên tĩnh với chuỗi truy vấn có thể không được cache bởi trình duyệt và các máy chủ proxy. Loại bỏ chuỗi cho phép chúng được cache, điều đó có nghĩa là trang sẽ được tải nhanh hơn.

Load Google Fonts Asynchronously (tải Google font theo kiểu không đồng bộ)

  • Mặc định: OFF

Bạn có thể muốn bật tải không đồng bộ cho tất cả CSS, nhưng có thể bạn chỉ muốn áp dụng nó cho Google Fonts mà thôi. Nếu được bật, tùy chọn này sẽ cho phép bạn tải Google Fonts theo kiểu không đồng bộ mà không bắt buộc CSS cũng phải tải theo cách đó. Ngoài ra tùy chọn này cũng thêm preconnect đến tên miền của Google vì thế các font có thể được tải nhanh hơn.

Remove Google Fonts (loại bỏ Google Fonts)

  • Mặc định: OFF

Tùy chọn này sẽ loại bỏ tất cả Google fonts khỏi trang của bạn. Cần đảm bảo là trước khi bật bạn cần kiểm tra kỹ. Trừ khi bạn có font chữ thay thế phù hợp được lưu trữ cục bộ, còn không thì style của trang có thể thay đổi rất nhiều (thường là theo hướng tiêu cực).

Remove WordPress Emoji (loại bỏ Emoji của WordPress)

  • Mặc định: OFF

Nếu được bật, tùy chọn này sẽ loại bỏ các file JavaScript bổ sung được dùng để hỗ trợ thêm emojis trong các trình duyệt cũ. Người xem sử dụng trình duyệt hiện đại đã có sẵn emoji tích hợp bên trong hỗ trợ nên sẽ không bị ảnh hưởng gì.


Tab Media Settings (các cài đặt cho tài nguyên đa phương tiện)

các cài đặt cho tài nguyên đa phương tiện

Lazy Load Images (lazy load ảnh)

  • Mặc định: OFF

Khi được bật, tùy chọn này chỉ tải ảnh khi nó nằm trong khung nhìn trình duyệt (viewport). Các ảnh còn lại bên dưới sẽ chỉ được tải khi cần thiết vào thời điểm chúng được cuộn đến khung nhìn.

Dù hữu ích, điều này có thể làm ảnh xuất hiện đột ngột và ảnh hưởng xấu đến trải nghiệm người dùng. Bạn có thể cải thiện nó bằng cách áp dụng CSS3, và để các ảnh được tải bằng hiệu ứng fade-in (hoặc hiệu ứng khác).

Lưu ý: Nếu trình duyệt không hỗ trợ CSS3, đoạn mã bên dưới sẽ bị bỏ qua.

Đoạn mã CSS sau có thể được dùng để tạo hiệu ứng “fade-in” cho các ảnh đã được lazy load:

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

Điểm mấu chốt là thuộc tính selector data-lazyloaded, đây là phương thức được dùng để nhắm đến các phần tử dựa trên thuộc tính đã có của chúng.

Trước khi ảnh được lazy load, nó sẽ được gắn thuộc tính data=”lazyloaded”, cái cho phép PHẦN 1 của đoạn mã CSS tác động đến.

Một khi ảnh được tải xong, thuộc tính sẽ bị loại bỏ, PHẦN 1 không còn liên quan nữa, và PHẦN 2 của CSS sẽ có tác động. Trong đoạn mã CSS cụ thể ở ví dụ trên ảnh sẽ được fade-in, nhưng bạn có thể thay thế mã bằng bất cứ hiệu ứng CSS nào mà bạn muốn.

Basic Image Placeholder (ảnh giữ chỗ cơ bản)

  • Mặc định: empty string (không điền gì)

Khi Lazy Load Images được bật, một hộp màu xám sẽ được hiển thị đóng vai trò giữ chỗ (placeholder) cho đến khi ảnh có thể được tải về. Nếu bạn thích điều gì đó sáng tạo hơn, bạn có thể chỉ định ảnh base64 cụ thể của mình. Bạn có thể đưa ảnh của bạn vào đây, hoặc bạn có thể sử dụng LITESPEED_PLACEHOLDER constant trong file wp-config.php của bạn. Nếu cả hai đều được bật, tùy chọn này sẽ được ưu tiên hơn wp-config.php constant.

Responsive Placeholder (giữ chỗ đáp ứng)

  • Mặc định: OFF

Các ảnh giữ chỗ đáp ứng có thể được dùng trong trường hợp khi thuộc tính chiều rộng và chiều cao của ảnh được thiết lập. Nhiệm vụ ở phần này là tạo ra kích cỡ giống như ảnh giúp cho layout của bạn không bị xáo trộn (điều rất khó chịu với trải nghiệm người dùng, PageSpeed cũng mới [đầu năm 2020] đưa thuộc tính này vào để chấm điểm và gọi nó là “Điểm số thay đổi bố cục ở dạng tích lũy/Cumulative Layout Shift”).

Responsive Placeholder SVG (ảnh giữ chỗ dạng SVG)

Nếu tạo ảnh giữ chỗ cục bộ, bạn có thể chỉ định một ảnh SVG cần dùng, và nó sẽ được chuyển thành ảnh chiếm chỗ base64 một cách nhanh chóng.

Lưu ý: các biến {width}{height} sẽ được thay thế bằng các thuộc tính ảnh tương ứng. Biến {color} sẽ được thay thế với cài đặt màu sắc dành cho nền (background color).

Responsive Placeholder Color (màu sắc giữ chỗ đáp ứng)

  • Mặc định: #cfd4db

Khu vực giữ chỗ đáp ứng có thể được tạo để có bất cứ màu sắc nào mà bạn muốn. Sử dụng tính năng chọn màu (color picker) nếu bạn thấy cần thiết. Đây là màu sắc được dùng cho ảnh SVG nói ở phần trên.

LQIP Cloud Generator (tạo ảnh LQIP thông qua cloud)

  • Mặc định: OFF

Ảnh LQIP (Low Quality Image Placeholder / Ảnh giữ chỗ chất lượng thấp) là dịch vụ do QUIC.cloud đảm nhiệm cho phép bạn tạo ảnh giữ chỗ độc đáo riêng cho từng ảnh, LQIP là phiên bản ảnh được làm mờ và giảm kích cỡ của ảnh chất lượng cao sẽ được tải sau đó khi người dùng cuộn chuột đến.

LQIP Quality (thiết lập chất lượng cho ảnh LQIP)

  • Mặc định: 4

Chỉ định chất lượng cụ thể cho ảnh LQIP được tạo. Giá trị cao hơn sẽ tạo độ phân giải lớn hơn, hệ quả là giúp ảnh chiếm chỗ chất lượng hơn, nhưng sẽ làm file có kích cỡ lớn hơn, và làm tăng kích cỡ trang. Giá trị lựa chọn nằm trong khoảng từ 1 đến 20.

Generate LQIP In Background (tạo ảnh LQIP trong chế độ nền)

  • Mặc định: ON

Khi lần đầu trang được ghé thăm, các ảnh LQIP phải được tạo. Nếu cái đặt này để là ON, quá trình tạo sẽ diễn ra trong chế độ background thông qua hàng đợi cron. Các cài đặt cho Responsive Paceholder sẽ được dùng cho đến khi quá trình tạo LQIP hoàn thành.

Nếu tùy chọn này được để là OFF, ảnh giữ chỗ sẽ được tạo trong khoảng thời gian mà khách ghé thăm đợi. Điều này có thể làm chậm trang cho lượt ghé thăm đầu tiên.

Lazy Load iframes

  • Mặc định: OFF

Cài đặt này hoạt động chính xác như Lazy Load Images, chỉ cho các iframe chứ không phải cho ảnh. iframe điển hình là video (ví dụ YouTube).

Inline Lazy Load Images Library (nội tuyến thư viện lazy load ảnh)

  • Mặc định: OFF

Lazy Load yêu cầu một thư viện JavaScript cho ảnh để thực hiện nhiệm vụ. Khi cài đặt này được để là OFF, thư viện JS sẽ được gọi thông qua yêu cầu riêng. Khi cài đặt này là ON, thư viện JS sẽ được nội tuyến trong HTML.

Để tùy chọn là ON có thể cải thiện tốc độ trang trên các dịch vụ kiểm tra như Pingdom, GTmetrix, và PageSpeed, tuy nhiên nó sẽ làm cho kích cỡ trang của bạn lớn hơn.


Tab Media Excludes (loại trừ các tài nguyên đa phương tiện)

loại trừ tài nguyên đa phương tiện

Lazy Load Image Excludes (loại trừ ảnh lazy load)

  • Mặc định: empty string (không điền gì)

Đôi khi có các ảnh mà bạn muốn tải ngay lập tức bất kể nó nằm ở đâu trên màn hình. Nếu thế bạn hãy thêm nó ở phần này, mỗi cái một dòng. Bạn có thể sử dụng URI đầy đủ hoặc một phần chuỗi. Một phần chuỗi có thể hữu ích nếu bạn có một thư mục các ảnh cần phải tải ngay lập tức. Đừng sử dụng wildcards ở đây.

Lazy Load Image Class Name Excludes (loại trừ các ảnh cần lazy load dựa theo tên class)

  • Mặc định: empty string (không điền gì)

Các ảnh bao gồm tên các class này sẽ không lazy load (tức là nó sẽ tải ngay lập tức như thông thường). Cả chuỗi đầy đủ lẫn một phần đều có thể dùng được. Mỗi cái một dòng.

Lazy Load Image Parent Class Name Excludes (loại trừ lazy load ảnh có cha là tên class này)

  • Mặc định: empty string (không điền gì)

Các ảnh mà có thẻ cha gồm các tên class này sẽ không được lazy load. Cả chuỗi đầy đủ và một phần đều có thể sử dụng được. Mỗi cái một dòng.

Lazy Load iframe Class Name Excludes (loại trừ iframe không cho lazy load dựa trên tên class)

  • Mặc định: empty string (không điền gì)

Các iframe bao gồm các tên class này sẽ không được lazy load. Cả chuỗi đầy đủ và một phần đều có thể sử dụng. Mỗi cái một dòng.

Lazy Load iframe Parent Class Name Excludes (loại trừ lazy load iframe có cha là tên class này)

  • Mặc định: empty string (không điền gì)

Các iframe có thẻ cha chứa các tên class này sẽ không được lazy load. Cả chuỗi đầy đủ và một phần đều có thể sử dụng được. Mỗi cái một dòng.

Lazy Load URI Excludes (loại trừ lazy load theo URI)

  • Mặc định: empty string (không điền gì)

Các ảnh và iframe trên website được liệt kê ở đây sẽ không được lazy load. Mỗi URI một dòng. Một phần chuỗi cũng có thể dùng. Các URI sẽ được so sánh với biến máy chủ REQUEST_URI. Để chỉ phần đầu của chuỗi, bạn thêm ^ vào trước chuỗi. Để khớp chính xác, thêm $ vào cuối chuỗi.

Giả sử bạn có các URI sau:

  1. /recipes/baking/
  2. /recipes/baking/cakes
  3. /recipes/baking/brownies
  4. /popular/recipes/baking/

Chuỗi /recipes/baking/ sẽ khớp với cả bốn URIs.

Chuỗi /recipes/baking/$ sẽ khớp với URI #1 (bởi vì $ có nghĩa là khớp chính xác).

Chuỗi ^/recipes/baking sẽ khớp với cái #1, #2, và #3 (bởi vì ^ có nghĩa là chỉ định phần đầu của chuỗi URI).


Tab Discussion Settings (cài đặt phần thảo luận)

các cài đặt cho phần thảo luận

Gravatar Cache

  • Mặc định: OFF

Các ảnh Gravatar có thể được cache cục bộ, nếu cài đặt này được để là ON. Chú thích của người dịch: Điều này giúp bạn hạn chế kết nối ra máy chủ bên ngoài và giảm ảnh hưởng của việc đứt cáp rất hay xảy ra ở Việt Nam và có khi kéo dài cả tháng.

Gravatar Cache Cron

  • Mặc định: OFF

Để là ON để làm mới cache Gravatar sử dụng cron job.

Gravatar Cache TTL

  • Mặc định: 604800

Cài đặt này chỉ định cụ thể khoảng thời gian (tính theo giây) mà ảnh Gravatars nên được cache. Bất cứ giá trị nào lớn hơn 3600 đều hợp lệ. Thời gian 604800 giây tương ứng với một tuần. Bạn có thể để giá trị này là một tháng (2419200) hoặc ba tháng (7257600) vì người dùng hiếm khi thay đổi ảnh đại diện Gravatar.


Tab Tuning Settings (điều chỉnh các cài đặt)

điều chỉnh sâu hơn cho các cài đặt liên quan đến CSS và JS

Combined CSS Priority (ưu tiên CSS đã được gộp)

  • Mặc định: OFF

Thông thường, CSS kết hợp (gộp) sẽ được tải sau các file CSS ngoài. Đó là vì CSS cục bộ kết hợp có nhiều khả năng có các tùy chỉnh cần được tải sau CSS cơ sở (base CSS). Bật tùy chọn này nếu bạn có lý do hợp lý để tải CSS kết hợp trước các file CSS khác.

CSS Excludes (không bao gồm CSS nào)

  • Mặc định: empty string (không điền gì)

Nếu bạn bật rút gọn, gộp, hoặc push CSS trong tab CSS Settings, bạn có thể loại trừ một số CSS ở đây. Thêm bất cứ file CSS nào ở đây (mỗi cái một dòng) mà bạn muốn loại trừ khỏi các chức năng tối ưu hóa. Bạn có thể thêm URL đầy đủ hoặc một phần chuỗi. Không cần sử dụng wildcard trong chuỗi một phần (partial strings).

Combined JS Priority (ưu tiên cho JS gộp)

  • Mặc định: OFF

Thông thường, JS gộp được tải sau các file JS bên ngoài. Bật tùy chọn này (ON) nếu bạn có lý do để tải JavaScript gộp trước các file JS khác.

JS Excludes (loại trừ file JS)

  • Mặc định: empty string (không điền gì)

Nếu bạn bật rút gọn, gộp, hoặc push JavaScript trong tab JavaScript Settings, bạn có thể loại trừ một số JS ở đây. Thêm bất cứ file JS nào ở đây (mỗi cái một dòng) mà bạn muốn loại trừ khỏi các chức năng tối ưu hóa. Bạn có thể thêm URL đầy đủ hoặc một phần chuỗi. Không cần sử dụng wildcard trong chuỗi một phần (partial strings).

Max Combined File Size (kích cỡ file kết hợp lớn nhất)

  • Mặc định: 2MB

Kích thước file lớn hơn dẫn đến việc cần ít file gộp hơn được tạo ra. Điều này tốt cho điểm số trang của bạn (page score), nhưng cần lưu ý điều này: nếu việc kết hợp file cho kết quả file quá lớn, nó sẽ là nguyên nhân gây nặng bộ nhớ. Chúng tôi coi 2MB là điểm mốc tốt. Điều chỉnh nó tăng hoặc giảm để phù hợp nhất với nhu cầu website của bạn.

Critical CSS Rules (các quy tắc dành cho critical CSS)

  • Mặc định: empty string (không điền gì)

Khi Load CSS Asynchronously được bật trong tab CSS Setting, critical CSS được tạo tự động. Bạn có thể muốn tạo ra một vài định nghĩa bổ sung cần phải tải trước để style chính xác cho nội dung thuộc màn hình đầu tiên. Nhập các quy tắc này ở đây dưới dạng CSS thuần túy, giống như chúng xuất hiện trong stylesheet của bạn. Chúng sẽ được nối vào CSS được tạo ra.

JS Deferred Excludes (loại trừ JS defer)

  • Mặc định: empty list (danh sách trống)

Nếu Load JS Deferred được bật trong tab JS Settings, và bạn có một số file JavaScript không muốn defer hãy liệt kê chúng ở đây, mỗi cái một dòng. Bạn có thể liệt kê URI đầy đủ hoặc một phần chuỗi để so khớp (không cần dùng wildcards).

URI Excludes (loại trừ URI)

  • Mặc định: empty string (không điền gì)

Nếu có các trang bạn muốn loại trừ khỏi quá trình tối ưu hóa, bạn có thể liệt kê chúng ở đây. Bạn có thể sử dụng đường dẫn đầy đủ, hoặc một phần chuỗi.

Role Excludes (loại trừ dựa trên vai trò)

  • Mặc định: không check

Có thể có các vai trò người dùng mà bạn muốn loại trừ khỏi bất cứ kiểu tối ưu hóa nào. Lấy ví dụ, nếu bạn là admin, và muốn kiểm tra tính năng mới, bạn có thể muốn loại trừ vai trò administrator cho đến khi thử nghiệm của bạn được tiến hành xong.

Comments are closed.

Back to Top