Categories Cache CDN Litespeed

Hướng dẫn cài đặt plugin LiteSpeed Cache (p2)

cài đặt LiteSpeed Cache phần 2

Tiếp theo phần 1 về cài đặt plugin LiteSpeed Cache chuyên sâu khá dài, tôi tiếp tục dịch phần hai. Bài viết gốc của tác giả Johnny Nguyen. Tôi có bổ sung thêm thông tin một số chỗ khi thấy cần thiết để bạn đọc hiểu các tùy chọn tốt hơn, từ đó đưa ra được các lựa chọn chính xác, phù hợp với từng website.

Phần này là phần mà tôi có nhiều quan điểm khác biệt với Johnny, chẳng hạn anh ấy không bao giờ thích rút gọn và gộp CSS/JS, tạo critical CSS cũng như lazy load ảnh. Trong khi tôi thì trong đa số website lại thích làm vậy. OK, mọi thứ đều ổn, mỗi người đều có quan điểm riêng, quan trọng là bạn cần hiểu rõ các tùy chọn có ý nghĩa như thế nào rồi tự quyết định.

CDN > CDN Settings

cài đặt CDN
  • QUIC.cloud CDN – Tôi nghĩ mọi người nên đăng ký tài khoản miễn phí QUIC.cloud (QC) cho dù bạn có bật nó hay không. Cá nhân tôi thì không bật. QC có các tính năng sau: caching HTML trên CDN (cần thiết nếu máy chủ của bạn chậm hoặc/và bạn không có máy chủ LiteSpeed), tối ưu hóa ảnh (nếu bạn muốn sử dụng công cụ nén của LSC thay vì plugin ShortPixel/Imagify/vân vân), tạo Critical CSS (tôi không khuyến khích CCSS), CDN cho các tài nguyên tĩnh (nếu bạn hiện không sử dụng dịch vụ CDN nào khác), vân vân.
  • Sử dụng CDN Mapping – Để ON nếu bạn sử dụng CDN (những ai đang dùng Cloudflare hoặc QC nên bỏ qua lựa chọn này).
  • CDN URL – Nhập vào URL CDN và kiểu file bạn muốn bao gồm. Đường dẫn phải là URL đầy đủ, bao gồm cả http:// hoặc https://. Bạn có thể sử dụng nhiều CDN cùng lúc (chẳng hạn như bạn sử dụng dịch vụ A cho ảnh, dịch vụ B cho video). Nếu bạn sử dụng nhiều CDN cho cùng tài nguyên, nó sẽ thực hiện lựa chọn ngẫu nhiên. Chú thích của người dịch: nói riêng về CDN cho video tôi thấy BunnyCDN được mọi người khen có chất lượng tốt và giá vừa phải. Dùng CDN cho video cũng là cách tăng tốc video tốt nhất tuy nhiên không rẻ. Nếu bạn vẫn dùng YouTube, plugin WP YouTube Lyte có thể là lựa chọn tốt để giúp tăng tốc video mà vẫn đảm bảo SEO.
  • Include File Types – nói thêm về cái này, mặc định nó có các định dạng sau: aac, css, eot, gif, jpeg, js, jpg, less, mp3, mp4, ogg, otf, pdf, png, svg, ttf, woff. Nếu website của bạn sử dụng các định dạng khác thì bạn cần thêm vào đây để nó được phục vụ qua CDN. Chẳng hạn nếu bạn có định dạng ảnh mới WebP, bạn cần thêm .webp vào.
  • HTML Attribute To Replace (thuộc tính HTML thay thế) – Tôi không động đến phần này. Thêm nếu bạn thấy cần thiết.
  • Original URLs (URL gốc) – bạn thường không cần thay đổi điều này trừ khi trang của bạn trải dài ra nhiều URL. Lấy ví dụ một số trang multi-site hoặc trang đa ngôn ngữ sẽ sử dụng nhiều tên miền hoặc tên miền phụ.
  • Included Directories (bao gồm các thư mục) – mặc định là đã bao gồm rồi (wp-content, wp-includes) nhưng bạn cứ thoải mái thêm các thư mục khác mà bạn muốn.
  • Exclude Path (đường dẫn loại trừ) – được dùng để loại trừ bất cứ thư mục nào nằm trong thư mục included kể trên. Thường tôi để trống phần này.
  • Load jQuery Remotely (tải jQuery từ các máy chủ khác) – Tôi để nó là OFF nhưng bạn có thể để nó là ON nếu thấy tùy chọn đó phù hợp. Chú thích của người dịch: bạn có thể để là Google hoặc CDNJS, khi ấy website của bạn sẽ lấy jQuery từ đây chứ không phải từ máy chủ hay CDN của bạn nữa. Nói chung lời khuyên là thế này, nếu máy chủ của bạn đủ mạnh và gần người dùng thì nên để OFF. Nếu máy chủ gốc của bạn ở xa người dùng và bạn muốn tiết kiệm tiền CDN thì nên dùng (chọn Google hoặc CDNJS). Ngoài ra, tùy chọn này chỉ có tác dụng khi bạn không gộp jQuery vào một file JS chung (tính năng combine JS)…Ngày xưa việc tải jQuery từ thư viện dùng chung còn có thể có tác dụng cache phía trình duyệt khi mà người dùng trước đó đã vào website nào đấy khác cũng sử dụng thư viện dùng chung này. Tuy nhiên việc Chrome thay đổi cách cache tài nguyên của bên thứ ba, tác dụng này sẽ không còn nữa (Safari thì áp dụng lâu rồi).
  • Cloudflare API – chỉ dành cho người dùng của Cloudflare. Nhập email, khóa API toàn cầu (global API key), và tên miền. Bằng cách này, LSC sẽ purge (xóa) cache của Cloudflare khi LSC purge cache. Chú thích của người dịch: nếu bạn đã dùng CDN rồi thì không nên dùng Cloudflare nữa vì như vậy sẽ là CDN 2 lần, tốn kém không cần thiết hoặc không đem lại cải thiện có ý nghĩa về mặt tốc độ.

