Ngày: (06-03-2014 - 01:15 PM) - Lượt xem:

Qua bài viết giới thiệu về Firebug thì đối với người tìm hiểu và làm công việc thiết kế website cũng dễ tự tìm hiểu các thành phần khác. Vì vậy mình không giới thiệu thêm và sẽ gửi tiếp các bài về ứng dụng của nó.

Trong bài này mình sẽ nói về phần ứng dụng Firebug để tăng tốc độ website của bạn.
Đầu tiên các bạn xem hình dưới đây:
Posted Image
Bạn có nhận xét gì khi nhìn xong hình trên?
Tab NET của Firebug cho bạn thông số loading của các thành phần trong trang web của bạn.
Các status 200 (có reponse), 404 (can’t not found)….
Thời gian load: thời gian một đối tượng load xuống browser.
Dung lượng load: Phần này nếu bạn thấy dấu ? và status 200 nghĩa là có reponse nhưng là response sai kết quả.
Thứ tự load: Phần này khá quan trọng và mình sẽ trình bày tiếp theo sau đây.
Sở dĩ mình cho phần #4 là quan trọng bởi vì các phần kia thì hầu như mọi người đều biết cách khắc phục mà không cần kinh nghiệm nhiều.

1. Giả sử site của bạn bị status not found thì bạn chỉ cần cập nhật lại link hoặc bỏ đi để tăng tốc độ website thay vì bắt browser phải search request lên server mất khá nhiều tời gian.
2. Về thời gian và dung lượng: muốn tăng tốc thì bạn chỉ cần optimize hình, javascript, CSS cho dung lượng tối thiểu mã vẫn đầy đủ chức năng.
Thông thường nếu dùng hình jpg thì mình thường để resolution 60 hoặc 70 tùy theo chất lượng ảnh, cũng có thể tăng thêm 1 ít, nếu bạn có kinh nghiệm về Photoshop sẽ tự biết phải làm gì với nó.
javascript và CSS thì để giảm dung lượng thì sau khi code xong bạn chỉ cần cho tất cả lên thành 1 dòng hoặc dùng các công cụ minify javascript hoặc minify css trước khi upload lên server.
3. Về thứ tự thì chắc một số người có kinh nghiệm và để ý thì có thể biết, tuy nhiên mình nghĩ đa phần các bạn thiết kế web chắc chẳng quan tâm đến cái này.
Thực ra cái này rất quan trọng trong việc tăng tốc độ website của bạn. Các bạn cũng thấy các thành phần được load theo hình bậc thang không đều. Các thành phần có điểm load bắt đầu bằng nhau thì tức là đang được load cùng lúc. Các thành phần load sau và thụt vào tức là nó phải chờ thành phần trước. Điển hình như hình trên:
Thành phần GET Firebug-cong-cu-huu-ich… được load đầu tiên, điều này là hiển nhiên vì trang html của bạn luôn được gọi đầu tiên. Tất yếu các thành phần sau nó phải chờ nó.
Cũng vì vậy mà bạn thấy css_6 được load sau và thụt vào phía sau, tức là phải chờ trang html load xong browser mới nhận biết được html đó gọi những file gì.
Sau CSS là đến các hình ảnh được gọi từ file CSS. Nếu các bạn để ý kỹ thì sẽ thấy rằng khi kiểu file (đuôi file bị thay đổi) sẽ gây nên tình trạng chờ, tức bị thụt vào.
Vậy làm sao để tránh tình trạng bậc thang càng ít càng tốt?
Qua phần mô tả trên thì chắc các bạn cũng đã hiểu mình cần làm gì.
Khi dùng hình cho website hạn chế tối đa dùng nhiều kiểu file hình.
Tận dụng tối đa CSS để đặt hình vào mà không nên gọi từ thuộc tính style của thẻ html.
Theo lời khuyên của các chuyên gia Yahoo về tăng tốc web thì nên đặt CSS lên đầu và javascript xuống dưới cuối cùng.
Về javascript thì ngoại trừ trường hợp bất khả kháng mới đặt đúng vị trí trong html. Bởi vì có một số trường hợp bạn đặt dưới cùng thì sẽ bị undefine các variable và function. Thông thường thì các javascript chỉ được gọi dựa vào sự kiện người dùng nên đặt phía dưới, điều này tạo cảm giác cho người dùng website của bạn nhanh. Website của bạn có thể bật lên nhanh chóng và javascript sẽ load ngầm sau đó. Điển hình bạn có thể ra trang chủ www.vietit.vn và refresh sau đó sẽ thấy giao diện load lên trước và sau đó load ngầm javascript.
Hoặc bạn cũng có thể vào trang chủ sau đó bấm vào một chủ đề bất kỳ. Bạn sẽ thấy chỉ các thành phần khác nhau giữa các trang thay đổi. Nếu bạn refresh tại chỗ thì thấy hầu như trang web xuất hện lại lập tức mà không bị giật trang.

