{"id":16890,"date":"2020-05-19T16:05:01","date_gmt":"2020-05-19T09:05:01","guid":{"rendered":"https:\/\/kiencang.net\/?p=16775"},"modified":"2020-05-19T16:05:01","modified_gmt":"2020-05-19T09:05:01","slug":"cac-tuy-chon-cua-plugin-perfmatters-p7","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cac-tuy-chon-cua-plugin-perfmatters-p7\/","title":{"rendered":"Gi\u1ea3i th\u00edch c\u00e1c t\u00f9y ch\u1ecdn c\u1ee7a plugin Perfmatters (ph\u1ea7n 7)"},"content":{"rendered":"\n

B\u1ea1n c\u00f3 th\u1ec3 xem ph\u1ea7n 6 trong chu\u1ed7i b\u00e0i gi\u1ea3i th\u00edch c\u00e1c t\u00ednh n\u0103ng<\/a> c\u1ee7a plugin perfmatters<\/a>.<\/p>\n\n\n

DNS-prefetch <\/h2>\n\n\n

DNS prefetching<\/a> cho ph\u00e9p b\u1ea1n ph\u00e2n gi\u1ea3i t\u00ean mi\u1ec1n (th\u1ef1c hi\u1ec7n t\u00ecm ki\u1ebfm DNS \u1edf background \/ ch\u1ebf \u0111\u1ed9 n\u1ec1n) tr\u01b0\u1edbc khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o link, \u0111i\u1ec1u \u0111\u00f3 c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t \u00edt nhi\u1ec1u. C\u00e1i n\u00e0y \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch th\u00eam th\u1ebb rel=”dns-prefetch”<\/em> v\u00e0o ph\u1ea7n header c\u1ee7a trang WordPress.<\/p>\n\n\n

<link rel=\"dns-prefetch\" href=\"\/\/domain.com\"><\/code><\/pre>\n\n\n

M\u1ed9t v\u00e0i \u1ee9ng d\u1ee5ng ph\u1ed5 bi\u1ebfn c\u1ee7a DNS prefetching l\u00e0 URL li\u00ean quan \u0111\u1ebfn CDN, Google fonts, Google Analytics ho\u1eb7c Google Tag Manager, v\u00e2n v\u00e2n. V\u00ed d\u1ee5:<\/p>\n\n\n

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

B\u1eadt DNS prefetching trong WordPress<\/h3>\n\n\n

DNS-Prefetch \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t l\u1edbn<\/a>, ngo\u1ea1i tr\u1eeb iOS Safari, tr\u00ecnh duy\u1ec7t m\u1eb7c \u0111\u1ecbnh c\u1ee7a Android, v\u00e0 Opera mobile. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng tri\u1ec3n khai DNS prefetching b\u1eb1ng c\u00e1ch click v\u00e0o tab “Extras” trong plugin perfmatters v\u00e0 th\u00eam c\u00e1c t\u00ean mi\u1ec1n v\u00e0o, m\u1ed7i c\u00e1i m\u1ed9t d\u00f2ng. \u0110\u1eebng th\u00eam http:\/\/ ho\u1eb7c https:\/\/, v\u00ec c\u00e1i n\u00e0y ch\u1ec9 th\u1ef1c hi\u1ec7n t\u00ecm ki\u1ebfm DNS ch\u1ee9 kh\u00f4ng li\u00ean quan \u0111\u1ebfn giao th\u1ee9c duy\u1ec7t web l\u00e0 b\u1ea3o m\u1eadt hay l\u00e0 kh\u00f4ng.<\/p>\n\n\n

\"DNS
DNS prefetching trong WordPress<\/figcaption><\/figure>\n\n\n

Ngo\u00e0i ra m\u1ed9t s\u1ed1 giao di\u1ec7n c\u00f3 th\u1ec3 \u0111\u00e3 ch\u1ee7 \u0111\u1ed9ng th\u00eam DNS prefetching t\u1eeb tr\u01b0\u1edbc cho m\u1ed9t s\u1ed1 t\u00e0i nguy\u00ean nh\u01b0 Google fonts r\u1ed3i. V\u00ec v\u1eady b\u1ea1n c\u1ea7n m\u1edf m\u00e3 ngu\u1ed3n c\u1ee7a trang v\u00e0 t\u00ecm xem c\u00f3 DNS prefetching n\u00e0o hay kh\u00f4ng \u0111\u1ec3 tr\u00e1nh th\u00eam th\u1ebb hai l\u1ea7n kh\u00f4ng c\u1ea7n thi\u1ebft.<\/p>\n\n\n


\n\n\n

Preconnect<\/h2>\n\n\n

Preconnect cho ph\u00e9p tr\u00ecnh duy\u1ec7t thi\u1ebft l\u1eadp k\u1ebft n\u1ed1i s\u1edbm<\/a> tr\u01b0\u1edbc khi c\u00f3 y\u00eau c\u1ea7u HTTP, \u0111i\u1ec1u \u0111\u00f3 gi\u00fap lo\u1ea1i b\u1ecf \u0111\u1ed9 tr\u1ec5 c\u1ee7a c\u00e1c v\u00f2ng l\u1eb7p (round-trip latency hay round-trip time \/ RTT<\/a>) v\u00e0 ti\u1ebft ki\u1ec7m th\u1eddi gian cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n

Preconnect l\u00e0 c\u00f4ng c\u1ee5 quan tr\u1ecdng trong b\u1ed9 c\u00f4ng c\u1ee5 t\u1ed1i \u01b0u h\u00f3a c\u1ee7a b\u1ea1n… n\u00f3 c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf nhi\u1ec1u v\u00f2ng l\u1eb7p do c\u00e1c y\u00eau c\u1ea7u \u0111\u1ebfn \u0111\u01b0\u1eddng d\u1eabn c\u1ee7a b\u1ea1n – trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p n\u00f3 c\u00f3 th\u1ec3 gi\u1ea3m h\u00e0ng tr\u0103m, th\u1eadm ch\u00ed l\u00e0 h\u00e0ng ng\u00e0n mili gi\u00e2y \u0111\u1ed9 tr\u1ec5 c\u1ee7a c\u00e1c y\u00eau c\u1ea7u.<\/p>lya Grigorik<\/em><\/cite><\/blockquote>\n\n\n

V\u00e0i v\u00ed d\u1ee5 \u0111i\u1ec3n h\u00ecnh trong vi\u1ec7c s\u1eed d\u1ee5ng preconnect l\u00e0 CDN URL ho\u1eb7c Google fonts:<\/p>\n\n\n

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

B\u1eadt preconnect trong WordPress<\/h3>\n\n\n

Preconnect \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i<\/a>, ngo\u1ea1i tr\u1eeb IE, Safari, iOS Safari, v\u00e0 Opera Mini.<\/p>\n\n\n

B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng tri\u1ec3n khai preconnect b\u1eb1ng c\u00e1ch click v\u00e0o tab “Extras” trong plugin Perfmatters v\u00e0 th\u00eam c\u00e1c t\u00ean mi\u1ec1n v\u00e0o, m\u1ed7i c\u00e1i m\u1ed9t d\u00f2ng. \u0110\u00e2y l\u00e0 v\u00ed d\u1ee5 m\u1eabu: <\/p>\n\n\n

https://fonts.gstatic.com<\/code><\/pre>\n\n\n
\"B\u1eadt
B\u1eadt precoonect trong WordPress<\/figcaption><\/figure><\/div>\n\n\n

B\u1ea1n kh\u00f4ng c\u1ea7n th\u00eam fonts.googleapis.com<\/em> b\u00ean d\u01b0\u1edbi preconnect. T\u1ea1i sao? V\u00ec fonts.gstatic.com v\u00e0 fonts.googleapis.com li\u00ean quan tr\u1ef1c ti\u1ebfp v\u1edbi nhau. Google lu\u00f4n lu\u00f4n ph\u1ee5c v\u1ee5 c\u00e1c font c\u1ee7a n\u00f3 t\u1eeb fonts.gstatic.com, v\u00e0 do \u0111\u00f3 b\u1ea1n c\u1ea7n preconnect \u0111\u1ebfn t\u00ean mi\u1ec1n n\u00e0y, trong khi CSS s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i t\u1eeb fonts.googleapis.com<\/p>\n\n\n

CrossOrigin<\/h3>\n\n\n

C\u00e0i \u0111\u1eb7t CrossOrigin ch\u1ec9 \u0111\u01b0\u1ee3c d\u00f9ng trong v\u00e0i tr\u01b0\u1eddng h\u1ee3p \u0111\u1eb7c bi\u1ec7t, trong 99% tr\u01b0\u1eddng h\u1ee3p b\u1ea1n kh\u00f4ng c\u1ea7n ki\u1ec3m tra t\u00f9y ch\u1ecdn n\u00e0y.<\/p>\n\n\n

Ki\u1ec3m tra preconnect \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp th\u00e0nh c\u00f4ng hay ch\u01b0a?<\/h3>\n\n\n

B\u00e0i vi\u1ebft n\u00e0y c\u1ee7a Andy Davies h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch ki\u1ec3m tra preconnect c\u00f3 ho\u1ea1t \u0111\u1ed9ng hay l\u00e0 kh\u00f4ng<\/a>.<\/p>\n\n\n

C\u00e1ch d\u1ec5 nh\u1ea5t m\u00e0 Andy \u0111\u1ec1 c\u1eadp \u0111\u00f3 l\u00e0 s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t Safari c\u1ee7a Mac. Trong c\u00f4ng c\u1ee5 Web Inspector, \u1edf ph\u1ea7n Console, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y th\u00f4ng b\u00e1o tr\u1ea1ng th\u00e1i li\u00ean quan \u0111\u1ebfn preconnect.<\/p>\n\n\n

\"Preconnect
Preconnect trong Safari Console<\/figcaption><\/figure><\/div>\n\n\n
\n\n\n

Autosave Interval \/ T\u1ea7n s\u1ed1 t\u1ef1 \u0111\u1ed9ng l\u01b0u<\/h2>\n\n\n

WordPress theo m\u1eb7c \u0111\u1ecbnh t\u1ef1 \u0111\u1ed9ng l\u01b0u m\u1ed9t b\u1ea3n nh\u00e1p 60 gi\u00e2y m\u1ed7i l\u1ea7n (m\u1ed9t ph\u00fat). \u0110\u00e2y l\u00e0 l\u00fd do t\u1ea1i sao b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i \u0111i\u1ec1u n\u00e0y. B\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3m gi\u00e1 tr\u1ecb n\u00e0y xu\u1ed1ng \u0111\u1ec3 c\u00f3 th\u1ec3 y\u00ean t\u00e2m kh\u00f4ng bao gi\u1edd m\u1ea5t b\u1ea5t c\u1ee9 n\u1ed9i dung n\u00e0o trong qu\u00e1 tr\u00ecnh bi\u00ean t\u1eadp. Nh\u01b0ng ch\u00fang t\u00f4i th\u00edch t\u0103ng con s\u1ed1 n\u00e0y l\u00ean \u0111\u1ec3 tr\u00ecnh duy\u1ec7t kh\u00f4ng vi\u1ebft qu\u00e1 nhi\u1ec1u v\u00e0o c\u01a1 s\u1edf d\u1eef li\u1ec7u (xem th\u00eam c\u00e1ch t\u1ed1i \u01b0u c\u01a1 s\u1edf d\u1eef li\u1ec7u trong WordPress<\/a>).<\/p>\n\n\n

Thay \u0111\u1ed5i t\u1ea7n s\u1ed1 t\u1ef1 \u0111\u1ed9ng l\u01b0u<\/h3>\n\n\n

Ch\u00fang t\u00f4i x\u00e2y d\u1ef1ng m\u1ed9t v\u00e0i t\u1ea7n s\u1ed1 t\u1ef1 \u0111\u1ed9ng l\u01b0u kh\u00e1c nhau \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 l\u1ef1a ch\u1ecdn t\u1eeb \u0111\u00f3:<\/p>\n\n\n