CDN > Manage

Phần này dùng để quản lý CDN của Cloudflare hoặc QUIC.cloud. Nếu bạn không dùng thì không cần quan tâm. Để quản lý QUIC.cloud bạn cần đăng ký tài khoản ở đây và thực hiện các tùy chọn trên đó.

  • Cloudflare – tôi không động đến phần này.
  • Development – đây là cách tiện lợi để bạn vô hiệu hóa Cloudflare mà không cần phải đăng nhập và vã mồ hồi với xác thực 2 yếu tố/2-FA security (haha)
  • Cloudflare Cache – cách tiện lợi để xóa (purge) cache của Cloudflare (nhưng không xóa LSC cache của bạn), cũng có ích khi bạn cập nhật một số ảnh hoặc tài nguyên nào khác và muốn thay đổi này hiển thị ngay lập tức.

Image Optimization > Image Optimization Summary

Dịch vụ tối ưu hóa ảnh miễn phí của LiteSpeed thật tuyệt vời và dễ dùng! Nó thực sự làm tôi kinh ngạc. Rất dễ sử dụng. Có đầy đủ tính năng mà các plugin nén ảnh chất lượng hàng đầu hiện có. Và LiteSpeed Cache làm công việc đó hoàn toàn MIỄN PHÍ!

  • Gather Image Data / Send Optimization Request (thu thập dữ liệu hình ảnh / gửi yêu cầu tối ưu hóa) – click vào phần này để yêu cầu tối ưu hình ảnh miễn phí.
  • Pull Images (kéo ảnh) – khi ảnh nén của bạn đã sẵn sàng, click vào đây để tải chúng về trang web của bạn. (Ảnh gốc của bạn sẽ được đưa vào thư mục backup; tôi đoán là nó nằm ở đâu đó trong “wp-content/uploads”).
  • Clean Up Unfinished Data (dọn dẹp dữ liệu chưa hoàn thành) – click vào đây khi một số quá trình nén bị tắc nghẽn và không bao giờ hoàn thành, sau đó bạn có thể gửi các yêu cầu khác.
  • Calculate Backups Disk Space (tính toán không gian dữ liệu dùng vào việc backup) – công cụ tiện lợi này nói cho bạn biết thư mục backup hiện chiếm bao nhiêu dung lượng. Bạn có thể tải chúng xuống từ máy chủ của bạn về máy tính cá nhân và xóa nó trên server để tiết kiệm không gian.
  • Remove Original Image Backups (loại bỏ ảnh backup gốc) – chỉ làm điều này sau khi bạn backup sử dụng tùy chọn trước đó.
  • Rescan New Thumbnails (quét lại các thumbnails mới) – nếu bạn thực hiện thay đổi với các ảnh đã tồn tại trước đó, click vào đây để LSC nhận ra chúng.
  • Use Original Files & Use Optimized Files (sử dụng file gốc & sử dụng file đã được tối ưu hóa) – tính năng này mới hay làm sao! Bạn có thể chuyển qua lại để thấy được sự khác biệt. Hoặc nếu bạn muốn hoàn nguyên về như cũ nhanh chóng. Nếu bạn muốn hoàn nguyên các ảnh cụ thể, bạn có thể thực hiện điều đó từ thư mục media.
  • Destroy All Optimization Data (phá hủy tất cả dữ liệu tối ưu hóa) – trong trường hợp bạn không thích kết quả nén của LSC và bạn muốn quay lại dùng các ảnh gốc.

