Tối ưu, nén CSS và JS tăng tốc độ tải trang

Nguyễn Trọng Nhân

2505

25-07-2024

Nén CSS là gì?

Nén CSS là quá trình giảm kích thước tệp CSS bằng cách loại bỏ các ký tự không cần thiết như khoảng trắng, dấu chấm phẩy cuối dòng và các chú thích. Việc nén CSS giúp cải thiện tốc độ tải trang web, giảm băng thông sử dụng và tối ưu hóa hiệu suất của trang. Quá trình này không làm thay đổi chức năng của mã CSS mà chỉ làm cho nó nhỏ gọn hơn, giúp trình duyệt xử lý nhanh hơn. 

Tại sao chúng ta nên tối ưu nén CSS cho website?

Việc tối ưu nén CSS mang lại rất nhiều lợi ích cho website của bạn. Dưới đây là 5 lý do chính:

• Cải thiện tốc độ tải trang web: Giảm kích thước tệp CSS giúp trang web tải nhanh hơn, cải thiện trải nghiệm người dùng.
• Giảm băng thông sử dụng: Tiết kiệm băng thông, giảm chi phí vận hành và tối ưu hóa hiệu suất máy chủ.
• Tăng cường trải nghiệm người dùng: Trang web tải nhanh giữ chân người dùng lâu hơn và tăng khả năng họ quay lại.
• Cải thiện SEO: Tốc độ tải nhanh giúp cải thiện thứ hạng trên công cụ tìm kiếm và tăng lượng truy cập tự nhiên.
• Dễ dàng bảo trì và quản lý mã nguồn: Mã nguồn nhỏ gọn, dễ quản lý và bảo trì mà không lo xung đột hay lỗi.

Làm thế nào để biết website đang gặp vấn đề về CSS?

Trong quá trình phát triển và duy trì website, việc tối ưu hóa CSS là một yếu tố quan trọng giúp cải thiện tốc độ tải trang và trải nghiệm người dùng. Tuy nhiên, không phải lúc nào chúng ta cũng dễ dàng nhận biết được website mình đang gặp vấn đề về CSS. Một trong những công cụ hữu ích giúp bạn kiểm tra và phát hiện các vấn đề về CSS trên website là Google Pagespeed Insight.

Google Pagespeed Insight là một công cụ miễn phí do Google cung cấp, giúp phân tích hiệu suất của website trên cả máy tính và thiết bị di động. Công cụ này không chỉ đánh giá tốc độ tải trang mà còn cung cấp các gợi ý chi tiết để cải thiện hiệu suất, bao gồm cả việc tối ưu hóa CSS.

Hướng dẫn sử dụng Google Pagespeed Insight để kiểm tra CSS

• Truy cập vào Google Pagespeed Insight: Đầu tiên, bạn cần truy cập vào trang web của Google Pagespeed Insight tại địa chỉ https://developers.google.com/speed/pagespeed/insights/.
• Nhập URL của website: Tiếp theo, bạn nhập URL của website mà bạn muốn kiểm tra vào ô tìm kiếm và nhấn Enter.
• Đợi kết quả phân tích: Google Pagespeed Insight sẽ tiến hành phân tích website của bạn và cung cấp điểm số hiệu suất cho cả phiên bản trên máy tính và thiết bị di động.
• Xem các gợi ý tối ưu hóa: Trong kết quả phân tích, bạn sẽ thấy một danh sách các gợi ý tối ưu hóa được chia thành nhiều mục khác nhau. Để biết website đang gặp vấn đề về CSS, bạn cần chú ý đến các mục liên quan đến CSS như "Eliminate render-blocking resources" hoặc "Minify CSS".

Lợi ích và hạn chế khi nén CSS

1. Lợi ích

• Cải thiện tốc độ tải trang web: Khi tệp CSS nhỏ hơn, trình duyệt có thể tải và hiển thị trang web nhanh hơn.
• Giảm băng thông sử dụng: Việc giảm kích thước tệp CSS giúp tiết kiệm băng thông, đặc biệt quan trọng đối với người dùng di động.
• Tăng cường trải nghiệm người dùng: Trang web tải nhanh hơn giữ chân người dùng lâu hơn và giảm tỷ lệ thoát trang.
• Cải thiện SEO: Tốc độ tải trang nhanh hơn có thể cải thiện thứ hạng trên công cụ tìm kiếm và tăng lượng truy cập tự nhiên.
• Dễ dàng bảo trì và quản lý mã nguồn: Mã nguồn nhỏ gọn hơn giúp việc quản lý và bảo trì dễ dàng, giảm nguy cơ xung đột và lỗi.

