Giải thích các tùy chọn của plugin perfmatters (phần 7)

bởi Duc Anh Nguyen
preconnect

Bạn có thể xem phần 6 trong chuỗi bài giải thích các tính năng của plugin perfmatters.

1. DNS-prefetch

DNS prefetching cho phép bạn phân giải tên miền (thực hiện tìm kiếm DNS ở background / chế độ nền) trước khi người dùng click vào link, điều đó có thể cải thiện hiệu suất ít nhiều. Điều này được thực hiện bằng cách thêm thẻ rel=”dns-prefetch” vào phần header của trang WordPress.

<link rel="dns-prefetch" href="//domain.com">

Một vài ứng dụng phổ biến của DNS prefetching là URL liên quan đến CDN, Google fonts, Google Analytics hoặc Google Tag Manager, vân vân.

 <link rel="dns-prefetch" href="//cdn.domain.com">
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com">
 <link rel="dns-prefetch" href="//www.googletagmanager.com">

Bật DNS prefetching trong WordPress

DNS-Prefetch được hỗ trợ bởi tất cả các trình duyệt lớn, ngoại trừ iOS Safari, trình duyệt mặc định của Android, Opera mobile. Bạn có thể dễ dàng triển khai DNS prefetching bằng cách click vào tab “Extras” trong plugin perfmatters và thêm các tên miền vào, mỗi cái một dòng. Đừng thêm http:// hoặc https://, vì cái này chỉ thực hiện tìm kiếm DNS chứ không liên quan đến giao thức duyệt web là bảo mật hay là không.

DNS prefetching trong WordPress
DNS prefetching trong WordPress

Ngoài ra một số giao diện có thể chủ động thêm DNS prefetching từ trước cho một số tài nguyên như Google fonts rồi. Vì vậy bạn cần mở mã nguồn của trang và tìm các DNS prefetching đã có để tránh thêm thẻ hai lần không cần thiết.

2. Preconnect

Preconnect cho phép trình duyệt thiết lập kết nối sớm trước khi có yêu cầu HTTP, điều đó giúp loại bỏ độ trễ của các vòng lặp (round-trip latency) và tiết kiệm thời gian cho người dùng.

Preconnect là công cụ quan trọng trong bộ công cụ tối ưu hóa của bạn… nó có thể loại bỏ nhiều vòng lặp do các yêu cầu đến đường dẫn của bạn – trong một số trường hợp nó có thể giảm hàng trăm, thậm chí là hàng ngàn mili giây độ trễ của các yêu cầu.

lya Grigorik

Vài ví dụ điển hình trong việc sử dụng preconnect là CDN URL hoặc Google fonts:

 <link rel="preconnect" href="https://cdn.domain.com">
 <link rel="preconnect" href="https://fonts.gstatic.com">

Bật preconnect trong WordPress

Preconnect được hỗ trợ bởi hầu hết các trình duyệt hiện đại, ngoại trừ IE, Safari, iOS Safari, và Opera Mini.

Bạn có thể dễ dàng triển khai preconnect bằng cách click vào tab “Extras” trong plugin Perfmatters và thêm các tên miền vào, mỗi cái một dòng. Đây là ví dụ mẫu:

https://fonts.gstatic.com
Bật preconnect trong WordPress
Bật precoonect trong WordPress

Bạn không cần thêm fonts.googleapis.com bên dưới preconnect. Tại sao? Vì fonts.gstatic.com và fonts.googleapis.com liên quan trực tiếp với nhau. Google luôn luôn phục vụ các font của nó từ fonts.gstatic.com, và do đó bạn cần preconnect đến tên miền này, trong khi CSS sẽ được tải từ fonts.googleapis.com

CrossOrigin

Cài đặt CrossOrigin chỉ được dùng trong vài trường hợp đặc biệt, trong 99% trường hợp bạn không cần kiểm tra tùy chọn này.

Kiểm tra preconnect đã được thiết lập thành công hay chưa?

Bài viết này của Andy Davies hướng dẫn bạn cách kiểm tra preconnect có hoạt động hay là không.

Cách dễ nhất mà Andy đề cập đó là sử dụng trình duyệt Safari của Mac. Trong công cụ Web Inspector, ở phần Console, bạn có thể thấy thông báo trạng thái liên quan đến preconnect.

Preconnect trong Safari Console
Preconnect trong Safari Console

3. Autosave Interval / Tần số tự động lưu

WordPress theo mặc định tự động lưu một bản nháp 60 giây mỗi lần (một phút). Đây là lý do tại sao bạn muốn thay đổi điều này. Bạn có thể giảm giá trị này xuống để có thể yên tâm không bao giờ mất bất cứ nội dung nào trong quá trình biên tập. Nhưng chúng tôi thích tăng con số này lên để trình duyệt không viết quá nhiều vào cơ sở dữ liệu (xem thêm cách tối ưu cơ sở dữ liệu trong WordPress).

Thay đổi tần số tự động lưu

Chúng tôi xây dựng một vài tần số tự động lưu khác nhau để bạn có thể lựa chọn từ đó:

  • 1 phút (mặc định)
  • 2 phút
  • 3 phút
  • 4 phút
  • 5 phút

Chúng tôi khuyên bạn sử dụng lựa chọn 5 phút, và đây là cách chúng tôi thực hiện trên các website của mình.

Thay đổi WordPress autosave interval thông qua plugin perfmatters
Thay đổi WordPress autosave interval thông qua plugin perfmatters

Cảnh báo AUTOSAVE_INTERVAL

Nếu bạn nhận được cảnh báo nói rằng AUTOSAVE_INTERVAL đã được bật ở nơi nào đó khác trên website, khả năng cao nó là do một trong các nguyên nhân sau đây:

  • Bạn đã sử dụng tính năng này trong plugin khác, chẳng hạn như WP-Rocket. Bạn chỉ cần bật tính năng này ở một plugin, chứ không cần bật ở cả hai nơi.
  • Bạn đã có sẵn đoạn mã bên dưới được định nghĩa trong wp-config.php. Nếu vậy, bạn cần loại bỏ nó đi.
define('AUTOSAVE_INTERVAL', 300); // seconds

Bạn có thể tham khảo tiếp phần 8 ở liên kết này.

0 bình luận

Để lại bình luận