{"id":2520,"date":"2022-04-06T04:42:24","date_gmt":"2022-04-06T04:42:24","guid":{"rendered":"https:\/\/migoda.vn\/toi-uu-css-cho-website-1649220137"},"modified":"2023-04-20T02:05:49","modified_gmt":"2023-04-20T02:05:49","slug":"toi-uu-css-cho-website-wordpresss-1649220137","status":"publish","type":"post","link":"https:\/\/migoda.vn\/blog\/toi-uu-css-cho-website-wordpresss-1649220137\/","title":{"rendered":"11 th\u1ee7 thu\u1eadt T\u1ed1i \u01b0u css t\u0103ng t\u1ed1c cho wordpresss (2020)"},"content":{"rendered":"

11 th\u1ee7 thu\u1eadt T\u1ed1i \u01b0u css t\u0103ng t\u1ed1c cho wordpresss<\/span><\/h2>\n
CSS l\u00e0 m\u1ed9t ng\u00f4n t\u1eeb l\u1eadp tr\u00ecnh b\u1ea3o v\u1ec7 vi\u1ec7c l\u00e0m ch\u1ec9nh s\u1eeda giao \u0111i\u1ec7n cho website .<\/span>
\nTuy nhi\u00ean css nhi\u1ec1u qu\u00e1 th\u00ec c\u0169ng kh\u00f4ng t\u1ed1t l\u00e0m ch\u1eadm website c\u1ee7a b\u1ea1n \u0111i r\u1ea5t nhi\u1ec1u, n\u1ebfu \u00edt qu\u00e1 th\u00ec website c\u1ee7a b\u1ea1n ch\u00f4ng r\u1ea5t nh\u00e0m ch\u00e1n kh\u00f4ng c\u00f3 g\u00ec r\u1ef1c r\u1ee1 .<\/span>
\nC\u00f4ng vi\u1ec7c c\u1ee7a ng\u01b0\u1eddi t\u1ed1i \u01b0u v\u1eadn t\u1ed1c load website ph\u1ea3i b\u1ea3o v\u1ec7 \u0111\u01b0\u1ee3c r\u1eb1ng css \u00edt m\u00e0 v\u1eabn b\u1ea3o v\u1ec7 \u0111\u01b0\u1ee3c website c\u1ee7a b\u1ea1n kh\u00f4ng b\u1ecb nh\u00e0m ch\u00e1n qu\u00e1 ( b\u00e1c n\u00e0o ch\u01a1i c\u00f9n qu\u00e1 b\u1ecf lu\u00f4n css kh\u00f4ng c\u1ea7n giao di\u1ec7n n\u1eefa th\u00ec th\u00f4i m\u00ecnh kh\u00f4ng d\u00e1m n\u00f3i n\u1eefa ) .<\/span>
\n\"11<\/span>
\n\"C\u00f3<\/span>H\u00f4m nay m\u00ecnh s\u1ebd chia s\u1ebb c\u00e1c c\u00e1ch t\u0103ng t\u1ed1c t\u1ed1i \u01b0u cho css (Cascading Style Sheets) c\u1ee7a WordPress c\u1ee7a b\u1ea1n.<\/span><\/p>\n
\n

B\u1ea1n \u0111ang \u0111\u1ecdc: 11 th\u1ee7 thu\u1eadt T\u1ed1i \u01b0u css t\u0103ng t\u1ed1c cho wordpresss (2020)<\/a><\/span><\/p>\n<\/div>\n

\"5<\/span>
\nCss trung b\u00ecnh c\u1ee7a website WordPress th\u00ec kh\u00f4ng nhi\u1ec1u ch\u1ec9 chi\u1ebfn t\u1eeb 50 kb \u0111\u1ebfn 200 kb .<\/span>
\nTuy nhi\u00ean y\u1ebfu t\u1ed1 \u0111ang n\u00f3i l\u00e0 th\u1ee9 t\u1ef1 load c\u1ee7a css thu\u1ed9c h\u00e0ng r\u1ea5t \u01b0u ti\u00ean c\u1ee7a tr\u00ecnh duy\u1ec7t, n\u1ebfu b\u1ea1n l\u00e0m t\u1ed1t th\u00ec ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u0103ng v\u1eadn t\u1ed1c website to\u00e0n di\u1ec7n v\u00e0 t\u1ed5ng th\u1ec3 full load nh\u01b0ng t\u1ed1i \u01b0u css th\u00ec quan tr\u1ecdng nh\u1ea5t l\u00e0 hi\u1ec7n th\u00ec m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb s\u1edbm cho ng\u01b0\u1eddi d\u00f9ng .<\/span>
\nD\u00f9 1 bytes c\u0169ng t\u1ea1o l\u00ean c\u1ea3i t\u1ed5 cho ch\u1ec9 s\u1ed1 hi\u1ec7n th\u1ecb m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb \u0111\u1ea7u trang .<\/span><\/p>\n

T\u1ed1c \u0111\u1ed9 trong th\u1ef1c ti\u1ec5n kh\u00f4ng quan tr\u1ecdng b\u1eb1ng v\u1eadn t\u1ed1c c\u1ea3m nh\u1eadn c\u1ee7a ng\u01b0\u1eddi mua<\/span><\/p><\/blockquote>\n

H\u1ea1nh ph\u00fac th\u1eadt kh\u00f4ng quan tr\u1ecdng b\u1eb1ng b\u1ea1n c\u1ea3m th\u1ea5y ni\u1ec1m h\u1ea1nh ph\u00fac .<\/span>
\nV\u0169 tr\u1ee5 l\u00e0 c\u00f3 th\u1eadt, n\u00f3 c\u00f3 trong t\u00e2m ch\u00ed b\u1ea1n .<\/span>
\n\"quy-luat-tai-css-th\u00f4ng-th\u01b0\u1eddng\"<\/span><\/p>\n

L\u1ef1a ch\u1ecdn themes m\u00e3 h\u00f3a t\u1ed1t<\/span><\/h2>\n

khi b\u1ea1n s\u1eed d\u1ee5ng WordPress l\u1ef1a ch\u1ecdn themes m\u1ed9t \u0111i\u1ec1u c\u1ef1c k\u1ef3 quan tr\u1ecdng \u1ea3nh h\u01b0\u1edfng t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn v\u1eadn t\u1ed1c load website c\u1ee7a b\u1ea1n theo kinh nghi\u1ec7m tay ngh\u1ec1 c\u1ee7a m\u00ecnh th\u00ec n\u00f3 chi\u1ebfm t\u1eeb 50 % \u0111\u1ebfn 80 % v\u1eadn t\u1ed1c load website c\u1ee7a b\u1ea1n .<\/span>
\nH\u00e3y th\u1eadt t\u1eadn tr\u1ecdng khi l\u1ef1a ch\u1ecdn themes \u0111\u1ec3 b\u1ea1n g\u1eafn b\u00f3 .<\/span>
\nC\u00f2n trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n \u0111\u00e3 ch\u1ecdn r\u1ed3i th\u00ec \u0111\u1eebng ng\u1ea7n ng\u1ea1i thay th\u00f4i themes c\u1ee7a b\u1ea1n, \u0111\u1ed5i kh\u00e1c themes r\u1ea5t \u0111\u01a1n thu\u1ea7n kh\u00f4ng c\u00f3 y\u1ebfu t\u1ed1 g\u00ec l\u00e0 kh\u00f3 kh\u0103n v\u1ea5t v\u1ea3 c\u1ea3 .<\/span>
\nTh\u00f4ng th\u01b0\u1eddng m\u1edbi s\u1eed d\u1ee5ng WordPress m\u00ecnh c\u0169ng ngh\u0129 bi\u1ebfn h\u00f3a themes r\u1ea5t kh\u00f3 kh\u0103n v\u1ea5t v\u1ea3 nh\u01b0ng \u0111\u1eadp c\u1ea3 website \u0111i \u0111\u1eadp l\u1ea1i nh\u01b0ng khi \u0111\u00e3 th\u01b0\u1edfng th\u1ee9c v\u00e0 \u0111\u1ed5i kh\u00e1c v\u00e0i l\u1ea7n themes r\u1ed3i th\u00ec m\u00ecnh T\u00f3m l\u1ea1i \u0111\u1ed5i kh\u00e1c themes kh\u00f4ng c\u00f3 g\u00ec l\u00e0 kh\u00f3 kh\u0103n v\u1ea5t v\u1ea3 c\u1ea3 r\u1ea5t \u0111\u01a1n thu\u1ea7n .<\/span>
\nL\u1eddi khuy\u00ean c\u1ee7a m\u00ecnh : h\u00e3y t\u1ea1o l\u1eadp localhost \u0111\u1ec3 bi\u1ebfn h\u00f3a themes v\u00e0 ch\u1ec9nh s\u1eeda khi l\u00e0m xong m\u1edbi uploads l\u00ean webhost \u0111\u1eebng s\u1eeda tr\u1ef1c ti\u1ebfp tr\u00ean webhost. ( l\u1ed7i n\u00e0y th\u01b0\u1eddng x\u1ea3y ra nhi\u1ec1u v\u1edbi nh\u1eefng ng\u01b0\u1eddi m\u1edbi kh\u1edfi \u0111\u1ea7u )<\/span>
\nC\u00e1ch nh\u00ecn nh\u1eadn themes ch\u1ea5t l\u01b0\u1ee3ng t\u1ed1t th\u00ec c\u00f3 r\u1ea5t nhi\u1ec1u y\u1ebfu t\u1ed1 m\u00ecnh c\u00f3 san s\u1ebb m\u1ed9t b\u00e0i vi\u1ebft v\u1ec1 9 ti\u00eau chu\u1ea9n ch\u1ecdn themes WordPress ch\u1ea5t l\u01b0\u1ee3ng<\/span>
\nNh\u01b0ng ti\u00eau chu\u1ea9n n\u00e0y theo kinh nghi\u1ec7m tay ngh\u1ec1 c\u1ee7a m\u00ecnh l\u00e0 quan tr\u1ecdng, m\u00e0 n\u00f3 kh\u00f4ng quan tr\u1ecdng b\u1eb1ng cung \u1ee9ng \u0111\u00fang nhu y\u1ebfu c\u1ee7a b\u1ea1n, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam b\u00e0i vi\u1ebft c\u1ee7a m\u00ecnh .<\/span><\/p>\n

S\u1eeda css n\u00ean \u0111\u01b0a v\u00e0o file kh\u00f4ng n\u00ean \u0111\u01b0a v\u00e0o n\u1ed9i tuy\u1ebfn<\/span><\/h2>\n

theo m\u00ecnh 99 % nh\u1eefng website c\u1ee7a WordPress th\u00ec kh\u00f4ng n\u00ean \u0111\u1ec3 trong ph\u1ea7n t\u00f9y ch\u1ec9nh giao \u0111i\u1ec7n m\u00e0 h\u00e3y \u0111\u1ec3 trong file c\u1ee9ng nh\u01b0 style.css<\/span>
\n\u0110\u00e2y l\u00e0 l\u1ed7i ph\u1ed5 c\u1eadp c\u1ee7a nh\u01b0ng ng\u01b0\u1eddi m\u1edbi kh\u1edfi \u0111\u1ea7u s\u1eed d\u1ee5ng WordPress, th\u1ea5y \u0111o\u1ea1n css n\u00e0o hay \u0111\u01b0\u1ee3c san s\u1ebb tr\u00ean m\u1ea1ng th\u00ec s\u1ebd \u0111\u01b0a v\u00e0o ph\u1ea7n t\u00f9y ch\u1ec9nh giao di\u1ec7n css ( t\u00ednh n\u0103ng n\u00e0y g\u1ea7n nh\u01b0 themes n\u00e0o c\u0169ng \u0111\u1ec1u c\u00f3 ), tuy nhi\u00ean css n\u1ed9i tuy\u1ebfn th\u00ec kh\u00f4ng h\u1ec1 cache \u0111\u01b0\u1ee3c .<\/span>
\nB\u1ea1n n\u00ean \u0111\u01b0\u1ee3c v\u00e0o file style.css file c\u1ee9ng c\u1ee7a css th\u00ec s\u1ebd t\u1ed1t h\u01a1n .<\/span>
\nM\u00ecnh bi\u1ebft l\u00e0 nhi\u1ec1u b\u1ea1n b\u1ea3o em \u0111\u01b0a v\u00e0o file style.css th\u1ea5y c\u00f3 kh\u00f4ng hi\u1ec7u l\u1ef1c th\u1ef1c thi hi\u1ec7n h\u00e0nh ngay, b\u1ea1n n\u00f3i \u0111\u00fang .<\/span>
\nB\u1ea1n \u0111\u01b0a v\u00e0o ph\u1ea3i style.css th\u00ec c\u1ea7n hi\u1ec3u th\u00eam v\u1ec1 k\u1ef9 n\u0103ng v\u00e0 ki\u1ebfn th\u1ee9c tr\u00ecnh duy\u1ec7t cache n\u1eefa c\u00f2n n\u1ebfu b\u1ea1n \u0111\u01b0a v\u00e0o t\u00f9y ch\u1ec9nh css th\u00ec s\u1ebd \u0103n ngay .<\/span><\/p>\n

S\u1eeda l\u1ea1i t\u00f9y ch\u1ec9nh css khung<\/span><\/h2>\n

\u0110\u00e2y l\u00e0 ph\u1ea7n kh\u00e1 l\u00e0 n\u00e2ng cao d\u00e0nh cho nh\u1eefng ng\u01b0\u1eddi n\u00e2ng cao v\u00e0 bi\u1ebft l\u1eadp tr\u00ecnh ng\u00f4n t\u1eeb css .<\/span>
\nN\u1ebfu khuy\u00ean n\u00ean kh\u00f4ng n\u00ean s\u1eed d\u1ee5ng css khung th\u00ec kh\u00f4ng \u0111\u00fang, t\u1ef1 t\u1ea1o css l\u00ean website t\u1eeb \u0111\u1ea7u \u0111\u1ebfn cu\u1ed1i m\u1ea5t r\u1ea5t nhi\u1ec1u th\u1eddi h\u1ea1n v\u00e0 s\u1ee9c l\u1ef1c lao \u0111\u1ed9ng kh\u00f4ng ph\u1ea3i ai c\u0169ng c\u00f3 \u0111\u1ee7 tr\u00ecnh \u0111\u1ed9 l\u00e0m \u0111\u01b0\u1ee3c, css khung r\u1ea5t t\u1ed1t tuy nhi\u00ean n\u00f3 ch\u1ee9a r\u1ea5t nhi\u1ec1u \u0111i\u1ec3m y\u1ebfu k\u00e9m l\u00e0 r\u1ea5t nhi\u1ec1u css th\u1eeba .<\/span>
\ncss th\u1eeba v\u00ec \u0111\u01a1n thu\u1ea7n m\u1ed9t themes t\u1ea1o ra nhi\u1ec1u css \u0111\u1ec3 ph\u00e2n ph\u1ed1i m\u1ecdi nhu y\u1ebfu, nh\u01b0 b\u00e1n h\u00e0ng, blog, forum. ng\u01b0\u1eddi l\u1eadp tr\u00ecnh vi\u00ean c\u00e0ng ph\u00e2n ph\u1ed1i c\u00e0ng nhi\u1ec1u nhu y\u1ebfu th\u00ec themes c\u1ee7a h\u1ecd c\u00e0ng h\u00fat kh\u00e1ch .<\/span>
\nCss th\u1eeba ch\u00fang m\u00ecnh c\u1ea7n ph\u1ea3i c\u1eaft gi\u1ea3m v\u00e0 v\u00f4 hi\u1ec7u ch\u00fang, quy tr\u00ecnh c\u1eaft gi\u1ea3m t\u1ed1n r\u1ea5t nhi\u1ec1u th\u1eddi h\u1ea1n, d\u00f9 ch\u1ec9 l\u00e0 m\u1ed9t \u0111o\u1ea1n css th\u1eeba kh\u00f4ng s\u1eed d\u1ee5ng th\u00ec c\u0169ng l\u00ean v\u00f4 hi\u1ec7u .<\/span>
\nC\u00f4ng th\u1ee9c c\u1eaft gi\u1ea3m css th\u00ec kh\u00f4ng c\u00f3, ch\u1ec9 c\u00f3 l\u00e0 s\u1ef1 c\u1ea7n m\u1eabn mi\u1ec1n m\u00e0i v\u00e0 b\u1ea1n hi\u1ec3u themes \u0111\u00f3 v\u00e0 hi\u1ec7u nhu y\u1ebfu c\u1ee7a b\u1ea1n \u0111\u1ec3 c\u1eaft gi\u1ea3m chu\u1ea9n nh\u1eefng \u0111o\u1ea1n css kh\u00f4ng s\u1eed d\u1ee5ng .<\/span>
\nC\u00f3 nh\u1eefng \u1ee9ng d\u1ee5ng t\u00ecm nh\u1eefng \u0111o\u1ea1n css kh\u00f4ng s\u1eed d\u1ee5ng, nh\u01b0ng m\u00ecnh th\u1ea5y kh\u00f4ng h\u1ec1 hi\u1ec7u su\u1ea5t cao v\u00ec css n\u1ebfu b\u1ea1n x\u1eed d\u1ee5ng \u0111\u1ed3ng th\u1eddi javascript nh\u1eefng t\u00ednh n\u0103ng chuy\u1ec3n c\u1ea3nh nh\u1eefng th\u1ee9 th\u00ec \u1ee9ng d\u1ee5ng c\u00f4ng c\u1ee5 \u0111\u00f3 s\u1ebd kh\u00f4ng ph\u00e1t hi\u1ec7n ra .<\/span>
\nHy v\u1ecdng trong t\u01b0\u01a1ng lai s\u1ebd c\u00f3 nh\u1eefng \u1ee9ng d\u1ee5ng v\u00f4 hi\u1ec7u css kh\u00f4ng s\u1eed d\u1ee5ng th\u1eadt s\u1ef1 t\u1ed1t hi\u1ec7n t\u1ea1i n\u0103m 2020 th\u00ec v\u1eabn ch\u01b0a c\u00f3 .<\/span>
\nC\u00e1ch duy nh\u1ea5t v\u00e0 t\u1ed1t nh\u1ea5t l\u00e0 ch\u1ec9 c\u00f3 l\u00e0m th\u1ee7 c\u00f4ng b\u1eb1ng tay m\u00e0 th\u00f4i .<\/span><\/p>\n

S\u1eed d\u1ee5ng t\u1ea1o css quan tr\u1ecdng v\u00e0 t\u1ea3i kh\u00f4ng \u0111\u1ed3ng nh\u1ea5t css<\/span><\/h2>\n

\"avatar<\/span>
\nTuy nhi\u00ean kh\u00f4ng ph\u1ea3i ai c\u0169ng hi\u1ec7u t\u1ea1o l\u1eadp css quan tr\u1ecdng v\u00e0 t\u1ea3i kh\u00f4ng \u0111\u1ed3ng \u0111i\u1ec7u css r\u1ea5t nhi\u1ec1u ng\u01b0\u1eddi kh\u00f4ng hi\u1ec3u n\u00f3, v\u00e0 c\u1ee9 b\u1eadt b\u1eeba l\u00ean th\u00ec th\u1eadt ch\u1ea5t r\u1eb1ng 90 % l\u00e0 tai h\u1ea1i kh\u00f4ng ph\u1ea3i l\u00e0 t\u00e1c l\u1ee3i, v\u00e0 nh\u01b0 mong mu\u1ed1n th\u00ec kh\u00f4ng b\u1ecb l\u1ed7i th\u01b0\u1eddng th\u00ec s\u1ebd b\u1ecb l\u1ed7i. ( trong th\u1ef1c ti\u1ec5n \u0111\u00e2y l\u00e0 th\u1ee9 m\u1ecdi ng\u01b0\u1eddi ch\u01b0a hi\u1ec7u v\u1ec1 t\u00ednh n\u0103ng n\u00e0y c\u1ee9 b\u1eadt xong l\u1ed7i th\u01b0\u1eddng h\u1eadn th\u00fa nh\u1eefng plugin t\u1ed1i \u01b0u v\u1eadn t\u1ed1c WordPress )<\/span>
\n\"quy-luat-tai-css-khong-dong-bo\"<\/span>
\nK\u1ef9 thu\u1eadt n\u00e0y b\u1ea1n l\u00e0m kh\u00f4ng chu\u1ea9n th\u00ec r\u1ea5t d\u1ec5 l\u1ed7i FOUC .<\/span>
\nb\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam :<\/span><\/p>\n