Thứ Hai, 27 tháng 6, 2016

Ứng dụng firebug vào việc tăng tốc website

Qua bài viết Tìm hiểu về Firebug thì đối mang người Xem qua và xây dựng công việc thiết kế website cũng dễ tự Xem qua vài thành phần khác. bởi vậy mình không Tìm hiểu thêm và sẽ gửi tiếp những 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 độ website của khách hàng.

trước tiên mọi người xem hình dưới đây:

Posted Image

>>> Xem thêm: Thiết kế website giáo dục

các bạn với nhận xét gì lúc nhìn xong hình trên?

Tab NET của Firebug cho tất cả mọi người thông số loading của những thành phần trong trang web của mọi người.

  1. một vài status 200 (có reponse), 404 (can't not found)….
  2. Thời gian load: thời gian 1 đối tượng load xuống browser.
  3. Dung lượng load: Phần này giả dụ các bạn thấy dấu ? và status 200 nghĩa là với reponse nhưng là response sai kết quả.
  4. đồ vật 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 nguyên nhân là một vài phần kia thì hầu như các bạn đều biết phương pháp khắc phục mà không phải kinh nghiệm rộng rãi.

một. kém chất lượng sử site của người mua bị status not found thì mọi người chỉ nên cập nhật lại link hoặc bỏ đi để nâng cao tốc độ website thay do bắt browser yêu cầu search request lên server mất khá đa dạng tời gian.

2. Về thời gian và dung lượng: muốn tăng tốc thì tất cả mọi người chỉ nê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 trường hợp sử 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 mang thể nâng cao thêm một ít, nếu tất cả mọi người mang kinh nghiệm về Photoshop sẽ tự biết nên xây dựng gì sở hữu nó.
  • javascript và CSS thì để giảm dung lượng thì sau khi code xong người dùng chỉ đề nghị cho đầy đủ lên thành một loại hoặc dùng vài công cụ minify javascript hoặc minify css trước lúc upload lên server.

3. Về thiết bị tự thì chắc các người sở hữu kinh nghiệm và lưu ý thì với thể biết, tuy nhiên mình nghĩ đa phần quý khách làm website chắc chẳng sử dụng rộng rãi đến cái này.

Thực ra loại này siêu quan trọng trong việc tăng tốc độ website của quý khách. người mua cũng thấy vài thành phần được load theo hình bậc thang ko đều. một vài thành phần có điểm load bắt đầu bằng nhau thì tức là đang được load cộng khi. vài thành phần load sau và thụt vào tức là nó yêu cầu 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ứ 1, điều này là hiển nhiên lý do là trang html của người dùng luôn được gọi trước tiên. Tất yếu những thành phần sau nó cần chờ nó.
  • Cũng vì vậy mà khách hàng thấy css_6 được load sau và thụt vào phía sau, tức là yêu cầu chờ trang html load xong browser mới nhận biết được html ấy gọi vài file gì.
  • Sau CSS là tới những hình ảnh được gọi từ file CSS. nếu các bạn lưu ý kỹ thì sẽ thấy rằng khi kiểu file (đuôi file bị thay đổi) sẽ gây đề nghị tình trạng chờ, tức bị thụt vào.

>>> thông tin khác: Thiết kế web nội thất

Vậy xây dựng 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 tất cả mọi người cũng đã hiểu mình nên làm gì.

  1. khi tiêu dùng hình cho website giảm thiểu tối đa dùng nhiều kiểu file hình.
  2. 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.
  3. Theo lời khuyên của những chuyên gia Yahoo về nâng cao tốc web thì bắt buộc đặt CSS lên đầu và javascript xuống dưới cuối cùng.

Về javascript thì bên cạnh trường hợp bất khả kháng mới đặt đúng vị trí trong html. do có những nếu quý khách đặt dưới cùng thì sẽ bị undefine vài variable và function. Thông thường thì vài javascript chỉ được gọi dựa vào tin người dùng buộc phải đặt phía dưới, điều này tạo cảm giác cho tất cả mọi người web của các bạn nhanh. web của các bạn sở hữu thể bật lên nhanh chóng và javascript sẽ load ngầm sau ấy. Điển hình các bạn mang thể ra trang chủ www.vietsol.net và refresh sau đó sẽ thấy giao diện load lên trước và sau đấy load ngầm javascript.

Hoặc khách hàng cũng có thể vào trang chủ sau đấy bấm vào một chủ đề bất kỳ. người mua sẽ thấy chỉ vài thành phần khác nhau giữa một số trang thay đổi. giả dụ khách hàng refresh tại chỗ thì thấy hầu như trang website xuất hện lại lập tức mà không bị giật trang.

>>> sự kiện liên quan: Thiết kế website giới thiệu công ty

0 nhận xét:

Đăng nhận xét