Image Optimization > Image Optimization Settings

  • Auto Request Cron – để nó là ON nếu bạn muốn trang của bạn tự động yêu cầu tối ưu hóa cho tất cả các ảnh mới được thêm vào.
  • Auto Pull Cron – để nó là ON nếu bạn muốn tự động tải tất cả các ảnh đã tối ưu về trang của bạn. Tôi cho rằng tùy chọn này và tùy chọn ngay bên trên nên để giống nhau (cho dù là ON hay OFF).
  • Optimize Original Images (tối ưu hóa các ảnh gốc và lưu file backup trong cùng thư mục) – có lẽ nên để ON.
  • Remove Original Backups (xóa ảnh backup gốc) – OFF (tức là KHÔNG xóa) trừ khi bạn chắc chắn 100% rằng bạn hài lòng với chất lượng ảnh mà bạn để LiteSpees Cache tối ưu. Khi tùy chọn này được bật nó sẽ tự động xóa ảnh gốc của bạn sau khi tối ưu (và bạn không thể khôi phục lại ảnh gốc được nữa).
  • Optimize WebP Versions (tối ưu định dạng ảnh webp) – tôi để nó OFF, nhưng bạn cứ thoải mái thử nghiệm với tùy chọn ON nếu bạn có nhiều thời gian. PS: tùy chọn này trong phiên bản mới nhất hiện không còn.
  • Optimize Losslessly (tối ưu không mất chất lượng) – đây là cách nén ảnh an toàn khi chất lượng ảnh không bị suy giảm chút nào nhưng kích cỡ ảnh không giảm được nhiều. Dù vậy các bức ảnh rất lớn sẽ vẫn nhận được một số lợi ích nào đấy.
  • Preserve EXIF data (giữ lại dữ liệu EXIF) – OFF, trừ khi bạn cần thông tin này hoặc muốn hiển thị chúng trên giao diện bên ngoài (frontend) thông qua plugin. EXIF là mấy thông tin kiểu như ngày tháng, địa điểm chụp, loại máy…thường được gắn kèm với ảnh chụp.
  • Create WebP Versions (tạo ảnh định dạng webp) – cá nhân tôi không sử dụng định dạng WebP nhưng nó thực sự cho hệ số nén tốt và kích cỡ file ảnh nhỏ hơn so với JPEG/PNG. Để nó là ON nếu bạn muốn. Nhược điểm nếu bạn bật tùy chọn này có lẽ là trang của bạn sẽ phải tạo nhiều ảnh hơn và chiếm không gian ổ cứng…hoặc ảnh trên trang của bạn sẽ không dễ tải về để xem trên các thiết bị khác (mà không hỗ trợ WebP).
  • Image WebP Replacement (thay thế ảnh thông thường bằng định dạng webp). Mặc định để OFF. Tôi cho rằng bạn nên để tùy chọn này là ON nếu bạn có tạo định dạng ảnh WebP ở tùy chọn trên.
  • WebP Attribute To Replace (thay thế thuộc tính của webp) – đây là cách hay để điều chỉnh các ảnh nào sẽ được thay thế bằng định dạng WebP. Đây là cách khác để giải quyết vấn đề lưu trữ của máy chủ nếu bạn muốn nhận được lợi ích của WebP chỉ từ một số ảnh (chẳng hạn như chỉ từ các ảnh thực sự lớn, và có thể là chúng sử dụng hiệu ứng trong suốt?)
  • WebP For Extra srcset – đây là cách hay để bạn kích hoạt thay thế hình ảnh WebP cho các ảnh không được quản lý thông qua thư viện đa phương tiện (media library) của WordPress.
  • WordPress Image Quality Control (kiểm soát chất lượng ảnh WordPress) – sử dụng mặc định 82, hoặc kiểm tra các tùy chọn cao hơn hoặc thấp hơn nếu bạn muốn.

