Trong khi bạn giảm thiểu các tệp CSS, JavaScript và HTML của WordPress, bạn đang thực sự giảm tốc độ tải trang web của mình. Việc giảm thiểu sẽ không làm giảm tốc độ tải trang web của bạn xuống 50%. Tuy nhiên, ngay cả khi giảm một chút cũng sẽ giúp tăng hiệu suất trang web và thay đổi tích cực trong xếp hạng công cụ tìm kiếm.
Giảm thiểu là một quá trình rủi ro có thể phá vỡ trang web của bạn nếu không được thực thi đúng cách. Vì vậy, trước khi bắt đầu rút gọn CSS, JavaScript và HTML, trước tiên bạn cần phải hiểu thực sự rút gọn là gì.
Minification là gì?
Bạn có thể đã thấy thuật ngữ 'Mininify' khi thực hiện các bài kiểm tra hiệu suất trang web trên các công cụ trực tuyến như Google PageSpeed Insights và GTmetrix. Tuy nhiên, bạn đã bao giờ nghĩ về ý nghĩa thực sự của nó chưa?
Minification là quá trình loại bỏ khoảng trắng, dòng và các ký tự không liên quan khỏi mã để giảm kích thước tệp. Kết quả là, điều này làm giảm tốc độ tải trang web .
Nói chung, việc thu nhỏ được thực hiện trên các tệp như CSS, HTML và JavaScript. Bạn cũng có thể rút gọn các tệp PHP nhưng sẽ không thu được bất kỳ lợi ích nào từ nó.
Hợp nhất mã CSS
Trong khi thực hiện việc rút gọn mã CSS, các nhà phát triển sẽ loại bỏ các khoảng trống và nhận xét trên đó.
Dưới đây là một ví dụ về mã CSS bình thường
body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}
Mã CSS sau khi rút gọn sẽ có dạng như sau:
body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}
Khai thác tối đa JavaScript
JavaScript là một ngôn ngữ kịch bản được sử dụng rộng rãi. Nó thường được các nhà phát triển web sử dụng cho đầu ra HTML động.
Mã JavaScript bình thường trước khi rút gọn:
function pentah() {
var Ein = document.getElementById('Ein');
var Er = Ein.value * Ein.value;
alert("Hello" + Ein.value + " = " + Er);
Ein.value = 0;
}
var pos = document.getElementById('pos');
pos.addEventListener ('click', pentah, true);
Mã JavaScript sau khi rút gọn:
function pentah() { var Ein = document.getElementById('Ein'); var Er = Ein.value * Ein.value; alert("Hello" + Ein.value + " = " + Er); Ein.value = 0; }var pos = document.getElementById('pos');pos.addEventListener ('click', pentah, true);
Sự hợp nhất của HTML
HTML hoặc Ngôn ngữ đánh dấu siêu văn bản là nền tảng cơ bản của một trang web. Nó đóng một vai trò quan trọng trong việc cấu trúc thông tin trên một trang web cụ thể.
Mã HTML cơ bản sẽ trông tương tự như thế này
<div class="wrapper">
<div data-text></div>
<span class="item">web developer</span>
<span class="item">Software developer</span>
<span class="item">SEO executive</span>
<h2>I'm Rohan</h2>
</div>
Sau khi áp dụng rút gọn mã HTML, nó sẽ giống như sau:
<div class=wrapper>
<div data-text></div>
<span class=item>Web developer</span>
<span class=item>Software developer</span>
<span class=item>SEO executive</span>
<h2>I'm Rohan</h2>
</div>
Tại sao phải giảm thiểu CSS, JavaScript và HTML?
Như chúng tôi đã giải thích ở đầu bài viết này rằng việc thu nhỏ sẽ giúp giảm kích thước tệp và do đó tăng hiệu suất trang web. Tốc độ tải nhanh hơn giúp nâng cao UX và SEO.
Ngoài ra, Minification giảm thiểu chi phí băng thông vì dữ liệu tối thiểu được truyền qua mạng.
Kiểm tra tốc độ trang web
Trên web, bạn có thể tìm thấy nhiều công cụ để chạy kiểm tra tốc độ trang web . Tuy nhiên, chúng tôi khuyên bạn nên thử kiểm tra tốc độ GTmetrix để kiểm tra xem mã trang web của bạn có được rút gọn hay không.
GTmetrix Minification
Trong ví dụ trên, bạn có thể thấy GTmetrix đề xuất tất cả các tệp cần nén.
Các phương pháp để giảm thiểu CSS, JavaScript và HTML
Có nhiều cách để giảm thiểu CSS, JavaScript và HTML
Phương pháp tối thiểu hóa thủ công
Sử dụng một WordPress Minify Plugin
Phương pháp tối thiểu hóa thủ công
Phương pháp thu nhỏ thủ công chỉ được khuyến nghị cho những người dùng có một số kiến thức về mã hóa và biết họ đang làm gì.
Bạn cần thay thế mã đã rút gọn bằng mã gốc theo cách thủ công.
Bước đầu tiên là tìm kiếm mã cần được nén.
Truy cập Google PageSpeed Insights hoặc Gtmetrix để tìm ra tệp mã cần nén
Bước tiếp theo là tải xuống phiên bản rút gọn của mã.
Bước cuối cùng là tải lên phiên bản thu nhỏ mà bạn đã tải xuống từ Gtmetrix. Bây giờ, hãy thay thế tệp được rút gọn bằng mã nguồn. Để thay thế các tệp, bạn có thể sử dụng FTP Client hoặc công cụ quản lý trang web cPanel .
Ngoài ra, bạn có thể sử dụng các công cụ như JavaScript Minifier (công cụ để rút gọn javascript), CSS Minifier (công cụ để rút gọn CSS), Minify Code (công cụ để rút gọn HTML).
Tiếp theo, hãy thảo luận về cách giảm thiểu CSS, JavaScript và HTML trong WordPress bằng cách sử dụng plugin .
Cách giảm thiểu CSS, JavaScript và HTML trong WordPress bằng Plugin
Trước đó, chúng tôi đã đề cập đến phương pháp thủ công để thu nhỏ không thân thiện với người mới bắt đầu. Tuy nhiên, phương pháp thứ hai chúng ta sẽ thảo luận là sử dụng các plugin WordPress. Do đó, ngay cả người mới bắt đầu cũng có thể thực hiện phương pháp này.
Thư viện WordPress lớn đến mức bạn có thể dễ dàng tìm thấy một số plugin có thể thu nhỏ mã trang web của bạn chỉ với một vài cú nhấp chuột. Hơn nữa, một số plugin bộ nhớ đệm tốt nhất cũng có tính năng thu nhỏ. Tận dụng nó để giảm thiểu mã trang web của bạn.
Trong khi đó, nếu bạn đang tìm cách xóa bộ nhớ cache của trang web WordPress của mình, bạn có thể xem giải pháp bộ nhớ đệm web tốt nhất cho trang web của mình .
Mặc dù bạn có thể tìm thấy một số công cụ để thu nhỏ, chúng tôi khuyên bạn nên sử dụng các plugin WordPress Minify tốt nhất, tức là:
Tự động tối ưu hóa
Autoptimize chắc chắn là plugin WordPress Minify tốt nhất mà bạn có thể sử dụng. Plugin này khá đơn giản để sử dụng và có một số tính năng mạnh mẽ có thể cải thiện đáng kể hiệu suất của bạn.
Ngay cả kích thước của plugin này cũng tương đối nhỏ hơn so với các plugin khác. Plugin Autoptimize có lợi trong việc tổng hợp các tập lệnh. Bên cạnh việc có một số tính năng tối ưu hóa trang web, plugin này có một tùy chọn để giảm thiểu HTML, CSS và JavaScript.
Sử dụng plugin này để giảm kích thước tệp lên đến 50%.
Phần kết luận
Trong bài viết này, hai phương pháp để thu nhỏ đã được giải thích:
Phương pháp thu nhỏ thủ công
Giảm thiểu bằng cách sử dụng plugin.
Chúng tôi hy vọng rằng bạn hiểu cách giảm thiểu các tệp JavaScript, CSS và HTML của trang web WordPress để cải thiện tốc độ trang web của bạn.
Ngoài ra, bạn có thể xem các gói Dịch vụ lưu trữ WordPress được quản lý của chúng tôi cung cấp bộ nhớ SSD tốc độ cao để có tốc độ cực cao nhằm mang lại hiệu suất trang web tối ưu.
Đăng ký ngay chương trình khuyến mại hấp dẫn VDO và tìm hiểu các dịch vụ khác của VDO
Thuê chỗ đặt máy chủ – Thuê server – Thuê VPS – Thuê phần cứng máy chủ – Thuê tủ Rack– Thuê Cloud Server – Dịch vụ GPU server
Không có nhận xét nào:
Đăng nhận xét