Mấy năm gần đây chuyện cạnh tranh tăng tốc độ tải web trở nên khốc liệt hơn. Ngoài việc tăng trải nghiệm cho người dùng, nó còn là cuộc chiến liên quan đến SEO. Điều này thể hiện rõ qua những thang điểm Google đưa ra trong PageSpeed Insight. Có nhiều bài viết liên quan đến việc tăng tốc độ tải trang tôi đã viết. Hôm nay sẽ là một trải nghiệm mới với Javascript Loader.
Trước tiên, chúng ta xem lại một số việc phải làm khi bạn cần cải thiện tốc độ website:
- Đảm bảo bật tính năng nén Gzip và expires headers
- Giảm số lượng request gọi lên server.
- Sử dụng các phương pháp cache để hạn chế truy vấn MySQL
- Hạn chế các tính năng thừa (hay gặp với các bạn xài WordPress)
Đối với một website được truy cập phần đông từ máy tính bàn, việc tối ưu hóa tốc độ trang web có vẻ như không quan trọng lắm. Nhưng bạn nên nhìn vào người dùng của mình từ Google Analytics để biết thêm họ đến từ đâu. Nếu người dùng sử dụng thiết bị di động để truy cập website thì yếu tố mạng, hiệu năng của thiết bị là một trong những yếu tố quan trọng mà bạn cần tính đến.
Lúc này, việc tối ưu hóa tốc độ tải là rất cần thiết.
Phụ mục
javascript….
Nhiều trang web sử dụng thư viện javascript như JQuery hay Bootstrap, bản thân các script này không lớn nhưng để vận hành được các tính năng mong muốn bạn cần thêm nhiều plugin. Mỗi một plugin bạn đính kèm vào bộ thư viện sẽ làm cho bộ thư viện của bạn phìn to dân ra. Bên cạnh đó, việc ngăn chặn quá trình tải trang liên quan đến bộ thư viện này cũng khiến cho website của bạn chậm chạp hơn.
Sau đây là một số giải pháp bạn có thể sử dụng để làm tăng tốc độ trang mà bạn có thể học hỏi được.
Kết hợp Scripts
Chuyện này có người có ý kiến trái ngược với tôi vì việc kết hợp nhiều file sẽ cho ra một file mới có dung lượng lớn hơn. Việc này sẽ làm chậm quá trình tải xuống(vì file lớn), nhưng cũng có ý kiến ngược lại. Việc sử dụng nhiều file hơn có thể làm giảm dung lượng, nhưng lại tăng số lượng request lên server.
Nhìn chung, nếu bạn có nhiều file nhỏ hơn 100Kb thì nên kết hợp chúng lại để tải xuống để giảm số request. Với tình hình mạng mun hiện nay thì con số này là …chuyện nho.
Còn nếu các file của bạn có dung lượng lớn hơn thì bạn nên chia nhỏ chúng ta để tốc độ tải về của tùng file tốt hơn.
Minify Script
Nói cách khác là thu nhỏ kích thước file bằng cách dọn bớt nhưng đoạn mã thừa, không cần thiết. Thông thường một file mã thường chứa rất nhiều khoảng trống, comment không cần thiết. Dọn bớt chúng đi bạn sẽ có thể làm dung lượng file giảm đi đáng kể.
“Đồ chơi” cho bạn ở đây.
Sử dụng một Script Loader
Một Script Loader là một đoạn mã được lập trình, để có thể phân phối các đoạn mã khác theo các kịch bản khác nhau tùy theo từng trường hợp. Lúc đầu, tôi đã không dám sử dụng thứ này vì tôi cho rằng sẽ chẳng khoa học nếu như dùng một script để load một script khác; với mục đích là ..giảm bớt thời gian tải script. Đây là một suy nghĩ sai lầm ! Thực tế nếu biết sử dụng chúng một cách khoa học, chúng ta vẫn có thể tăng tốc độ tải web đáng kể.
Tôi sử dụng HeadJs. Nó khá nhẹ và đơn giản, chỉ viêc đưa vào head như sau:
[code]<head><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22head.core.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/code]
Sau đó chúng ta sử dụng đoạn mã sau:
[code] head.js({jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"},
{app: "/wp-content/js/app.ef15r.1.js"},
{tbls: "/wp-content/jquery.dataTables.1.9.min.js"}
);
[/code]
Đoạn mã này xử lý và cho phép tải 3 script trên không đồng bộ và đảm bảo chúng được tải về lần lượt theo đúng thứ tự trên, không ngăn chặn việc tải và render trang web.
Sau đó, ở footer bạn có thể kiểm tra việc tải lên đã hoàn tất hay chưa và thực hiện các lệnh gọi của mình cho công việc.
[code] head.ready("tbls", function() {if (typeof doDataTables == ‘function’) {
doDataTables();
}
});
[/code]
Hãy cẩn thận nếu như bạn sử dụng $(document).ready(). Bạn cần đảm bảo rằng JQuery đã tải hoàn tất trước khi thực hiện các lệnh gọi. Nếu không, bạn sẽ gặp rất nhiều lỗi.