5 cách để làm trang web của bạn nhẹ và nhanh hơn

21/03/2020

11170

5 cách để làm trang web của bạn nhẹ và nhanh hơn. Dưới đây là 5 cách mà bạn có thể hoàn thành chỉ trong vài phút để làm trang web của bạn nhanh hơn cho tất cả người sử dụng.

1. Làm trang web tối ưu dung lượng hình ảnh – ImageOptim

Tối ưu hóa dung lượng ảnh là cách cơ bản trong việc cải thiện thời gian tải trang. Photoshop và các ứng dụng chỉnh sửa hình ảnh khác không có hiệu quả với việc nén hình ảnh, khiến nhiều KB thừa được tải cùng theo từng truy vấn. Tin tốt là có rất nhiều tiện ích để loại bỏ những KB thừa thãi này.

Bạn có thể sử dụng nén gzip bao nhiêu bạn muốn nhưng kích thước KB thừa là lãng phí. Vì vậy sử dụng một tiện ích tối ưu hóa hình ảnh sẽ có giá trị như bất kỳ chiến lược khác mà bạn có thể sử dụng.

2. Làm trang web nhẹ bằng CloudFlare

CloudFlare — một dịch vụ mà bạn có thể bắt đầu miễn phí, cung cấp cho bạn vô số cải thiện:

Dịch vụ CDN (Content Delivery Network)
Nén JavaScript, CSS và HTML
Dịch vụ sao lưu thời gian chết
Ngăn chặn DDOS
Phân phối tài nguyên dựa theo vị trí của người dùng

Đây không phải là nơi quảng cáo — davidwalsh.name sử dụng CloudFlare và đã sử dụng tất cả các tính năng của nó. Trang web của tôi đã tiết kiệm được nhiều GB dữ liệu nhờ CloudFlare. Kể cả khi máy chủ của tôi bị sập, CloudFlare đã phục vụ các trang hoàn hảo. Một chiến thắng hoàn toàn khi bạn sử dụng CloudFlare.

3. Thư viện biểu tượng Glyph nhỏ hơn với Fontello

Font Glyph đã phổ biến trong vài năm nay và tôi sẽ bỏ qua việc liệt kê các lý do tại sao. Chúng ta đã biết lý do tại sao chúng lại tuyệt vời. Vấn đề là chúng ta thường chỉ sử dụng một phần nhỏ trong các Font trong họ. Và mặc dù chúng ta ít khi quan tâm, các tập tin Font thường rất lớn. Và thật may khi những tiện ích như Fontello tồn tại.

Fontello cho phép bạn chọn các glyph riêng lẻ từ một số Font hình tượng và do đó làm cho dung lượng Font của bạn nhỏ hơn.

4. Làm trang web bằng cách tạo các tập tin tĩnh.

Chúng ta yêu các script động nhưng tại sao phục các trang động trong khi các trang tĩnh cũng có thể làm? Đây là một thực tế thường thấy với WordPress . Nội dung bài viết hầu như không thay đổi nhưng các quảng cáo và bình luận có thể.

Tìm kiếm những điểm quan trọng khi một trang có thể thay đổi và tạo ra nội dung tĩnh khi những điểm này xảy ra. Một tiện ích của WordPress ngọt ngào với tên gọi Really Static sẽ thực hiện công việc này cho bạn. Tất nhiên hệ thống CMS không phải WordPress sẽ cần tạo trang tùy chỉnh nhưng những lợi thế về tốc độ sẽ có rất nhiều giá trị.

Nếu bạn có nội dung mà bạn cần xoay quanh trong các trang tĩnh này. Như các quảng cáo hay các liên kết tới nội dung hiện tại thì hãy xem xét JavaScript và các truy vấn AJAX để lấy nội dung đó . Trang sẽ trở thành tĩnh và JavaScript sẽ được phục vụ từ CDN . Việc xem xét tốc độ sau đó sẽ chỉ còn truy vấn AJAX.

5. Lazyload các nguồn tài nguyên hoặc nhúng?

Một triệu chứng phổ biến được biết tới của các trang web chậm đi là số lượng truy vấn mà mỗi trang tạo ra. Trước đây chúng ta đã khắc phục vấn đề này với CSS/Ảnh sprite (cho tất cả ảnh vào trong một ảnh để giảm số truy vấn). Nối các nguồn tài nguyên JavaScript và CSS (concat) và sử dụng Data URI. Bạn cũng có thể lazyload các tài nguyên hoặc chỉ cần nhúng chúng trong trang:

document.querySelectorAll(‘article pre’).length && (function() {

var mediaPath = ‘/assets/’;

var stylesheet = document.createElement(‘style’);

stylesheet.setAttribute(‘type’, ‘text/css’);

stylesheet.setAttribute(‘rel’, ‘stylesheet’);

stylesheet.setAttribute(‘href’, mediaPath + ‘css/syntax.css’);

document.head.appendChild(stylesheet);

var syntaxScript = document.createElement(‘script’);

syntaxScript.async = ‘true’;

syntaxScript.src = mediaPath + ‘js/syntax.js’;

document.body.appendChild(syntaxScript);

})();

Ví dụ trên chỉ tải trình tô sáng cú pháp (Syntax Highlighter) chỉ khi những phần tử trên trang yêu cầu. Bạn có thể tiết kiệm truy vấn thừa và nhúng nó ngay trong trang:

<?php include(‘media/assets/highlight.css’); ?>

</style>

</head>

Như bạn có thể thấy, đây là cách tăng tốc độ vô cùng dễ dàng và trang của bạn có được nếu bạn sẵn sàng bỏ ra nỗ lực vài phút để thực hiện. Và khi bạn nghĩ về số khách truy cập mà trang bạn nhận được và sau đó là số lượng xem trang, bạn có thể thấy tại sao những tối ưu nhỏ này là rất quan trọng.

Xem thêm: Cách tạo website miễn phí đơn giản và hiệu quả.

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.