Chú thích của người dịch: định dạng ảnh WebP rất thú vị, nó là định dạng ảnh có dung lượng thấp nhất hiện nay khi so với ảnh JPG, PNG,…với chất lượng tương đương. Tuy nhiên vấn đế của WebP là nó không được hỗ trợ trên tất cả các trình duyệt, đặc biệt là Safari (iPhone, MAC), do vậy người quản trị web phải sử dụng song song hai định dạng và cần bổ sung mã phát hiện trình duyệt để đưa ra định dạng ảnh thích hợp cho từng trình duyệt. Điều này sẽ tương đối rắc rối khi triển khai trên NGINX, nhưng may cho chúng ta LiteSpeed Cache lại làm điều này rất tốt. Cá nhân tôi ở thời điểm hiện tại không mặn mà lắm với WebP dù ngày xưa bỏ công tìm hiểu nó rất nhiều (nếu Safari cũng hỗ trợ WebP thì quan điểm của tôi sẽ khác) vì nó có thể đem đến các rắc rối không lường trước được.

Tin mới: Safari đã bắt đầu hỗ trợ webp!

Page Optimization > CSS Settings

Phần đa các bạn sẽ nhận thấy nhiều tùy chọn thú vị trong mục này này đã có ở plugin caching/tối ưu hóa khác rồi. Lời khuyên của tôi là hãy cẩn thận! hầu hết các vấn đề liên quan đến caching có nguyên nhân từ những lựa chọn này.

Vì một số lý do, trong đa số trường hợp các bạn không nên tối thiểu hóa/rút gọn (minifying) hoặc kết hợp (combining) các file CSS/JS. Minifying làm máy chủ phải hoạt động nhiều hơn và làm chậm lượt ghé thăm đầu (initial visit). Nó sẽ tốt nếu bạn có rất nhiều người truy cập.

Nhưng nếu bạn vẫn muốn rút gọn mã thì đừng dùng tính năng có sẵn trong plugin này…tốt hơn là thực hiện điều đó thông qua Cloudflare hoặc CDN khác- vốn đã được xử lý trên máy chủ của họ ở cấp độ DNS. Nếu trang của bạn đã gọn gàng rồi (lean already), rút gọn sẽ không đem lại ảnh hưởng tích cực nào đáng chú ý cả. Kết hợp CSS hoặc JS thực sự không nên làm bởi vì nó thường gây ra lỗi và cũng chẳng đem lại khả năng cải thiện tốc độ đáng kể.

