Vận dụng firebug vào việc tăng tốc website
Angle123 > 06-28-2016, 07:57 AM
Qua bài viết Xem qua về Firebug thì đối mang người Giới thiệu và thiết kế công việc xây dựng website cũng dễ tự Xem qua những thành phần khác. do vậy mình không Giới thiệu thêm và sẽ gửi tiếp một vài bài về ứng dụng của nó.
Trong bài này mình sẽ đề cập về phần ứng dụng Firebug để nâng cao tốc độ web của các bạn.
thứ 1 quý khách xem hình dưới đây:
Tab NET của Firebug cho quý khách thông số loading của các thành phần trong trang web của mọi người.
vài status 200 (có reponse), 404 (can’t not found)….
Thời gian load: thời gian 1 đối tượng load xuống browser.
Dung lượng load: Phần này trường hợp mọi người thấy dấu ? và status 200 nghĩa là với reponse nhưng là response sai kết quả.
thứ tự load: Phần này tương đối 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 nguyên nhân là những phần kia thì hầu như quý khách đều biết mẹo khắc phục mà không cần kinh nghiệm đa dạng.
một. fake sử site của quý khách bị status not found thì mọi người chỉ cần cập nhật lại link hoặc bỏ đi để tăng tốc độ web thay lý do là bắt browser buộc phải search request lên server mất hơi đa dạng tời gian.
2. Về thời gian và dung lượng: muốn tăng tốc thì khách hàng chỉ bắt buộc optimize hình, javascript, CSS cho dung lượng tối thiểu mã vẫn toàn bộ chức năng.
Thông thường ví như tiêu dùng hình jpg thì mình thường để resolution 60 hoặc 70 tùy theo đảm bảo ảnh, cũng mang thể nâng cao thêm một ít, trường hợp khách hàng với kinh nghiệm về Photoshop sẽ tự biết nên thiết kế gì với nó.
javascript và CSS thì để giảm dung lượng thì sau lúc code xong người dùng chỉ đề nghị cho đông đảo lên thành một mẫu hoặc dùng các công cụ minify javascript hoặc minify css trước khi upload lên server.
3. Về trang bị tự thì chắc một vài người có kinh nghiệm và chú ý thì với thể biết, tuy nhiên mình nghĩ đa phần người mua làm web chắc chẳng ưa chuộng tới loại này.
Thực ra dòng này rất quan trọng trong việc tăng tốc độ website của các bạn. quý khách cũng thấy vài thành phần được load theo hình bậc thang ko đều. những thành phần với điểm load bắt đầu bằng nhau thì tức là đang được load cộng khi. các thành phần load sau và thụt vào tức là nó buộc 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 thứ nhất, điều này là hiển nhiên nguyên nhân là trang html của quý khách luôn được gọi trước tiên. Tất yếu vài thành phần sau nó yêu cầu chờ nó.
Cũng do đó mà các bạn thấy css_6 được load sau và thụt vào phía sau, tức là nên chờ trang html load xong browser mới nhận biết được html ấy gọi các file gì.
Sau CSS là đến một vài hình ảnh được gọi từ file CSS. trường hợp tất cả mọi người lưu ý kỹ thì sẽ thấy rằng lúc 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 để hạn chế tình trạng bậc thang càng ít càng tốt?
Qua phần mô tả trên thì chắc người dùng cũng đã hiểu mình nên thiết kế gì.
khi dùng hình cho website tránh tối đa sử dụng phổ biến kiểu file hình.
Tận dụng tối đa CSS để đặt hình vào mà ko 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ì buộc phải đặt CSS lên đầu và javascript xuống dưới cuối cùng.
Về javascript thì không tính nếu bất khả kháng mới đặt đúng vị trí trong html. bởi vì mang một vài giả dụ người dùng đặt dưới cộng thì sẽ bị undefine một số variable và function. Thông thường thì vài javascript chỉ được gọi dựa vào sự kiện tất cả mọi người buộc phải đặt phía dưới, điều này tạo cảm giác cho người mua web của quý khách nhanh. web của người dùng mang thể bật lên nhanh chóng và javascript sẽ load ngầm sau đấy.
Hoặc khách hàng cũng mang thể vào trang chủ sau ấy bấm vào 1 chủ đề bất kỳ. khách hàng sẽ thấy chỉ một vài thành phần khác nhau giữa một vài trang thay đổi. giả dụ các bạn refresh tại chỗ thì thấy hầu như trang website xuất hện lại lập tức mà ko bị giật trang.