Cách nào hiệu quả hơn khi xem xét thời gian tải trang, sử dụng các tệp phông chữ cục bộ hoặc phông chữ web của google?

Tôi đang sử dụng phông chữ tùy chỉnh trong trang web của mình. Tôi có thể sử dụng một tập tin phông chữ địa phương:Cách nào hiệu quả hơn khi xem xét thời gian tải trang, sử dụng các tệp phông chữ cục bộ hoặc phông chữ web của google?

src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff');

hoặc chỉ sử dụng google của:

src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');

Đó sẽ là nhanh hơn, xem xét thời gian tải trang?

Nguồn

2012-03-25 fj123x

google api sẽ là một lựa chọn tốt hơn bởi vì nó ma y có thể là phông chữ bạn sử dụng không được cài đặt trong máy tính của mọi người nhưng trong trường hợp của google api nó không tạo ra sự khác biệt nào và tôi nghĩ font chữ thường không lớn hơn kích thước để font không có sự khác biệt về tốc độ tải và người dùng tải trang phông chữ sẽ lưu trong bộ nhớ cache. –

Tìm kiếm mạng phân phối nội dung trên web. Google veriosn có thể nhanh hơn. – HerrSerker

Tôi thiết lập ứng dụng GAE với hai trang thử nghiệm, một trang sử dụng Phông chữ web của Google và một bằng cách sử dụng tệp cục bộ. Tôi đảm bảo không có bộ nhớ đệm và ghi lại thời gian tải mỗi trang. Điều này đã được lặp lại 20 lần trên Chrome.

Kết quả

thời gian tải trung bình (Google Web Fonts): 486,85 ms
thời gian tải trung bình (tập tin địa phương): 563,35 ms

enter image description here

Mã

fonts-google.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> 
     <link href='both.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
     <h1>This is a heading</h1> 
    </body> 
</html>

fonts-local.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <link href='fonts-local.css' rel='stylesheet' type='text/css'> 
     <link href='both.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
     <h1>This is a heading</h1> 
    </body> 
</html>

fonts-local.css

@font-face { 
    font-family: 'Ubuntu'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Ubuntu'), url('ubuntu.woff') format('woff'); 
}

both.css

h1 { 
    font-family: 'Ubuntu'; 
}

Nguồn

2012-03-25 12:18:07 melhosseiny

Cách tiếp cận tốt, nhưng nó thực sự phụ thuộc vào thiết lập máy chủ của riêng bạn và vị trí của người xem. – alias51

Cách nào hiệu quả hơn khi xem xét thời gian tải trang, sử dụng các tệp phông chữ cục bộ hoặc phông chữ web của google?

Trả lời

Các vấn đề liên quan