2. Hạn chế

• Khó đọc mã nguồn: Mã nguồn sau khi nén trở nên khó đọc và khó hiểu hơn, gây khó khăn khi cần chỉnh sửa.
• Khó khăn trong việc gỡ lỗi: Việc gỡ lỗi trở nên phức tạp hơn do mã nguồn đã bị nén.
• Có thể gây ra lỗi nếu nén không đúng cách: Quá trình nén không chính xác có thể gây ra lỗi hiển thị hoặc chức năng của trang web.

Xem xét toàn cảnh tốc độ tải với PageSpeed Insights

Để chắc chắn các vấn đề trên trang web có ảnh hưởng đến tốc độ tải, bạn có thể sử dụng Google PageSpeed Insights. Đây là một công cụ miễn phí tự động quét cả phiên bản desktop lẫn mobile của website.

Ngoài các vấn đề được phát hiện, PageSpeed Insights cũng sẽ hiển thị cho bạn một số đề xuất để cải thiện và khắc phục. Trường hợp cụ thể như trong ảnh dưới đây:

Trường hợp này chỉ ra rằng: mã CSS và JavaScript đang làm chậm website. Mặc dù việc tối ưu này có vẻ giống như một công việc cho các dev chuyên nghiệp, nhưng thực tế, chúng ta - những người dùng với trình độ không quá cao, vẫn có thể dễ dàng thực hiện các thao tác tối ưu với sự trợ giúp của các công cụ hữu ích.

Và không để các bạn phải chờ lâu, dưới đây là các bước hướng dẫn giúp bạn giảm kích thước các tài nguyên CSS và JavaScript của chính mình.

1. Xác định code được rút gọn

Việc thu gọn mã code chính là việc xóa bỏ các ký tự không phục vụ bất kỳ chức năng nào khác ngoài việc chỉ giúp cải thiện khả năng đọc.

Ví dụ: nhận xét nội tuyến có thể giúp nhà phát triển hiểu được nhiệm vụ cụ thể của phần mã đó là gì. Mặc dù chúng khá hữu ích cho việc review hoặc gỡ lỗi, nhưng đồng thời chúng cũng làm tăng kích thước của mã lên.

Việc thu gọn này sẽ giúp loại bỏ các ký tự dư thừa - do đó làm giảm mức sử dụng băng thông và tăng tốc độ tải trang.

Sử dụng PageSpeed Insights, bạn sẽ dễ dàng xác định được mã nào cần phải được rút gọn. Chỉ cần nhấp vào "Show how to fix" và đi theo chỉ dẫn trong CMS (Hệ thống quản lý nội dung - Content Management System) hoặc FTP (Giao thức truyền tệp - File Transfer Protocol) của bạn.

Ví dụ: nếu trang web của bạn chạy trên WordPress, thì toàn bộ code sẽ được hợp nhất trong phần "Editor". Phần này có thể được tìm thấy trong tab "Appearance" từ trang dashboard chính.

2. Tối ưu code

Kết thúc phần trên, bạn đã xác định được code nào cần được rút gọn, bây giờ là lúc tìm hiểu cách rút gọn chúng.

Có lẽ cách đơn giản nhất để rút gọn mã là tận dụng các công cụ tự động. Khi nói đến CSS và JavaScript, một số công cụ tốt nhất cho việc này không thể không nhắc tới đo là CSS Minifier và JSCompress.

Sử dụng CSS Minifier

CSS Minifier là một công cụ miễn phí và đơn giản giúp tự động nén các nội dung CSS. Tất cả những gì bạn cần làm là dán code vào trường input, đặt mức nén và nhấp vào "Minify".

