Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang!

Có thể nói hiện nay, trải nghiệm người dùng chính là yếu tố quan trọng hàng đầu quyết định việc website bạn có thành công trên internet hay không.

Cho dù bạn đang vận hành một blog ngách, một trang SaaS, hay một cửa hàng trực tuyến đi chăng nữa. Nếu bạn không hề quan tâm đến trải nghiệm của khách hàng hoặc không chăm chút cho viêc tối ưu trải nghiệm của họ, vậy thì bạn đừng nên hi vọng sẽ có bất kì chuyển đổi nào từ khách hàng tiềm năng trở thành những khách hàng trả phí thực sự.

Tin vui là, bất kỳ thương hiệu nào cũng có thể cải thiện kinh nghiệm người dùng bằng cách thu hẹp các yếu tố cụ thể trên trang.

Ví dụ như tốc độ tải trang, là yếu tố đó mà hầu hết các chủ sở hữu trang web dễ dàng bỏ qua.

Theo những dữ liệu về tỷ lệ chuyển đổi, việc tăng tốc độ trang web của bạn từ 8 giây xuống còn 2 giây giúp tỷ lệ chuyển đổi tăng đáng kể đến 74%.

Điều này chỉ ra rằng, một website chậm có thể là nguyên nhân khiến bạn mất gần một nửa số khách hàng tiềm năng của mình.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 1.

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:

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 2.

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 thiểu tài sả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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 3.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 4.

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 slà 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".

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 5.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 6.

Để 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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 7.

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

So với CSS, JavaScript hơi phức tạp hơn trong việc giảm thiểu 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="http://www.yoursite.com/menu.js"> </script>

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

<src="http://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="http://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

Cuối cùng, 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".

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 8.

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

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 9.

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 là do các 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".

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 10.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 11.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 12.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 13.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 14.

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.

Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang! - Ảnh 15.

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!

Nguồn: tech.vccloud.vn

Có thể bạn quan tâm: CDN - Giải pháp tối ưu trải nghiệm lướt web năm 2018

Kể từ ngày 05/11/2018, VCCloud chính thức đổi tên thành BizFly Cloud - là nhà cung cấp các dịch vụ đám mây hàng đầu tại Việt Nam hiện nay với các dịch vụ nổi bật như: BizFly Cloud Server, BizFly CDN, BizFly Load Balancer, BizFly Pre-built Application, BizFly Business Mail, BizFly Simple Storage. Hãy tăng tốc thích nghi cho doanh nghiệp cùng các giải pháp công nghệ của BizFly Cloud tại đây.

SHARE
Previous articleDorkbot
Next articleDorkbot