Giảm bớt HTML, CSS và JavaScript cho website WordPress là cách tối ưu hóa giúp tiết kiệm nhiều byte dữ liệu làm cho trang web nhẹ hơn và tải nhanh hơn.

Bạn nên giảm bớt (minify) cho các tài nguyên HTML, CSS và Javascript. Điều này giúp các tài nguyên được tối ưu hóa trong khi nó không ảnh hưởng đến cách mà các trình duyệt sẽ xử lý.

Giảm bớt HTML, CSS và JavaScript là gì?

Giảm bớt HTML, CSS, và JavaScriptNội dung HTML, CSS, và JavaScript được viết với cấu trúc dễ nhìn, đẹp và có các ghi chú để có thể dễ dàng để sửa đổi. Vì vậy nội dung ban đầu của nó có nhiều thứ không cần thiết cho các trình duyệt. Giảm bớt HTML, CSS, và JavaScript có nghĩa là loại bỏ những gì không cần thiết để có được một nội dung được tối ưu hóa và gọn gòn hơn.

Giảm bớt HTML, giảm kích thước các tập tin CSS và JavaScript giúp bạn tiết kiệm băng thông một cách đáng kể và trang web của bạn cũng được tải nhanh hơn.

Làm thế nào để giảm bớt HTML, CSS và JavaScript

Ví dụ bạn có một đoạn bao gồm HTML, CSS và Javascript như sau:

<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container { font-size: 120% }
.awesome-container { width: 50% }
</style>
</head>

<body>
<!– awesome container content: START –>
<div>…</div>
<!– awesome container content: END –>
<script>
awesomeAnalytics(); // beacon conversion metrics
</script>
</body>
</html>

Hãy loại bỏ tất cả những thứ không cần thiết cho trình duyệt để giảm kích thước cho các tài nguyên HTML, CSS, và JavaScript.

  • Đối với một lập trình viên thì việc ghi chú vào các đoạn mã là điều cần thiết để dễ dàng quản lý và sửa đổi. Đối với các trình duyệt thì đó là dư thừa, vì vậy hãy xóa nó trong các tập tin CSS ( /* … */ ), HTML ( <!- … -> ), và JavaScript ( // … ).
  • Loại bỏ tất cả các khoảng trắng không cần thiết và các lệnh xuống dòng. Bạn sẽ thấy nội dung gọn gàng và nhẹ hơn để tải.
  • Đối với CSS, không khai báo lặp lại các quy tắc như “.awesome-container” ở trên.
  • Biên dịch, thay đổi phương thức lập trình và rút gọn tên biến… cho các đoạn mã Javascript. Tuy nhiên, điều này đòi hỏi bạn có một sự hiểu biết cao.

Với đoạn mã ở trên, sau khi giảm bớt HTML, CSS và Javascript bạn sẽ được như sau:

<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>

Để giảm bớt HTML, bạn có thể sử dụng HTML Minifier. Để giảm bớt CSS, bạn có thể dùng YUI Compressor hoặc cssminifier.com. Để giảm bớt Javascript, bạn có thể dùng Closure Compiler và JSMin.

Giảm bớt HTML, CSS, và JavaScript cho WordPress

Đối với WordPress, bạn có thể dùng tính năng Minify của plugin W3 Total Cache để giảm bớt HTML, CSS, và JavaScript. Mặc dù vậy, bạn nên tối ưu hóa kích thước các tệp tin một lần bằng các công cụ thay vì sử dụng plugin để làm điều này. Nó sẽ giúp bạn tiết kiệm được thời gian và tài nguyên máy chủ cho mỗi lần thực hiện việc này.

Bạn nên giữ phiên bản gốc để dễ dàng sửa đổi và tiếp tục phát triển về sau và sử dụng phiên bản đã được tối ưu hóa cho trang web đang chạy.

Tối ưu hóa hình ảnh và nâng cao lưu vào bộ nhớ cache trong trình duyệt cũng sẽ giúp trang web của bạn tải nhanh hơn.

Tham gia cuộc thảo luận

6 Bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

  1. Trả lời

    1. Bạn phải lưu lại bản gốc để tiện sau này chỉnh sửa chứ? Bạn thử tìm cái CSS Unminify xem.

      Trả lời

      1. dạ e cảm ơn . Ah còn những hình ảnh như thế này thì sao tối ưu vậy ad . E tìm hoài trong filezilla cũng ko có nhưng google lại hiện . Cảm ơn ad nhiều lắm

        Trả lời

        1. vd có hình ảnh của plugin pushow ghi : www.pnd.pushow............hoặc https://cdn.pushowl.com/static/cdn/onboarding/minimal/style.css (thời gian hết hạn không được chỉ định)

          E tìm hoài trong filezilla mà hoài vẫn k thấy

          Trả lời

          1. Mấy cái đó là họ chèn mã trong mấy file .php của plugin. Mấy file .css đó nằm trên máy chủ khác nên bạn không quyết định nó được, mà nó cũng có sao đâu bạn?

  2. Trả lời