Tổng số lượt xem trang

Thứ Sáu, 22 tháng 3, 2013

Tối ưu hóa web, nén Javascript và CSS để tăng tốc cho web

Tốc độ tải website, một vấn đề luôn được chú trọng hàng đầu. Trong bài viết hôm nay tôi sẽ giới thiệu cho bạn cách cắt giảm chi tiêu về dung lượng lưu trữ cho các tệp tin .css và .js trên hệ thống. Thuật ngữ “Nén” dường như không còn gì xa lạ với mọi người. Một thư viện javascript trần thường có thể chiếm dung lượng lên đến cả hàng trăm kí lô byte.Điển hình là JQuery đồ sộ. Bạn có biết Jquery lúc chưa được nén có dung lượng bao nhiêu? Sắp xỉ 229KB. Nhưng bản nén thì sao? chỉ vào khoảng 31KB thôi bạn ạ. Trên máy ta thì chắc nó chả có nghĩa địa gì.

Nhưng trên trường WWW, một Webmaster có tầm nhìn xa chắc chắn sẽ thấy một tương lai thiệt thòi trước mắt.

Những lợi ích mà việc nén Javascript và CSS mang lại
+ Tăng tốc độ duyệt web của người dùng. À, thay vì gòng lên tải cả trăm kí. Người dùng chỉ cần tải một file nén với kích thước nhỏ hơn nhưng lại không ảnh hưởng gì đến trang web đang xem.

+ Tránh những cập mắt tò mò. Sau khi nén, việc soi code có lẽ sẽ khó khăn hơn bình thường khá nhiều.

+ Tiết kiệm được không gian lưu trữ: Có vài trăm kí thì có ích gì… không với những kí lô byte mà ta tiết kiệm được đó, ta có thể lưu trữ thêm được một mớ ảnh đấy .

+ Tiết kiệm băng thông: như trên

Nén Javascript và CSS thế nào?
Nén Javascript
Nén, thực chât là loại bỏ những ký tự dư thừa vốn không cần thiết trong code. Ví dụ như: khoảng trống, xuống dòng, chú thích, … Hay làm ngắn đoạn code lại bằng cách lựợc bỏ những biến không cần thiết, những giá trị lập đi lập lại, … . Hiên nay có khá nhiều công cụ online giúp bạn làm công đoạn “nén” này một cách tự động.

Mình xin đề cử một công cụ nén Javascript tổng hợp vô cùng hiệu quả, đó là:

http://compressorrater.thruhere.net/

Bạn chỉ cần copy đoan code mình muốn nén, cho nó vào hộp text. Và ấn “CompressorRate It!”… chờ vài phút, để trang web xử lí code của bạn với từng loại thuật toán. Sau khi hoàn tất, sẽ có một bảng báo cáo đầy đủ cho bạn.


Một số thông tin bạn nên biết khi xem bảng báo cáo của CompressorRater.

Compression Tool: công cụ dùng để nén, hay thuật toán nén JS. Thường thì YUI sẽ cho kết quả tối ưu nhất.
Run time: Tốc độ thực hiện code (khi client đã tải xong). Đừng nên dùng js nào được nén mà Run time quá lâu bạn nhé.

Size: Quan trọng này, cột đầu tiên là kích thước sau khi nén tính theo byte. % thể hiện dung lượng script được nén so với nguyên bản của nó.

Khi chọn được những thông số ưng ý, ấn “View” để xem source code (đã nén). Bạn có thể copy nó ra rồi dán vào file js để dùng hoặc nội dung file nén này lại với lệnh File -> Save as… trên trình duyệt.

Ghi chú

Một lời khuyên nho nhỏ, nếu site của bạn phải import nhiều file .js. Bạn hãy copy nội dung tất cả bọn chúng cho vào công cụ nén => ra một file duy nhật + dung lượng bé.

Nén CSS

Cách nén của CSS cũng có phần giống Javascript. Ngoài việc loại bỏ ký tự dư thừa. Với CSS ta còn có thể gộp nhiều thuộc tính giống nhau lại thành một nhóm, như vậy sẽ tiết kiệm được thêm vài dòng code. Ví dụ như:

Mã:1 margin-left: 5px; 2 margin-right: 5px; 3 margin-top: 5px; 4 margin-bottom: 5px;

Ta có thể gọp lại thành một dòng duy nhất.
Mã:1 margin: 5px;

Với CSS, bạn có thể dùng công cụ sau: http://www.csscompressor.com/
Chỉ cần copy toàn bộ code css bỏ vào, ấn compress. Sau khi nén xong bạn chỉ cần copy đoạn code được nén chép đè lên phần style css cũ. Và như mình nói ở đầu bài. Việc nén này hoàn toàn vô hại, không làm thay đổi ý nghĩa những dòng code của ta mà chỉ làm cho chúng trở nên gọn gàn. Loại bỏ đi những phần thừa thải không cần thiết.