Tùy thuộc vào kích thước của code, mà sẽ mất vài giây đến một phút để thực hiện việc rút gọn này. Code mới sau đó có thể được sao chép trở lại vào giao diện khách CMS hoặc FTP của bạn.

Lưu ý quan trọng: Để chắc chắn, đừng quên tạo bản sao lưu trước khi thực hiện bất kỳ thay đổi nào với code của website. Tạo bản sao dựa trên đám mây hoặc ngoại tuyến là cách khá đơn giản và thông dụng để thực hiện.

Để kiểm tra xem việc tối ưu hóa bạn vừa thao tác có hiệu quả hay không, hãy tiếp tục và chạy một phân tích khác bằng PageSpeed Insights. Chắc chắn tệp CSS bạn vừa nén sẽ không còn xuất hiện trong phần chi tiết của "Minify CSS" nữa.

3. Sử dụng tải không đồng bộ trên JavaScript

So với CSS, JavaScript phức tạp hơn một chút trong việc nén một cách chính xác. Trước khi bạn chạy code thông qua JSCompress thì hãy cân nhắc triển khai việc tải mã không đồng bộ trước tiên, Hay còn được gọi là "Lazy Loading" (tạm dịch "Tải xuống Lười biếng") - nhưng trong ngữ cảnh của JavaScript, tải không đồng bộ hoạt động bằng các chức năng tải động.

Để sử dụng tải không đồng bộ, chỉ cần thêm thẻ "async" khi gọi tệp .js. Điều này có thể được thực hiện trong mã nguồn HTML của website.

Sau đây là một ví dụ:

<script src="yourscript.js" async> </script>

4. Kết hợp các tệp JavaScript

Một điểm đáng lưu ý khi nói đến việc tối ưu hóa JavaScript là kết hợp các tệp trong một trang. Bằng cách lạm này, bạn sẽ góp phần  giảm số lượng requests HTTP mà trình duyệt tạo ra, giúp tăng tốc độ tải trang.

Ví dụ: thay vì gọi nhiều tệp .js trong mã nguồn của bạn:

<script src="https://www.yoursite.com/menu.js"> </script>

<src="https://www.yoursite.com/tools.js"> </script>

<src="https://www.yoursite.com/footer.js"> </script>

Bạn có thể kết hợp chúng thành một tệp JavaScript bằng cách sử dụng editor và gọi tất cả chúng cùng một lúc:

<src="https://www.yoursite.com/all.js"> </script>

Để cải thiện thêm thời gian xử lý script, hãy bỏ qua các thẻ "http" và "type". 

Ví dụ: thay vì sử dụng: 

<script src=" http: //www.yoursite.com/all.js" type="text/javascript" > </script>

Bạn hãy sử dụng đơn giản như sau:

<script src="//www.yoursite.com/all.js"> </script>

5. Sử dụng JSCompress

JSCompress là một công cụ thu gọn tương tự javascript minify. Sử dụng JSCompress cũng đơn giản như sử dụng CSS Minifier vậy. Bạn chỉ cần dán code vào trường input và nhấp "Compress JavaScript".

Tiếp theo, điều hướng đến tab "Output" để xem JavaScript đã nén của bạn:

6. Loại bỏ các code dư thừa

Một vấn đề về hiệu suất khác mà website gặp phải chính là sự xuất hiện của code dư thừa hoặc mã trùng lặp, thường xuất hiện khi một số yếu tố trong trang đã bị xóa, khiến code không được sử dụng.

Cách tuyệt vời để tìm ra code dưa thừa là sử dụng các công cụ dành cho nhà phát triển được tích hợp trong Google Chrome. Kích hoạt các tools này bằng cách mở menu chính, chọn "More Tools" và sau đó nhấp vào "Developer Tools".

Hãy đảm bảo bạn đang ở trên trang bạn muốn tối ưu khi bạn thực hiện thao tác  này.

Sau khi kích hoạt công cụ nhà phát triển, hãy tìm "Coverage" trong phần phụ "More Tools" từ menu settings.

Thao tác này sẽ mở tab "Coverage" trong bảng điều khiển dành cho nhà phát triển. Từ đó, nhấp vào nút "Instrument Coverage" để bắt đầu thử nghiệm.