PS: bạn nào muốn tham khảo tài liệu chính thức của LiteSpeed về phần Page Optimization thì tham khảo bài này.

  • CSS Minify (tối thiểu hóa CSS) – OFF. Sử dụng Cloudflare hoặc từ dịch vụ CDN nếu bạn muốn.
  • CSS Combine (kết hợp CSS) – OFF là an toàn nhất. Nếu bạn muốn bật, hãy kiểm tra cẩn thận!
  • CSS HTTP/2 Push – OFF là an toàn nhất, dù bạn có để ON nó cũng không tạo ra nhiều khác biệt trên đa số các trang.
  • Load CSS Asynchronously – để nó là OFF nếu không bạn sẽ gặp vấn đề FOUC. Để ON chắc chắn sẽ giúp bạn cải thiện điểm số Pingdom/GTmetrix nhưng sẽ gây ảnh hưởng xấu đến trải nghiệm người dùng.
  • Generate Critical CSS – OFF! tôi chẳng hào hứng gì với critical CSS.
  • Generate Critical CSS In Background – tùy thuộc vào phần trên bạn chọn là gì, hai cái nên để giống nhau.
  • Separate CCSS Cache Post Types – nếu sử dụng critical CSS, bạn nên liệt kê tất cả các kiểu post mà nó có thiết kế và CSS riêng (ví dụ tốt đó là trang sản phẩm, thư mục của WooCommerce, trang kèm bảng giá, vân vân).
  • Separate CCSS Cache URIs – được sử dụng tương tự tùy chọn trước nhưng cho các URL riêng lẻ. Có thể được dùng cho bất kỳ trang cụ thể nào sử dụng CSS khác từ trang khác.
  • Inline CSS Async Lib – OFF! CSS thực chất nên chặn hiển thị (render-blocking) nếu không bạn sẽ gặp các vấn đề về FOUC.
  • Font Display Optimization (tối ưu hóa hiển thị font) – dưới quan điểm về giao diện người dùng của tôi, bạn chỉ nên sử dụng Default hoặc Block. Không bao giờ nên dùng Swap hoặc Fallback, vì chúng là nguyên nhân gây ra vấn đề FOUT!

Page Optimization > JS Settings

  • JS Minify (giảm thiểu JS) – OFF. Sử dụng Cloudflare hoặc từ CDN của bạn nếu bạn thích tính năng này.
  • JS combine (kết hợp JS) – để OFF là an toàn nhất. Nếu bạn muốn bật, hãy kiểm tra cẩn thận!
  • JS HTTP/2 Push – để OFF là an toàn nhất, để ON cũng không tạo ra nhiều khác biệt với hầu hết website.
  • Load JS Deferred – OFF là an toàn nhất. Một số JS cần dùng cho các tài nguyên quan trọng trên màn hình đầu tiên và không nên defer.
  • Load Inline JS – để như MẶC ĐỊNH là an toàn nhất. Defer hoặc trì hoãn cho đến khi DOM tải xong có thể giúp cải thiện điểm số trang hoặc giúp các JS được tối ưu hóa khác hoạt động bình thường…nhưng nó cũng có thể làm thay đổi thiết kế hoặc chức năng của website.
  • Exclude JQuery – ON là an toàn nhất. Bạn có thể để là OFF (cho phép trình tối ưu hóa JS áp dụng với cả thư viện jQuery) nếu bạn kiểm tra cẩn thận và thấy website không gặp vấn đề gì.

