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

GIANG

1623

03-05-2018

Theo Bizfly Cloud chia sẻ 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.

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.

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: CDN - Giải pháp tối ưu trải nghiệm lướt web năm 2018