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

Make your website smaller and faster

5 cách để làm trang web của bạn nhẹ và nhanh hơn Dưới đây là 5 “chiêu” 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. 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! Tiện ích ưa thích của tôi trên Mac là ImageOptim.

ImageOptim Sample

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. 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í 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. 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ể.

Câu trả lời? 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 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. Và nếu CSS của trình tô sáng cú pháp chỉ là một vài dòng? Bạn có thể tiết kiệm truy vấn thừa và nhúng nó ngay trong trang:

<style type="text/css">
    <?php include('media/assets/highlight.css'); ?>
    </style>
</head>

Hoặc bạn có thể nối CSS trình tô sáng vào tập tin CSS toàn trang của bạn.

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.

Dịch bởi Juno_okyo theo davidwalsh.name.


:point_right: Theo dõi Juno_okyo trên Kipalog · Facebook · Twitter · Google+ · Youtube

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Juno_okyo

22 bài viết.
673 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
135 15
(Ảnh) Biểu thức chính quy (hay regex) là một công cụ mạnh mẽ mà mỗi nhà phát triển nên biết. Nó có thể khớp với một chuỗi các ký tự dựa trên các t...
Juno_okyo viết 2 năm trước
135 15
White
69 14
(Ảnh) Trong bài viết này tôi sẽ chia sẻ 12 thủ thuật vô cùng hữu ích cho JavaScript. Những thủ thuật này sẽ giúp bạn giảm lượng code cũng như làm ...
Juno_okyo viết 11 tháng trước
69 14
White
52 6
Bạn thấy chán các trang web cũ? Muốn tìm một vài góc mới của Internet để giúp bạn tìm lại sự hứng thú? Tốt thôi, bạn đã gặp may đấy. Dù bạn đang tì...
Juno_okyo viết 1 năm trước
52 6
Bài viết liên quan
White
11 4
(Link) (Link) (Link) Ở 2 phần tut trước, mình đã hướng dẫn khá chi tiết cách viết một ứng dụng camera có tích hợp chức năng nhận diện khuôn mặ...
HoangPH viết gần 3 năm trước
11 4
White
36 3
(Ảnh) Giới thiệu thư viện VisSense.js Chắc hẳn hiện giờ những bạn nào thường xuyên dùng Facebook đều biết một chức năng hay ho của mạng xã hội n...
Juno_okyo viết 2 năm trước
36 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
22 bài viết.
673 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!