Page Optimization > Optimization Settings

  • CSS/JS Cache TTL – để như mặc định là đủ an toàn. Sử dụng quãng thời gian ngắn hơn nếu bạn thực hiện nhiều thay đổi. Hoặc dài hơn nếu bạn ít thay đổi thiết kế.
  • HTML Minify – OFF. Thực hiện điều này thông qua Cloudflare hoặc CDN nếu bạn muốn.
  • Inline CSS Minify – OFF. Không tạo ra nhiều khác biệt.
  • Inline JS Minify – OFF. Không tạo ra nhiều khác biệt.
  • DNS Prefetch – mẹo hay để preloading DNS cho các tên miền bên ngoài, vì thế chúng có thể tải nhanh hơn khi bạn click vào URL hoặc khi trang của bạn tải các tài nguyên bên ngoài từ chúng. Bạn không biết đặt cái gì vào? Đơn giản là mở trang web của bạn trong Chrome Incognito > Inspect > Sources…giờ gõ tất cả các nguồn là tên miền bên ngoài mà bạn thấy. Tất cả Google Analytics và các lời gọi font, tài nguyên mạng xã hội, dịch vụ chat, CDN, vân vân.
  • DNS Prefetch Control – tự động tìm nạp trước (prefetch) tất cả tên miền được gọi từ CSS và JS. Tôi thấy đây cũng là ý tưởng hay nhưng không cần thiết nếu tôi đã thực hiện gọi chúng bằng cách nhập thủ công tên miền từ tùy chọn bên trên.
  • Remove Comments (loại bỏ các chú thích trong file CSS/JS) – Để OFF tôi thấy an toàn hơn. Đằng nào thì nó cũng không tạo ra sự khác biệt đáng kể nào về tốc độ. Trong khi nó chủ yếu được dùng để giúp bạn cải thiện điểm số hư ảo Pingdom/GTmetrix.
  • Remove Query Strings – theo quan điểm của tôi, nó không đem lại cải thiện nào về tốc độ khi bạn bật tính năng này (hiện tại caching hầu như có thể xử lý chuỗi truy vấn). Hầu hết mọi người bật nó để có được điểm số kiểm tra tốt hơn. Tôi khuyên bạn nên để là OFF nếu bạn vẫn đang điều chỉnh thiết kế, nếu không bạn sẽ gặp phải vấn đề CSS/JS cũ.
  • Load Google Fonts Asynchronously (tải Google Font theo kiểu không đồng bộ) – bạn hãy kiểm tra cẩn thận. Tôi không thấy sự khác biệt đáng kể nào bởi vì tôi đoán rằng hầu hết các font Google phổ biến đã được cache sẵn trong trình duyệt của người dùng rồi khi họ ghé thăm các trang web khác.
  • Remove Google Fonts (loại bỏ Google Fonts) – tôi có chút khó hiểu tại sao tùy chọn này lại tồn tại. Thông qua tài liệu chính thức của LS thì nó dành cho những ai đã có sẵn font tải từ host cục bộ và muốn chắc chắn tránh được bất kỳ lời gọi Google font bên ngoài nào. Nhưng một lần nữa, tôi nghĩ bất cứ ai có đủ kỹ năng để tải font theo kiểu cục bộ thì cũng dễ dàng loại bỏ được lời gọi Google font.
  • Remove WordPress Emoji (loại bỏ biểu tượng mặt cười, mặt khóc trong WordPress) – an toàn thì bạn để nó là ON. Nó sẽ loại trừ các lời gọi emoji JS, cái không cần thiết vào thời điểm hiện tại vì các trình duyệt hiện đại có thể tự nó render emoji.

Page Optimization > Media Settings

  • Lazy Load Images – tải các ảnh chỉ khi trình duyệt cuộn chuột đến gần chúng. Tôi (Johnny) thích để là OFF vì tôi ghét lazyload. (Cá nhân người dịch thì vẫn thích lazy load, và áp dụng nó trên hầu hết các blog, chỉ các trang thương mại điện tử thì tôi không dùng. Riêng lazy load ảnh tôi thích dùng plugin Fying Images hơn, nó cho phép điều chỉnh ngưỡng kích hoạt lên đến 3000px, giúp giảm ảnh hưởng tối đa đến trải nghiệm người dùng).
  • Basic Image Placeholder – đây là ảnh mà người dùng thấy trước khi ảnh thực được tải về. Thường sử dụng ảnh base64.
  • Responsive Placeholder – tôi khuyến nghị để là ON nếu bạn sử dụng lazy load ảnh. Nó chiếm giữ không gian cho các ảnh vì thế layout không nhảy, dịch chuyển khi người dùng cuộn chuột. Nhưng những người bật quảng cáo có thể thích để OFF hơn vì người dùng của họ có khả năng bấm nhầm vào quảng cáo!
  • Responsive Placeholder SVG – ảnh SVG được dùng làm ảnh giữ chỗ cho bạn.
  • Responsive Placeholder Color – có lẽ là màu xám hoặc cái gì đó không nhiễu. Chỉ cần đủ để người dùng của bạn biết cái sẽ đó sắp xuất hiện.
  • LQIP Cloud Generator – công nghệ ảnh chiếm chỗ nâng cao hiển thị phiên bản ảnh chất lượng rất thấp của ảnh (LQIP)-cái mà sẽ được thay thế bằng ảnh chất lượng cao khi người dùng cuộn chuột xuống dưới. Nó rất hữu ích trong việc giúp các trang nặng ảnh tải nhanh hơn và giúp giảm sự phân tán của người đọc khi áp dụng lazy load ảnh.
  • LQIP Quality – sử dụng thiết lập mặc định là 4 hoặc bạn kiểm tra các cài đặt khác xem có tốt hơn không.
  • Generate LQIP In Background – bạn cần phải kiểm tra cả khi ON và OFF trên trang không được cache để xem nó sẽ cho ra kết quả như thế nào. ON có lẽ là lựa chọn an toàn hơn.
  • Lazy Load Iframes – ý tưởng tốt nếu bạn có iframe hoặc video được nhúng dưới màn hình đầu tiên.
  • Inline Lazy Load Images Library (nội tuyến thư viện Lazy Load ảnh) – tôi để nó là OFF (tôi cảm thấy cách này cho hiệu suất tốt hơn). Bạn có thể bật ON nếu bạn muốn loại bỏ yêu cầu HTTP cho mục đích cải thiện điểm số hoặc nếu trang của bạn được thiết kế rất gọn gàng.

