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

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

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.

Tối ưu hóa hình ảnhnâ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.

 

 

Thích hoặc chia sẽ bài này

  • Administrator

    Gọn gàng sạch đẹp 🙂