Tối ưu hóa website (Phần 1)

Tối ưu hóa là cách làm cho website hoạt động trơn tru hơn, tốt hơn. Nhìn chung mọi người thường hiểu là làm sao cho website của tôi "chạy nhanh". Đôi khi có những định nghĩa tối ưu hóa website tương đương với việc tối ưu hóa đối với bộ máy tìm kiếm (SEO), ở đây mình xin trình bày khía cạnh tối ưu hóa nội dung, tài nguyên website.

Những kiến thức này dựa trên việc tham khảo tài liệu của 2 chương trình Page Speed (anh Goo) và YSlow (anh Yah), mình đã giản lược đồng thời mô tả chi tiết hơn một số khái niệm để các bạn có thể nắm được.

Tối ưu hóa tài nguyên website
Tài nguyên website được kể ở đây chính là: hình ảnh, tập tin javascript, tập tin css, tập tin html. Thông thường ta sử dụng những tài nguyên này và không nghĩ rằng có thể làm gì với nó để cho nó phục vụ website tốt hơn. Việc tối ưu hóa chúng nhằm mục đích cải thiện thời gian tải về của trang web (là làm nhanh lên đó), việc cải thiện này cũng sẽ làm giảm tải phía máy chủ nhưng đôi lúc cũng bắt máy chủ làm việc nhiều hơn.

Javascript
Đầu tiên ta sẽ bàn đến việc tối ưu hóa javascript, bạn cần phải có một trình xử lý "nén" mã javascript lại, nghe thật lạ nhỉ ? Javascript chỉ là những câu chữ chứ đâu có phải là tập tin gì đó mà có thể nén được ! Vâng, thuật ngữ "nén" được dùng ở đây chỉ việc làm giảm thiểu số từ, số chữ làm cho mã javascript của chúng ta "xúc tích" hơn, một ví dụ đơn giản:

while (true) {
    alert('Hello World !!!');
}

Xin khuyến cáo các bạn đừng cố chạy thử đoạn mã "liên tu bất tận" này, đoạn mã trên gồm có 3 dòng, có khoảng 43 ký tự (tùy trình soạn thảo), sau khi "nén" lại ta được:

while(true){alert('Hello World !!!');}

Còn 39 ký tự, bạn thấy không, chỉ một đoạn 43 ký tự mà sau khi nén còn 39 ký tự, ta đã tiết kiệm được những 4 ký tự, chắc là 10%. Thoạt nghe, bạn có thể nghĩ, sao mình người "nhớn" làm việc "nhớn", cớ sao tính toán chi li từng ký tự một thế, nhưng nếu nhìn tổng quan với một tập tin 40k tiết kiệm 4k và với nhiều tập tin như thế thì ta có thể "giữ của" được một con số đáng kể.

Họ đã làm điều đó như thế nào
Công việc cơ bản mà một số trình "nén" mã javascript thường làm là:

1. Loại bỏ những dòng chú thích, tất nhiên rồi, khi xuất bản website thì ai lại cần chú thích cho khách vào web xem.
2. Loại bỏ những khoảng trống thừa trong cú pháp javascript, ví dụ: if ( true ) alert() thì sẽ thành if(true)alert(), dính liền "tù tì"
3. Loại bỏ những dấu xuống dòng,  thành ra đoạn mã sẽ thành một con rắn dài ơi là dài

Một số cách "nén" nâng cao hơn nữa

1. Thay thế những tên biến cục bộ thành dạng ký tự đơn ngắn gọn, ví dụ function (myname, myage) thành function(a,b)
2. Sử dụng từ điển để tạo một đoạn nén đơn giản và sẽ giải nén khi tải xuống trình duyệt

Thế đó, việc nén cũng lắm nhiêu khê và cũng có những điều cần lưu ý khi nén:

• Nên lưu trữ lại bản gốc, một số trình nén ghi đè tập tin gốc, thành ra coder sẽ mếu máo khi mò lại từ mớ bòng bong đã bị nén.
• Viết đúng cú pháp javascript, nhất là luôn ghi nhớ có dấu ; cuối dòng
• Tránh sử dụng những lệnh đơn theo sau những lệnh if, for, while, tốt nhất nên bao các "em nó" lại bằng cặp {}
• Nên gộp tất cả tập mã javascript cần dùng lại và nén một thể, dung lượng sẽ nhỏ hơn nhiều. Ví dụ bạn có 3 tập tin A.js, B.js, C.js, sau đó bạn nén từng tập tin riêng lẻ thành A_nen.js, B_nen.js, C_nen.js, điều này sẽ không "tiết kiệm" bằng việc gộp 3 tập tin thành ABC.js và nén một lượt, ABC_nen.js sẽ nhỏ hơn tổng dung lượng 3 tập tin A_nen.js, B_nen.js, C_nen.js cộng lại.

Công cụ "nén" Javascript
Nãy giờ giới thiệu cách nén nhưng chưa giới thiệu "đồ chơi" để các bạn "vọc", và đây công cụ packer, một công cụ mạnh mẽ, thông dụng, miễn phí, nói chung là "ngon bổ rẻ": http://dean.edwards.name/packer/

Vào trang chính của packer, sẽ thấy 2 khung nhập, một khung dùng để dán đoạn mã cần nén vào, một khung là kết quả sau khi nén. Packer có 2 tùy chọn:

• Base 62 encode: Là cách nén sử dụng từ điển như đã nêu
• Shrink variables: "Làm khó" người đọc bằng cách chuyển tên biến từ dài dòng thành a, b, c, d

Nào, bạn hãy thử nén xem sao và hãy nhớ kỹ những phần mình đã lưu ý.

Bài sau: Tối ưu hóa website - Tối ưu hóa CSS