Lưu ý


Sau khi nén xong, code sẽ rất khó chỉnh sửa do code nén thường chỉ còn có 1 dòng duy nhất (giảm kích thước tối đa mà). Code viết liên miên không có cách, chú thích, hay làm dấu hiệu gì để cho dễ đọc. Vì thế bạn nên lưu một bản nháp để sau này tiện chỉnh sửa và nén tiếp nhé

Sưu tầm và chỉnh sữa.

6 nhận xét:

  1. IECS va Vuatiengduc là Công Ty uy tín chuyên về lĩnh vực tư vấn Du Học Đức – đặc biệt là Du Học Nghề Đức, với kinh nghiệm xử lý hơn 500 hồ sơ theo chương trình Du Học Nghề Đức ngành Điều Dưỡng và Du Học Nghề Đức Nhà Hàng-Khách Sạn (NHKS). Chúng tôi cung cấp các khoá học tiếng Đức chất lượng cao, giá cả hợp lý nhất tại Tp.HCM.
    Bạn muốn học tiếng Đức?



    Các khóa học tiếng Đức ở Tp Hồ Chí Minh tại trung tâm IECS theo tiêu chuẩn của Đức với đội ngũ giáo viên giàu kinh nghiệm, giảng dạy nhiệt tình và cơ sở vật chất hiện đại. Ngoài ra các bạn được tham dự miễn phí các khóa học ngoại khóa hàng tuần vào thứ 7 với người bản ngữ.
    Đến với các khóa học của IECS, các bạn sẽ được giải đáp câu hỏi học tiếng Đức có khó không?

    Các bạn sẽ luôn nhận được sự quan tâm từ phía trung tâm tiếng Đức Sài Gòn, đồng thời giáo trình tiếng Đức, cách day luôn được cải tiến giúp học viên dễ tiếp thu và đạt kết quả cao trong các kỳ thi. Học ngoại ngữ đang là một nhu cầu cấp bách của cuộc sống hiện đại.

    Ngoài ra sau khi học tiếng Đức bạn còn có cơ hội du học nghề Đức


    Sau khi học tiếng Đức hoặc là tự học tiếng Đức từ lúc học tiếng Đức cơ bản như bảng chữ cái tiếng Đức cho đến khi hoàn thành B1. Chắc hẳn các bạn vẫn chưa biết cấu trúc đề thi gồm những phần nào, cụ thể thi như thế nào thì các bạn có thế đến bên trung tâm mình để luyện thi B1.

    Trường hợp các bạn đã nắm vững kiến thức thì có thể ghé bên mình để luyện nghe B1.

    Khóa luyện thi tiếng Đức sẽ tập trung giúp học viên làm bài thi tiếng Đức đạt điểm số cao nhất. Ngoài ôn tập lại kiến thức, các giáo viên sẽ đưa ra lời khuyên cho từng dạng bài cụ thể. Với 1 số câu hỏi thậm chí có thể suy luận được mà không cần biết tất cả ngữ nghĩa của cả bài. Đây chính là mấu chốt để lấy số điểm tối đa trong mỗi kỳ thi tiếng Đức.
    Vượt qua bài thi không khó nếu các bạn nắm vững đc cách hành văn cũng như phân tích rõ ý. Bên mình sẽ đưa ra một vài mẫu tham khảo dành cho các bạn.

    Ngoài ra bên mình còn có các khoá học tiếng Đức cho người mới bắt đầu



    Trả lờiXóa
  2. ad có thể giúp e seo trang này được không ạ http://www.duhocnghe.de/

    Trả lờiXóa
  3. Ngoài ra các bạn có thể truy cập vào http://luatphapduc.de/ để biết thêm nhiều thông tin và được hỗ trợ về du học Đức nha!

    Trả lờiXóa
  4. IECS là công ty chuyên tư vấn du học Đức, đặc biệt du học nghề Đức ngành điều dưỡng tại Hà Nội và Thành Phố Hồ Chí Minh. IECS là trung tâm du học nghề Đức uy tín và tốt nhất Việt Nam. Xem thêm tại dieuduongduc

    Trả lờiXóa
  5. theo tôi được biết IECS là công ty chuyên tư vấn du học Đức, đặc biệt du học nghề Đức ngành điều dưỡng tại Hà Nội và Thành Phố Hồ Chí Minh. IECS là trung tâm du học nghề Đức uy tín và tốt nhất Việt Nam, truy cập vào website Luật pháp đức để hiểu thêm về du học nghề Đức nhá

    Trả lờiXóa
  6. Bạn đang tìm kiếm một trung tâm để đặt niềm tin về việc du học Đức? Một trung trung tâm hỗ trợ tận tình việc xin VISA cùng bạn. Truy cập ngay duhocnghe IECS để biết thêm nhiều thông tin và được hỗ trợ về du học Đức nha!

    Trả lờiXóa