Page Optimization > Media Excludes

  • Lazy Load Image Excludes (loại trừ ảnh không cần lazy load) – loại trừ bất kỳ ảnh nào để nó không cần lazy load nữa. Có thể là ý tưởng tốt cho các ảnh ATF (ảnh nằm trong màn hình đầu tiên ví dụ logo, các ảnh slide đầu bài) hoặc những trang mà người dùng cuộn chuột nhanh (quick scrolles).
  • Lazy Load Image Class Name Excludes (loại trừ ảnh để nó không cần lazy load dựa trên tên class của ảnh) – một cách thông minh để loại trừ ảnh không cần lazy-load nữa bằng cách liệt kê tên class CSS của nó ở đây.
  • Lazy Load Image Parent Class Name Excludes (loại trừ ảnh để nó không cần lazy load dựa trên tên class cha của ảnh) – cách thông minh để loại trừ ảnh không cần lazy load mà không có class đính kèm. Thay vì thế bạn loại trừ bằng cách sử dụng class cha của chúng.
  • Lazy Load Iframe Class Name Excludes – đây là cách hay để loại trừ video nào đó để nó không cần lazy load (chẳng hạn cái ở gần phần đầu của trang). Hoặc cái mất nhiều thời gian để tải và bạn không muốn nó bị trì hoãn.
  • Lazy Load Iframe Parent Class Name Excludes – đây là cách tiện lợi để loại trừ các iframe không có class CSS đính kèm. Tương tự như mẹo với ảnh.
  • Lazy Load URI Excludes – cách thức hay để vô hiệu hóa chức năng lazy load trên một số trang. Chẳng hạn với trang landing page nào đấy mà bạn muốn ảnh và video tải càng sớm càng tốt (ASAP/As Soon As Possible).

Page Optimization > Discussion Settings

tối ưu Gravatar
  • Gravatar Cache – đây là tính năng tuyệt vời cho các trang có hàng trăm bình luận. Nhưng không cần thiết (và quan điểm cá nhân tôi là không nên dùng) nếu phần lớn bài viết trên trang của bạn không có nhiều bình luận và/hoặc không có nhiều lượt truy cập. Chú thích của người dịch: riêng trong bối cảnh internet Việt Nam thường xuyên đứt cáp kéo dài việc kéo ảnh về host của bạn sẽ giúp tăng tốc tương đối tốt, ngay cả khi trang có ít bình luận.
  • Gravatar Cache Cron – nếu bạn bật caching Gravatar thì bạn cũng nên để cái này là ON.
  • Gravatar Cache TTL – mặc định là 1 tuần cũng ổn nhưng tôi thích để nó là 3 tháng hơn. Tôi cảm thấy mọi người ít khi thay đổi Gravatar của họ.

Chú thích của người dịch: Gravatar là ảnh đại diện được dùng mỗi khi họ để lại bình luận trên WordPress (sử dụng email để biết). Avatar này ở Việt Nam chủ yếu có ở anh em biết một chút về công nghệ. Chị em hầu như chẳng bao giờ dùng, vì sẽ phải đăng ký trên gravatar.com. Những trang có nhiều bình luận và bạn thích bố cục đẹp mắt, có thể dùng plugin wpDiscuz.