thiet ke website quan 3 | cong ty thiet ke website dep quan 3 | web quan 3 | website cach mang thang 8 | lam website | tim cong ty | website chuan seo | thiet ke website | thiet ke website gia uu dai | thiet ke website hoang hoa tham | duong hoang hoa tham | duong nam ky khoi nghia | nguyen thi minh khai | thiet ke website nguyen thi minh khai | duong au duong lan | duong nguyen trai | nguyễn trãi | thiet ke website nguyen trung truc | duong nguyen trung truc | TPHCM | tp.hcm

Tin tức khác
Thiết kế web uy tín, chuẩn SEO, chuyên nghiệp, chất lượng quận 4

Thiết kế web uy tín, chuẩn SEO, chuyên nghiệp, chất lượng quận 4

Ngày: 17-05-2016 - 09:23 PM
Vietit chuyên cung cấp dịch vụ thiết kế website chuyên nghiệp tại quận 4. Nếu bạn đang cần dịch vụ thiết kế web hãy liên hệ đến chúng tôi 0909.14.28.77 MR Dương
Chi tiết
Người dùng cần gì ở trang web của bạn?

Người dùng cần gì ở trang web của bạn?

Ngày: 21-03-2014 - 03:57 PM
Chị Khánh Linh, một nhân viên kế toán 45 tuổi, mặc dù không thành thạo về các website khác nhưng rất thành thạo trong việc truy nhập diễn đàn Tài chính – kế toán để thảo luận. Nhưng giờ đây chị nói: “Thật là khó sử dụng. Họ bắt...
Chi tiết
Thiết kế Website chuyên nghiệp quận 1

Thiết kế Website chuyên nghiệp quận 1

Ngày: 27-05-2014 - 10:40 AM
Liên hệ thiết kế website: CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ VIETIT Hotline: 0909.1428.77 Mr.Dương Email: daiduong.vietit@gmail.com Website: www.vietit.vn
Chi tiết
Vi sao doanh nghiệp cần có website để hoạt động

Vi sao doanh nghiệp cần có website để hoạt động

Ngày: 28-05-2014 - 10:46 AM
Cạnh tranh - tìm thêm nguồn khách hàng mơi - có thể thay thế nhân viên bán hàng - show room không giới hạn về không gian và thời gian.... đó là một số lợi ích của website : liên hệ ngay hôm nay để được giá thiết kế website ưu đãi nhất : 0909.14.28.77...
Chi tiết
5 tiêu chí lựa chọn công ty thiết kế website chuyên nghiệp

5 tiêu chí lựa chọn công ty thiết kế website chuyên nghiệp

Ngày: 29-11-2013 - 10:11 AM
Xem xét các trang web mà công ty thiết kế website đã thực hiện cho phép bạn đánh giá khả năng của công ty đó, họ biết làm những gì?
Chi tiết
Người dùng tự thiết kế trang chủ google

Người dùng tự thiết kế trang chủ google

Ngày: 21-03-2014 - 03:58 PM
Nếu thấy xuất hiện dòng chữ ở phía góc dưới bên trái của màn hình có nghĩa là bạn đã có thể thay đổi hình nền trên trang chủ của Google
Chi tiết
|