Khi thử nghiệm kết thúc, bạn sẽ thấy danh sách các tài sản code cùng với các bytes không sử dụng của chúng. Điều này được thể hiện bằng thanh màu đỏ và màu xanh lá cây ở bên phải như ở ảnh dưới đây.

Nếu đây là lần đầu tiên bạn kiểm tra code dư thừa, bạn sẽ thấy sự kết hợp giữa các tài sản CSS và JavaScript trong danh sách này. Hãy kiểm tra kĩ càng những điều này để phát hiện xem có bất kỳ nhân tố nào đang không được sử dụng hay không.

Loại bỏ toàn bộ code dư thừa cái một có thể khiến bạn cảm thấy thật nhàm chán. Nhưng nếu bạn muốn cung cấp cho khách truy cập một trải nghiệm người dùng hoàn hảo, thì đây là điều vô cùng cần thiết.

Ngoài ra, hãy nhớ rằng code dư thừa, không được sử dụng có thể tích lũy theo thời gian, vì vậy hãy nhớ lên kế hoạch cho việc dọn dẹp tiếp theo cho website của bạn.

 Hướng dẫn các cách nén CSS giúp tăng tốc độ website hiệu quả

1. Nén CSS thủ công

Nén CSS thủ công là phương pháp đơn giản và dễ thực hiện nhất. Bạn có thể làm theo các bước sau:

• Xóa khoảng trắng và dòng trống: Loại bỏ tất cả các khoảng trắng và dòng trống không cần thiết trong mã CSS của bạn.
• Gộp các khai báo CSS giống nhau: Nếu có nhiều khai báo giống nhau, hãy gộp chúng lại để giảm kích thước mã.
• Sử dụng công cụ nén trực tuyến: Có nhiều công cụ nén CSS trực tuyến miễn phí như CSS Minifier, CSS Compressor. Bạn chỉ cần sao chép mã CSS vào công cụ này và nhận lại mã đã được nén.

2. Nén CSS bằng phần mềm

Sử dụng phần mềm để nén CSS giúp bạn tiết kiệm thời gian và đảm bảo mã được nén một cách chính xác. Một số phần mềm phổ biến bạn có thể sử dụng bao gồm:

• Prepros: Đây là một công cụ hỗ trợ nén CSS, JavaScript và nhiều loại tệp khác. Bạn chỉ cần thả tệp CSS vào Prepros, công cụ sẽ tự động nén tệp cho bạn.
• CodeKit: Tương tự như Prepros, CodeKit cũng hỗ trợ nén CSS và nhiều loại tệp khác. Bạn chỉ cần thêm dự án vào CodeKit và công cụ sẽ tự động nén các tệp CSS.

3. Nén CSS bằng plugin (Wordpress)

Nếu bạn sử dụng Wordpress, việc nén CSS trở nên dễ dàng hơn bao giờ hết nhờ các plugin. Dưới đây là một số plugin phổ biến:

• Autoptimize: Plugin này không chỉ nén CSS mà còn tối ưu hóa JavaScript và HTML. Sau khi cài đặt và kích hoạt plugin, bạn chỉ cần vào phần cài đặt và bật tùy chọn nén CSS.
• W3 Total Cache: Đây là một plugin toàn diện giúp tối ưu hóa hiệu suất website. Bạn chỉ cần vào phần cài đặt của plugin và bật tùy chọn nén CSS.
• WP Super Minify: Plugin này đơn giản và dễ sử dụng, giúp nén CSS và JavaScript. Sau khi cài đặt, bạn chỉ cần kích hoạt plugin và các tệp CSS của bạn sẽ được nén tự động.

Kết luận

Đối với những người không phải là lập trình viên, việc tối ưu hóa CSS và JavaScript website có thể khiến bạn cảm thấy hơi nặng nề về mặt kĩ thuật chuyên sâu. Tuy nhiên, với các công cụ và máy chủ web phù hợp, bạn không cần phải là một nhà phát triển web dày dạn kinh nghiệm để thực hiện các việc tối ưu như đã hướng dẫn ở trên.

Chúc các bạn thành công!

Theo Bizfly Cloud chia sẻ

Có thể bạn quan tâm: 10 lý do không thể bỏ qua CDN khi tối ưu website