Như đã biết ở 2 entry "Hiện trạng chung dịch vụ internet tại Việt Nam" và "Tồi tệ dịch vụ internet tại Việt Nam" thì tốc độ mạng ở VN khá là cùi bắp. Để có tốc độ tốt hơn, bạn phải chi tiền ở mức hàng triệu đồng và con số đó là quá cao so với thu nhập trung bình của một người VN. Vì vậy, lượng người dùng chủ yếu ở tốc độ dưới 3Mbps nhưng đó chỉ là tốc độ theo phương diện hợp đồng, tốc độ thực thì không được như thế. Nếu có kiện cáo thì cũng chỉ nhận được câu... "Tuỳ thời điểm và trang truy cập thôi anh/chị ạ!". Khi nào ISP kí kết đảm bảo tốc độ tối thiểu thì khi đó dân tình chúng ta may ra mới nắm đằng cán (hiện giờ là nắm đằng lưỡi >"<).
Mà cũng lạ ở chỗ, đôi khi chúng ta thấy tốc độ download khá tốt nhưng khi lướt web thì tốc độ lại rất tệ. Nếu nói do server lưu trữ web có vấn đề thì cũng không hẳn vì thử nhờ 1 người bạn (tốc độ mạng và ISP như nhau) kiểm tra thì được báo lại rằng... nó vù vù. Do chương trình antivirus chăng? Nếu do nó thì sao mọi khi không bị giờ lại bị? Đau đầu thật...
Tính toán theo lý thuyết: Cứ cho rằng tốc độ internet trung bình là 8 Mbps thì với gói cước thấp nhất mà tôi đang dùng hiện giờ là ~ 1.5 Mbps chỉ đạt 1/4.
Ghi ra giấy: 8 Mbps - 4 giây => (8/4) = 2 Mbps - (2x4) = 16 giây
Vậy: Tốc độ tải trang nên dưới 20 giây.
(Phần hướng dẫn sử dụng hình thì lời dẫn trước rồi hình ở dưới)
Trước tiên, chúng ta sẽ kiểm tra tốc độ tải trang hiện tại của bạn. Ở đây, tôi dùng trình duyệt web Firefox.
Bước 1: Tắt hết các cửa sổ của Firefox, dùng Ccleaner (mục Cleaner, tick chọn hết toàn bộ ô check trong 2 tab Windows, Applications nhưng trừ ra ô Wipe Free Space) để dọn sạch máy.
Bước 2: Mở lại Firefox, không vào blog của bạn mà vào trang StopWatch của Numion, gõ link blog bạn vào khung URL rồi click nút Start StopWatch, chờ kết quả. Đó sẽ là kết quả lần đầu của bạn (thường thì lần đầu luôn lâu hơn các lần sau), bấm Back để quay lại và làm lại một lần nữa để có kết quả lần 2 (lần 3 trở lên thì tuỳ bạn).
Bước 2: Tối ưu CSS
- Cách dùng trang CleanCSS khá đơn giản.
Ví dụ đoạn code CSS chưa được tối ưu là:
background:#333322;
color:#EED;
padding:10px 10px 10px 10px;
}
.footer .left {
width:64%;
}
.footer .right {
text-align:right;
width:35%;
}
.footer a {
color:#FFFFF;
text-decoration:none;
}
.footer a:hover {
text-decoration:none;
color:silver;
}
Khung Messages cho ta biết nó đã thao tác những gì (sửa, lược bỏ,...) trên đoạn CSS
Kết quả cuối cùng, đoạn CSS đã được tối ưu hoá. Dòng Input, Output và Compression Ratio cho ta biết nó đã giúp ta tiết kiệm được bao nhiêu Bytes vô ích!
Ví dụ trên, tôi chỉ mới để mức Standard, nếu đưa lên Hight hoặc Hightest thì càng tiết kiệm được nhiều hơn (ở mức High, Highest thì CSS sẽ không được dễ nhìn cho lắm ^^).
- Với BlogSpot thì theo tôi, đặt hẳn JS trong source là tốt nhất. Nó giúp cho blog load nhanh hơn khi bạn câu link JS từ host khác. Tuy nhiên, việc làm này có thể khiến cho source rất dài cùng một vài vấn đề khác (vấn đề gì thì còn tuỳ thuộc vào nhiều thứ).
- Thứ tự JS trong source cũng rất quan trọng. Vd:
Có 1 đoạn code JS, đặt ở trước tag </head> thì chạy nhưng khi đưa xuống trước </body> thì không chạy.
...
Một đoạn code JS chưa nén:
Object.extend(Object, {
inspect: function(object) {
try {
if (Object.isUndefined(object)) return 'undefined';
if (object === null) return 'null';
return object.inspect ? object.inspect() : String(object);
} catch (e) {
if (e instanceof RangeError) return '...';
throw e;
}
},
và đã nén ở mức JSMin, Packed
Object.extend(Object,{inspect:function(object){try{if(Object.isUndefined(object))return'undefined';if(object===null)return'null';return object.inspect?object.inspect():String(object);}catch(e){if(e instanceof RangeError)return'...';throw e;}},
Object.extend(Object,{inspect:function(a){try{if(Object.isUndefined(a))return'undefined';if(a===null)return'null';return a.inspect?a.inspect():String(a)}catch(e){if(e instanceof RangeError)return'...';throw e;}},
- Có trường hợp "không nén" thì code chạy được và ngược lại. Hoặc, một số đoạn code JS không thực thi được hay hiển thị tốt trên BlogSpot.
j
/* Calendar
----------------------------------------------- */
/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px; width:100%;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset black;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold; color:#fff;}
Nên tối ưu nó thành dạng sau:
/* -------------------------- Calendar */
table#bcalendar{border:1px solid #000;border-top:0;margin:0;width:100%;}
table#bcalendar tbody tr td{border:1px outset #000;padding:2px;text-align:center;}
table#bcalendar tbody tr td a{color:#fff;font-weight:700;}
Những thứ được thay đổi (giúp bạn giảm từ 0.381KB xuống còn 0.214KB, tức tiết kiệm được 43.8%) là
Đổi "0px" thành "0"
Đổi "0 0 0" thành "0"
Đổi "black" thành "#000"
Đổi "bold" thành "700"
Lược bỏ các chú thích
- Hãy chịu khó vào Dashboard > Layout > Edit HTML > tick Expand Widget Templates rồi kéo xuống phần <body></body> và dò từ từ để xoá bỏ những dòng cách không cần thiết cho đến khi hết thì thôi. Nguyên nhân là vì tôi đã từng xem source code cho 1 vài bạn và nhận ra rằng trong phần <body></body> có không ít chỗ giữa dòng này với dòng kia cách nhau tới hơn 2 dòng. Nếu cần phân biệt đoạn này với đoạn kia thì chỉ cần cách nhau 1 dòng là đủ. Còn giữa các thuộc tính, đôi khi không cần bất kì khoảng cách nào.
Quá dư (cách nhau tới 2 dòng)
</b:if></b:if>
</dd>
<dd class='comment-footer'>
</dd>
Hoặc (các thuộc tính cách nhau 1 cách)
<span style='color: blue; font-weight: bold;'>
Nên thu gọn lại sẽ hay hơn (giảm số dòng và khoảng cách dư)
</b:if></b:if>
</dd>
<dd class='comment-footer'>
</dd>
<span style='color:blue;font-weight:bold;'>
- Đưa các đoạn code JS vào sát lề trái của khung chứa source.
Đoạn code này bị cách lề trái một khoảng
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
Xử lý nó
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
- Gom những cái có thể ở một dòng lại với nhau.
Các thuộc tính của ul.menunew .menulienket:hover dư sức nằm trên một dòng
ul.menunew .menulienket:hover {
background:#3FF;
color:#000;
width:100px;
}
Sau khi gom lại (quá gọn)
ul.menunew .menulienket:hover{background:#3FF;color:#000;width:100px;}
Hoặc ở code JS (ở JS thì cẩn thận tí, sai một chút cũng khiến cả đoạn không chạy được)
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
Chỉ thu gọn ở mấy cái { và }
if (act) {if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;}}}
Thu gọn xịn hơn, ta được (có thể dùng Javascript Compressor ở mức JSMin)
if(act){if(objActive.tagName=='A'){objActive.style.color=clrOrg;clearInterval(TimerID);act=0;}}}
Bước 5: Tối ưu Page Elements (thành phần trang)
- Hạn chế dùng quá nhiều gadget trong blog vì điều đó khiến cho blog chậm đi. Nếu có thể hãy để những gì liên quan nhau trong một gadget.
- Không dùng nhiều widget ngoài hoặc thuộc nhiều trang khác nhau.
- Không ẩn các gadget liên quan chức năng blog vì như vậy sẽ tạo sự khó chịu cho người dùng lúc cần tới nó (Vd: Phải quay lại trang chủ mới thấy được shoutbox).
- Hạn chế dùng table lồng table và không dùng frame lồng frame.
- Không lưu các file có liên quan tới cấu trúc trang trên nhiều host khác nhau để giữ được sự ổn định cho toàn blog.
- Những gì chỉ cần hiển thị khi xem một bài viết thì hãy đặt nó vào đoạn code sau:
<b:if cond='data:blog.pageType == "item"'>
Nội dung
</b:if>
- Hạn chế các đoạn JS không cần thiết như: Cấm chuột phải, hiệu ứng trỏ chuột (đồng hồ, dòng chữ bay lượn,...),...
- Hạn chế các hiệu ứng dùng flash trên blog.
- Tránh lạm dụng các biểu tượng cảm xúc.
- Nếu bạn nghĩ cách tốt nhất để xử lý hình ảnh trên blog bạn là nén ảnh tối đa hoặc dùng ảnh kích thước nhỏ thì đó là một sai lầm. Chẳng thích thú gì khi nhìn một tấm ảnh có chất lượng kém (màu không thật, gãy, mờ,...) hay có size tí xíu. Bạn nên có một phần mềm xử lý ảnh nho nhỏ trong máy để tiện cho việc xử lý (các chương trình xử lý ảnh luôn tốt hơn các trang xử lý ảnh trực tuyến). Hãy thử thay đổi giữa các định dạng ảnh JPEG, GIF, PNG để chọn ra định dạng tối ưu nhất (dung lượng, chất lượng và kích thước). Trong trường hợp bạn cần phải giữ nguyên kích thước ảnh lớn (Vd: 1024x768 px) thì bạn có thể dùng thêm một ảnh thumbnail (hình nhỏ) cho ảnh gốc.
Đoạn code HTML cho 2 ảnh gốc và thumbnail, khi click vào ảnh thumbnail nó sẽ trả ra ảnh gốc.
<a href="link ảnh gốc"><img src="link thumbnail"/></a>
Eo! Trước mắt là nhớ được có nhiêu đó nên viết cho anh em nhiêu đó. Từ từ nhớ thêm được gì thì tôi sẽ bổ sung vào sau.
Đang tải xin vui lòng chờ...
0 comments:
Post a Comment
[▼/▲] Chèn biểu tượng vui