Page Optimization > Tuning Settings

  • Combined CSS Priority – thường để là OFF và không nên áp dụng trừ khi bạn cần sử dụng cả “kết hợp CSS” và “không kết hợp CSS” (tạo bởi việc loại trừ kết hợp một số CSS). Khi bật (ON) tính năng này sẽ tải “CSS kết hợp / Combined CSS” trước khi tải “CSS không kết hợp / Uncombined CSS” thay vì để như mặc định (sẽ ngược lại). Cái này tùy thuộc vào bạn xem kịch bản nào là phù hợp nhất. Nhìn chung chúng ta muốn tải critical CSS trước rồi mới tải CSS khác sau. Nhưng có những thời điểm chúng ta có các lớp CSS chồng chéo nhau và muốn đảm bảo rằng layer cuối cùng tải về phải chính xác để tránh bất kỳ kiểu định dạng không mong muốn nào. Điều này hoàn toàn phụ thuộc vào chiến lược của bạn để tự quyết xem có nên sử dụng cả “CSS kết hợp” và “không kết hợp” hay không. Từ đó quyết định xem CSS nào nên kết hợp hoặc không, và cuối cùng tính toán xem nên tải “CSS kết hợp” trước hay là tải “CSS không kết hợp” trước.
  • CSS Excludes – liệt kê tất cả các file CSS mà bạn không muốn rút gọn hoặc kết hợp. Bạn có thể liệt kê tên đầy đủ của chúng (chẳng hạn “elementor-builder.css”) hoặc một phần tên (ví dụ “elementor”).
  • Combined JS Priority – chức năng tương tự cái ở trên đầu nhưng là cho JS.
  • JS Excludes – liệt kê tất cả các file JS mà bạn không muốn rút gọn/kết hợp
  • Max Combined File Size – tôi chắc rằng phần cài đặt này có các sắc thái khác nhau. Về mặt cá nhân tôi không thích kết hợp CSS hoặc JS chút nào. Nhưng nếu bạn có làm, cách an toàn nhất là kết hợp tất cả vào một file. Nhưng nếu bạn muốn tiến hành sâu hơn nữa, bạn có thể giảm kích cỡ tối đa và cắt nó thành nhiều phần nhỏ hơn để xem xem liệu trình duyệt có xử lý nó nhanh hơn hay không. Tôi cho rằng nó có thể hữu ích trên các thiết bị cấu hình yếu hoặc tốc độ kết nối internet chậm chạp.
  • Critical CSS Rules – nếu bạn sử dụng tính năng “Load CSS asynchronously / Tải CSS không đồng bộ”, copy paste bất cứ quy tắc critical CSS nào vào đây để đảm bảo rằng chúng được tải trước tiên. Chú thích của người dịch: tính năng này rất giống với critical CSS miễn phí trên plugin Autoptimize, bạn có thể sử dụng trang này để lấy được critical CSS của trang.
  • JS Deferred Excludes – nếu sử dụng tính năng “Load JS Deferred / Trì hoãn tải JS”, bạn có thể loại trừ bất kỳ JS cụ thể nào ở đây để giữ chúng tải như bình thường (ý tưởng tốt là cho bất cứ file JS nào dùng để render nội dung quan trọng).
  • URI Excludes – liệt kê bất cứ URL nào ở đây mà bạn muốn loại trừ không cần tối ưu hóa trang. Ý tưởng tốt là liệt kê các trang bị hỏng thiết kế hoặc chức năng gây ra bởi các tối ưu hóa đó.
  • Role Excludes  – bạn có thể loại trừ tối ưu hóa cho những người dùng cụ thể nào đó đã đăng nhập. Bạn có khả năng không bao giờ sử dụng tính năng này ngoại trừ khi cần dùng vào một số mục đích thử nghiệm, kiểm tra nhất định.

Nếu đã đọc đến đây, mời bạn xem tiếp phần 3.

(Dịch từ bài viết: LiteSpeed Cache WordPress Plugin – UNOFFICIAL GUIDE của Johnny Nguyen/WPjohnny, người dịch: Nguyễn Đức Anh)

Back to Top