{"id":16874,"date":"2020-04-08T10:41:59","date_gmt":"2020-04-08T03:41:59","guid":{"rendered":"https:\/\/kiencang.net\/?p=16028"},"modified":"2020-04-08T10:41:59","modified_gmt":"2020-04-08T03:41:59","slug":"preload-cac-yeu-cau-chinh","status":"publish","type":"post","link":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/","title":{"rendered":"Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng"},"content":{"rendered":"\n<p>Khu v\u1ef1c c\u01a1 h\u1ed9i c\u1ee7a Lighthouse b\u1eadt c\u1edd c\u1ea3nh b\u00e1o cho c\u00e1c y\u00eau c\u1ea7u \u1edf c\u1ea5p \u0111\u1ed9 th\u1ee9 ba trong chu\u1ed7i y\u00eau c\u1ea7u quan tr\u1ecdng c\u1ee7a b\u1ea1n nh\u01b0 l\u00e0 m\u1ed9t \u1ee9ng c\u1eed vi\u00ean ti\u1ec1m n\u0103ng c\u00f3 kh\u1ea3 n\u0103ng preload:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/preload-yeu-cau-chinh.png\" alt=\"preload y\u00eau c\u1ea7u ch\u00ednh\" class=\"wp-image-16030\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">L\u00e0m th\u1ebf n\u00e0o c\u1ea3nh b\u00e1o Lighthouse ph\u00e1t hi\u1ec7n c\u00e1c \u1ee9ng c\u1eed vi\u00ean c\u1ea7n preload?<\/h2>\n\n\n<p>Gi\u1ea3 s\u1eed chu\u1ed7i y\u00eau c\u1ea7u quan tr\u1ecdng tr\u00ean trang c\u1ee7a b\u1ea1n tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>index.html\n|--app.js\n   |--styles.css\n   |--ui.js<\/code><\/pre>\n\n\n<p>T\u1ec7p <em>index.html<\/em> c\u1ee7a b\u1ea1n khai b\u00e1o <em>&lt;script src=&#8221;app.js&#8221;&gt;<\/em>. Khi <em>app.js<\/em> ch\u1ea1y, n\u00f3 g\u1ecdi <em>fetch()<\/em> \u0111\u1ec3 t\u1ea3i v\u1ec1 <em>styles.css<\/em> v\u00e0 <em>ui.js<\/em>. Trang kh\u00f4ng th\u1ec3 hi\u1ec3n th\u1ecb ho\u00e0n ch\u1ec9nh cho \u0111\u1ebfn khi 2 t\u00e0i nguy\u00ean cu\u1ed1i c\u00f9ng n\u00e0y \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1, ph\u00e2n t\u00edch c\u00fa ph\u00e1p v\u00e0 th\u1ef1c thi. S\u1eed d\u1ee5ng v\u00ed d\u1ee5 \u1edf tr\u00ean, Lighthouse s\u1ebd g\u1eafn c\u1edd c\u1ea3nh b\u00e1o cho <em>styles.css<\/em> v\u00e0 <em>ui.js<\/em> nh\u01b0 l\u00e0 c\u00e1c \u1ee9ng c\u1eed vi\u00ean c\u1ea7n preload.<\/p>\n\n\n<p>Th\u1eddi gian c\u00f3 th\u1ec3 ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c (potential saving) d\u1ef1a tr\u00ean vi\u1ec7c tr\u00ecnh duy\u1ec7t c\u00f3 kh\u1ea3 n\u0103ng b\u1eaft \u0111\u1ea7u g\u1eedi c\u00e1c y\u00eau c\u1ea7u s\u1edbm \u0111\u1ebfn m\u1ee9c n\u00e0o n\u1ebfu b\u1ea1n khai b\u00e1o link preload. L\u1ea5y v\u00ed d\u1ee5, n\u1ebfu <em>app.js<\/em> c\u1ea7n 200ms \u0111\u1ec3 t\u1ea3i v\u1ec1, ph\u00e2n t\u00edch v\u00e0 th\u1ef1c thi, th\u1eddi gian ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c cho t\u1eebng t\u00e0i nguy\u00ean l\u00e0 200ms v\u00ec <em>app.js<\/em> kh\u00f4ng c\u00f2n l\u00e0 v\u1ea5n \u0111\u1ec1 th\u1eaft c\u1ed5 chai (bottleneck) cho t\u1eebng y\u00eau c\u1ea7u n\u1eefa.<\/p>\n\n\n<p>C\u00e1c y\u00eau c\u1ea7u preload c\u00f3 th\u1ec3 l\u00e0m cho trang c\u1ee7a b\u1ea1n t\u1ea3i nhanh h\u01a1n.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/khi-chua-preload-1024x622.png\" alt=\"khi ch\u01b0a preload\" class=\"wp-image-16031\"\/><figcaption>Khi kh\u00f4ng c\u00f3 link preload, <em>style.css<\/em> v\u00e0 <em>ui.js<\/em> ch\u1ec9 \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u sau khi <em>app.js<\/em> \u0111\u00e3 t\u1ea3i v\u1ec1, ph\u00e2n t\u00edch v\u00e0 th\u1ef1c thi.<\/figcaption><\/figure>\n\n\n<p>V\u1ea5n \u0111\u1ec1 \u1edf \u0111\u00e2y l\u00e0 tr\u00ecnh duy\u1ec7t ch\u1ec9 c\u00f3 th\u1ec3 nh\u1eadn bi\u1ebft v\u1ec1 2 t\u00e0i nguy\u00ean cu\u1ed1i c\u00f9ng n\u00e0y sau khi n\u00f3 t\u1ea3i v\u1ec1, ph\u00e2n t\u00edch c\u00fa ph\u00e1p v\u00e0 th\u1ef1c thi <em>app.js<\/em>. Nh\u01b0ng b\u1ea1n bi\u1ebft c\u00e1c t\u00e0i nguy\u00ean n\u00e0y quan tr\u1ecdng v\u00e0 n\u00ean t\u1ea3i v\u1ec1 c\u00e0ng s\u1edbm c\u00e0ng t\u1ed1t.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\">Khai b\u00e1o link preload c\u1ee7a b\u1ea1n<\/h2>\n\n\n<p>Khai b\u00e1o link preload trong HTML c\u1ee7a b\u1ea1n \u0111\u1ec3 h\u01b0\u1edbng d\u1eabn tr\u00ecnh duy\u1ec7t t\u1ea3i v\u1ec1 c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng s\u1edbm nh\u1ea5t c\u00f3 th\u1ec3.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  ...\n  &lt;link rel=\"preload\" href=\"styles.css\" as=\"style\"&gt;\n  &lt;link rel=\"preload\" href=\"ui.js\" as=\"script\"&gt;\n  ...\n&lt;\/head&gt;<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/khi-ap-dung-preload-1024x612.png\" alt=\"khi \u00e1p d\u1ee5ng preload\" class=\"wp-image-16032\"\/><figcaption>Khi \u00e1p d\u1ee5ng link preload, <em>styles.css<\/em> v\u00e0 <em>ui.js<\/em> \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u v\u00e0o c\u00f9ng th\u1eddi \u0111i\u1ec3m v\u1edbi <em>app.js<\/em><\/figcaption><\/figure>\n\n\n<p>Li\u00ean k\u1ebft t\u1eeb Can I Use s\u1ebd cho b\u1ea1n th\u1ea5y <a href=\"http:\/\/caniuse.com\/#feat=link-rel-preload\">c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111ang h\u1ed7 tr\u1ee3 link preload<\/a>.<\/p>\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam b\u00e0i vi\u1ebft <a href=\"https:\/\/kiencang.net\/preload-tai-nguyen-quan-trong\/\">Preload c\u00e1c t\u00e0i nguy\u00ean quan tr\u1ecdng \u0111\u1ec3 c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 t\u1ea3i trang<\/a> (trong b\u00e0i vi\u1ebft n\u00e0y c\u00f3 v\u00ed d\u1ee5 minh h\u1ecda th\u1ef1c t\u1ebf v\u1ec1 vi\u1ec7c tri\u1ec3n khai preload s\u1ebd \u0111em l\u1ea1i c\u01a1 h\u1ed9i c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 trang t\u1ed1t nh\u01b0 th\u1ebf n\u00e0o).<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Preload key requests, trang web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khu v\u1ef1c c\u01a1 h\u1ed9i c\u1ee7a Lighthouse b\u1eadt c\u1edd c\u1ea3nh b\u00e1o cho c\u00e1c y\u00eau c\u1ea7u \u1edf c\u1ea5p \u0111\u1ed9 th\u1ee9 ba trong chu\u1ed7i y\u00eau c\u1ea7u quan tr\u1ecdng c\u1ee7a b\u1ea1n nh\u01b0 l\u00e0 m\u1ed9t \u1ee9ng c\u1eed vi\u00ean ti\u1ec1m n\u0103ng c\u00f3 kh\u1ea3 n\u0103ng preload: L\u00e0m th\u1ebf n\u00e0o c\u1ea3nh b\u00e1o Lighthouse ph\u00e1t hi\u1ec7n c\u00e1c \u1ee9ng c\u1eed vi\u00ean c\u1ea7n preload? Gi\u1ea3 s\u1eed &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Khu v\u1ef1c c\u01a1 h\u1ed9i c\u1ee7a Lighthouse b\u1eadt c\u1edd c\u1ea3nh b\u00e1o cho c\u00e1c y\u00eau c\u1ea7u \u1edf c\u1ea5p \u0111\u1ed9 th\u1ee9 ba trong chu\u1ed7i y\u00eau c\u1ea7u quan tr\u1ecdng c\u1ee7a b\u1ea1n nh\u01b0 l\u00e0 m\u1ed9t \u1ee9ng c\u1eed vi\u00ean ti\u1ec1m n\u0103ng c\u00f3 kh\u1ea3 n\u0103ng preload: L\u00e0m th\u1ebf n\u00e0o c\u1ea3nh b\u00e1o Lighthouse ph\u00e1t hi\u1ec7n c\u00e1c \u1ee9ng c\u1eed vi\u00ean c\u1ea7n preload? Gi\u1ea3 s\u1eed &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-08T03:41:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/preload-yeu-cau-chinh.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/","og_locale":"vi_VN","og_type":"article","og_title":"Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Khu v\u1ef1c c\u01a1 h\u1ed9i c\u1ee7a Lighthouse b\u1eadt c\u1edd c\u1ea3nh b\u00e1o cho c\u00e1c y\u00eau c\u1ea7u \u1edf c\u1ea5p \u0111\u1ed9 th\u1ee9 ba trong chu\u1ed7i y\u00eau c\u1ea7u quan tr\u1ecdng c\u1ee7a b\u1ea1n nh\u01b0 l\u00e0 m\u1ed9t \u1ee9ng c\u1eed vi\u00ean ti\u1ec1m n\u0103ng c\u00f3 kh\u1ea3 n\u0103ng preload: L\u00e0m th\u1ebf n\u00e0o c\u1ea3nh b\u00e1o Lighthouse ph\u00e1t hi\u1ec7n c\u00e1c \u1ee9ng c\u1eed vi\u00ean c\u1ea7n preload? Gi\u1ea3 s\u1eed &hellip;","og_url":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-08T03:41:59+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/preload-yeu-cau-chinh.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/","url":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/","name":"Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-08T03:41:59+00:00","dateModified":"2020-04-08T03:41:59+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/preload-cac-yeu-cau-chinh\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Preload c\u00e1c y\u00eau c\u1ea7u quan tr\u1ecdng"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16874"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=16874"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16874\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}