Hướng dẫn tạo website miễn phí với Google Sites cho người mới
Google Sites là công cụ tạo website miễn phí của Google, cho phép bất kỳ ai có tài khoản Gmail đều có thể xây dựng một trang web chỉ bằng thao tác kéo thả mà không cần biết một dòng...
Trong bài viết này, mình sẽ chia sẻ các kỹ thuật tối ưu CSS hiệu quả giúp giảm thời gian tải trang và tăng tốc độ website bất ngờ. Bạn sẽ thấy lợi ích rõ rệt ngay từ lần tối ưu đầu tiên xuống dưới 3 giây, UX mượt mà hơn, SEO cải thiện nhờ điểm Core Web Vitals cao và tiết kiệm chi phí server nhờ giảm dữ liệu truyền.
Tối ưu CSS là chìa khóa giảm cải thiện hiệu suất website, giúp website WordPress hay kể cả web code thuần tải nhanh hơn. Bằng cách thực hiện xóa CSS thừa, minify, nén và áp dụng critical CSS để nội dung hiển thị nhanh hơn. Không cần làm tất cả, nhưng áp dụng đúng sẽ mang lại kết quả vượt trội.
Xóa CSS không dùng đến
Xóa CSS không dùng đến là quá trình loại bỏ các quy tắc CSS không áp dụng cho bất kỳ phần tử HTML nào trên trang hiện tại, giúp giảm kích thước file CSS và thời gian tải, đồng thời tránh lãng phí tài nguyên.
Nên áp dụng khi website sử dụng theme hoặc plugin WordPress chứa nhiều CSS thừa (ví dụ: theme mặc định như Twenty Twenty-One có CSS cho các tính năng không dùng), hoặc sau khi chỉnh sửa giao diện lớn. Trong web thuần, áp dụng nếu bạn dùng framework như Bootstrap hoặc Tailwind nhưng chỉ cần một phần nhỏ, tránh tải toàn bộ thư viện.
Ví dụ code cho web thuần: Giả sử file style.css có quy tắc thừa:
CSS
/* CSS thừa không dùng */
.unused-class {
color: red;
font-size: 16px;
margin: 10px; /* Chú thích thừa */
}
/* CSS dùng thực tế */
body {
background: white;
font-family: Arial, sans-serif;
}
header {
padding: 20px;
}Sử dụng công cụ như PurgeCSS qua command line:
Bash
purgecss --css style.css --content index.html --output optimized.cssKết quả optimized.css chỉ giữ body và header.
Trong WordPress, dùng plugin như Asset CleanUp để dequeue style, hoặc tự viết code trong functions.php để loại bỏ handle cụ thể:
PHP
function remove_unused_css() {
// Dequeue CSS thừa từ plugin hoặc theme
wp_dequeue_style('unused-plugin-style'); // Handle của style thừa
wp_dequeue_style('theme-extra-style');
}
add_action('wp_enqueue_scripts', 'remove_unused_css', 999); // Priority cao để chạy sauThu nhỏ CSS
Thu nhỏ CSS là quá trình loại bỏ tất cả khoảng trắng không cần thiết, chú thích, dòng mới và đôi khi tối ưu hóa quy tắc (như hợp nhất thuộc tính), làm giảm kích thước file mà không thay đổi chức năng hiển thị.
Áp dụng luôn cho mọi website, đặc biệt khi file CSS lớn do code thủ công với nhiều chú thích hoặc từ nhiều nguồn gộp lại. Lý tưởng cho production, không dùng ở development để dễ debug.
Ví dụ code trước minify:
CSS
body {
background: white; /* Nền trắng cho body */
color: black;
font-size: 16px; /* Kích thước chữ cơ bản */
}
header {
padding: 20px 0;
border-bottom: 1px solid gray;
}Sau minify (sử dụng CSSNano hoặc online tool):
CSS
body{background:white;color:black;font-size:16px}header{padding:20px 0;border-bottom:1px solid gray}Trong WordPress, dùng plugin để tự động minify, hoặc code thủ công chèn trong functions.php với filter:
PHP
function minify_css($css) {
// Loại bỏ chú thích
$css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
// Loại bỏ khoảng trắng
$css = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $css);
return $css;
}
add_filter('style_loader_src', function($src) {
// Áp dụng minify cho src cụ thể nếu cần
return $src;
}); // Kết hợp với plugin tốt hơnVà để cho nhanh thì bạn có thể sử dụng trang web http://www.cleancss.com/css-minify/ nó sẽ giúp cho bạn minify file CSS một cách nhanh gọn (đặc biệt là với các file lớn), thay vì phải dò một cách thủ công.
Nén CSS (Gzip / Brotli)
Nén CSS là sử dụng thuật toán nén lossless như Gzip hoặc Brotli để giảm kích thước file trước khi gửi từ server đến trình duyệt, nơi file sẽ được giải nén tự động mà không mất dữ liệu.
Áp dụng cho mọi file CSS lớn hơn 1KB, đặc biệt trên server hỗ trợ HTTP/2 hoặc HTTP/3, vì nén kết hợp tốt với multiplexing. Không áp dụng cho file đã minify nhỏ dưới 1KB vì overhead nén có thể lớn hơn lợi ích.
Ví dụ cấu hình server Apache cho Gzip và trong WordPress, thêm vào .htaccess:
Apache
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-css
# Cấp độ nén từ 1-9
DeflateCompressionLevel 6
</IfModule>Thêm Brotli giúp cân bằng tốc độ:
Apache
<IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/css
BrotliCompressionQuality 5 # Từ 0-11, cân bằng tốc độ và tỷ lệ nén
</IfModule>Tách nhỏ CSS
Tách nhỏ CSS là chia file CSS lớn thành các file nhỏ hơn, mỗi file dành riêng cho một trang hoặc nhóm trang cụ thể, chỉ tải những quy tắc cần thiết để tránh tải thừa.
Áp dụng khi website có cấu trúc đa dạng, như homepage cần CSS hero section lớn, trong khi product page cần CSS grid sản phẩm. Lý tưởng cho WordPress với conditional logic, tránh tải toàn bộ style cho mọi trang.
Ví dụ web thuần: Tách thành home.css (cho homepage) và product.css (cho trang sản phẩm).
CSS
<!-- Trang home.html -->
<link rel="stylesheet" href="home.css">
<!-- Nội dung home.css -->
.hero { background: url('hero.jpg'); height: 500px; }Trong WordPress, dùng conditional enqueue trong functions.php:
PHP
function enqueue_page_specific_css() {
if (is_front_page()) {
wp_enqueue_style('home-css', get_template_directory_uri() . '/css/home.css', array(), '1.0');
} elseif (is_singular('product')) { // Cho custom post type product
wp_enqueue_style('product-css', get_template_directory_uri() . '/css/product.css', array(), '1.0');
} else {
wp_enqueue_style('default-css', get_template_directory_uri() . '/css/default.css', array(), '1.0');
}
}
add_action('wp_enqueue_scripts', 'enqueue_page_specific_css');Gộp nhiều file CSS
Gộp nhiều file CSS là kết hợp tất cả các file CSS riêng lẻ thành một file duy nhất, giảm số lượng HTTP request, đặc biệt hữu ích trên HTTP/1.1.
Áp dụng khi có nhiều file CSS từ plugin, theme hoặc vendor (ví dụ: 5-10 file từ WordPress plugins), nhưng với HTTP/2/3 (hỗ trợ tải parallel), lợi ích giảm nếu file nhỏ. Tránh gộp nếu debug thường xuyên.
Ví dụ code PHP gộp file css trong WordPress:
PHP
function combine_css_files() {
// Giả sử các file
$files = array('vendor.css', 'theme.css', 'custom.css');
$combined = '';
foreach ($files as $file) {
$combined .= file_get_contents(get_template_directory() . '/css/' . $file);
}
file_put_contents(get_template_directory() . '/css/combined.css', $combined);
wp_enqueue_style('combined-css', get_template_directory_uri() . '/css/combined.css');
}
add_action('wp_enqueue_scripts', 'combine_css_files');Tải CSS không đồng bộ
Tải CSS không đồng bộ là tải file CSS mà không chặn quá trình render trang, sử dụng thuộc tính như preload hoặc async để trình duyệt tải song song.
Áp dụng cho CSS không quan trọng ngay lập tức, như style cho phần dưới fold hoặc modal, tránh blocking render thread.
Ví dụ web thuần: Sử dụng preload với onload:
HTML
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>Hoặc async qua JavaScript:
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'non-critical.css';
link.as = 'style'; // Gợi ý async
document.head.appendChild(link);
});Tải CSS khi cần dùng
Tải CSS on-demand là chỉ tải file CSS khi người dùng tương tác hoặc cần, như khi click mở section, sử dụng JavaScript để inject link.
Áp dụng cho phần không hiển thị ban đầu, như accordion, tab hoặc lazy-loaded content, tiết kiệm tải initial load.
Ví dụ website code thuần: Tải khi click button.
HTML
<button id="load-modal">Mở Modal</button>
<script>
document.getElementById('load-modal').addEventListener('click', function() {
if (!document.querySelector('link[href="modal.css"]')) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'modal.css';
document.head.appendChild(link);
}
// Mở modal logic
});
</script>
<!-- modal.css -->
.modal { display: block; background: rgba(0,0,0,0.5); }Trong WordPress, dùng AJAX để load CSS động:
PHP
add_action('wp_ajax_load_modal_css', 'load_modal_css');
function load_modal_css() {
echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/modal.css">';
wp_die();
}JavaScript
// JS side
jQuery.ajax({ url: ajaxurl, data: { action: 'load_modal_css' }, success: function(response) { jQuery('head').append(response); } });Ưu tiên CSS quan trọng
Critical CSS là trích xuất và inline các quy tắc CSS cần thiết cho phần above-the-fold (phần đầu trang hiển thị ngay), để render nhanh mà không cần tải file ngoài. Áp dụng cho mọi trang, đặc biệt mobile-first design, cải thiện Core Web Vitals như LCP và CLS.
Ví dụ web thuần: Inline critical, preload full.
HTML
<style>
/* Critical CSS */
body { margin: 0; font-family: Arial; background: white; }
header { height: 100px; background: blue; color: white; padding: 20px; }
.hero { font-size: 24px; }
</style>
<link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="full.css"></noscript>Tránh lạm dụng CSS nội tuyến
CSS nội tuyến là CSS được nhúng trực tiếp trong thẻ HTML qua thuộc tính style mặc dù nhanh nhưng khó quản lý và sẽ làm tăng kích thước HTML và không thể được lưu trong cache.
Ví dụ CSS nội tuyến trong thẻ HTML:
HTML
<div style="color: red; background: white;">Nội dung</div>Luôn ưu tiên tách biệt style ra file ngoài hoặc dùng Internal CSS. Chỉ dùng CSS nội tuyến khi thực sự cần thiết cho những style rất riêng biệt, không lặp lại. Đây là phương pháp giúp code gọn gàng, hiệu suất cao.
Ví dụ dùng Internal CSS:
CSS
/* style.css */
.content { color: red; background: white; padding: 10px; margin: 20px; }
.text { font-size: 14px; line-height: 1.5; }Sử dụng font-display: swap
Font-display: swap cho phép hiển thị fallback font ngay, swap khi font chính tải xong, tránh FOIT (Flash of Invisible Text). Bạn đặt thuộc tính này bên trong định nghĩa @font-face của mình, như sau:
CSS
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Đây là dòng quan trọng */
}Bật bộ nhớ đệm trình duyệt CSS
Để bật bộ nhớ đệm trình duyệt (browser caching) cho CSS, bạn cần cấu hình các header HTTP trong file cấu hình của máy chủ web hoặc sử dụng plugins nếu dùng WordPress để chỉ định trình duyệt lưu trữ file CSS trong thời gian dài, giúp tăng tốc độ tải trang cho người dùng truy cập lần sau. Việc này giúp trình duyệt không cần tải lại CSS mỗi lần truy cập, chỉ cần đổi tên file CSS khi có thay đổi để ép buộc trình duyệt tải phiên bản mới.
Máy chủ Apache (sử dụng .htaccess):
Apache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>Máy chủ Nginx (trong nginx.conf):
Nginx
location ~* \.(css)$ {
expires 1y;
add_header Cache-Control "public";
}Trong WordPress sử dụng các plugin như LiteSpeed Cache, WP Rocket hoặc W3 Total Cache cung cấp tùy chọn để bật Browser Cache và thiết lập thời gian lưu cache cho các loại file (CSS, JS, images) một cách dễ dàng qua giao diện quản trị.
CSS Animations
CSS animations rất mạnh về hiệu suất nếu dùng đúng cách:
- Ưu tiên animate transform (translate, scale, rotate) và opacity → chạy trên GPU compositor thread, gần như không tốn main thread.
- Tránh animate width/height/top/left/margin/padding → gây reflow + repaint → jank nặng, đặc biệt trên mobile.
- Dùng will-change: transform, opacity chỉ khi thực sự cần (và remove sau animation để tránh memory leak).
- Giới hạn số lượng animation đồng thời, stagger delay để tránh overload CPU/GPU.
- Sử dụng prefers-reduced-motion để tắt hoặc giảm thiểu hoạt ảnh cho người dùng nhạy cảm với chuyển động, tránh gây chóng mặt.
Xem thêm cách dùng hiệu ứng css tại:
https://www.w3schools.com/css/css3_animations.asp https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using
Kết luận
Tối ưu CSS là thủ thuật tăng tốc độ website, vì nó trực tiếp giảm thời gian tải, cải thiện UX và SEO mà không đòi hỏi thay đổi lớn. Không cần làm tất cả cùng lúc; hãy bắt đầu từ xóa thừa và critical CSS, đo lường bằng Lighthouse để thấy tiến bộ. Tránh tối ưu CSS quá đà: Nén CSS hay gộp CSS chồng chéo lên nhau hoặc xoá những đoạn CSS được sử dụng ngầm mà mình không nhìn thấy dẫn đến giao diện bị lỗi lúc nào không hay, vì vậy hãy luôn backup giữ liệu trước khi tối ưu và kiểm tra responsive sau tối ưu để tránh vỡ giao diện trên thiết bị khác.
Ngoài ra, bạn nên tạo cho mình một chiến lược tối ưu JS, font hoặc hình ảnh nữa nó cũng là 1 trong những yếu tố khác góp phần cải thiện tốc độ tải trang giúp website nhanh hơn, ổn định hơn thông qua việc kiểm tra các chỉ số Core Web Vitals.
