Xây dựng một trang web đẹp và thân thiện là một vấn đề nhiều doanh nghiệp đang cần để tạo ra hiệu quả kinh doanh tốt hơn. Các doanh nghiệp hiện nay đã có khá nhiều kiến thức về các yêu cầu trên website của họ. Một website doanh nghiệp luôn phải cần có các yếu tố:

Đẹp
Thân thiện
Tốc độ tải nhanh
Chi phí vận hành thấp.
Hỗ trợ SEO, SSL, Uptime 99,99%

Trong các yếu tố trên, bài viết hôm nay sẽ giúp các bạn hiểu được những công nghệ mới mà Boony hiện đã triển khai cho các khách hàng của mình. Bài viết mình không để cập quá nhiều đến chuyên môn kỹ thuật, nên chắc sẽ giúp các bạn phần nào nắm được tổng quát về các công nghệ lưu trữ và thiết kế web hiện nay.

Đầu tiên, để có một website đẹp, bạn cần phải có một thiết kế tốt, thân thiện (friendly) và tương thích (responsive) với các nền tảng desktop(1280px), ipad(920px), mobile(768px) hay thậm chí hiện nay là widescreen ( > 1960px). Để đáp ứng được thân thiện các lập trình viên hiện nay đa số sử dụng bộ css bootstrap để có thể phát triển nhanh chóng và phù hợp với các độ lớn màn hình khác nhau.

Tiếp theo các yếu tố giúp bạn cải thiện tốc độ hồi đáp (load) website sẽ bao gồm:

Các mã nguồn được tối ưu.
Chuẩn nén hình ảnh được mã hoá và nén để có dung lượng thấp nhất.
Các địa điểm lưu trữ phân tán cho website (cluster servers)

Nếu như bỏ qua các yếu tố mã nguồn cần được tối ưu (mình sẽ đề cập vấn đề này trong một bài viết khác) thì chuẩn hình ảnh hiện nay các bạn đang biết là gì : JPEG, PNG, GIF ....

Hình ảnh sử dụng MozJPEG (16KB)

Hình ảnh sử dụng JPEG (30KB)

(Hình ảnh có thể không load được nếu sử dụng trình duyệt cũ)

Nếu như bạn đã biết về những chuẩn trên thì mình sẽ giới thiệu những hậu bối của các chuẩn này để giúp các bạn hiểu rõ thêm.

Đầu tiên về JPEG: một chuẩn hình ảnh đã ra đời cách đây khá lâu, sử dụng rộng rãi trên toàn thế giới và các thiết bị lưu trữ, trình chiếu hình ảnh. Tuy nhiên, vấn đề ở đây mình muốn chia sẻ là bạn cần cập nhật thông tin về chuẩn hình ảnh mới nhất hiện nay là MozJPEG (được phát triển bởi Mozilla). Mình chỉ đề cập đến một số ưu điểm ở đây:

Dung lượng lưu trữ tối ưu
Phù hợp vác các chuẩn mã hoá sử dụng HTTP2

Điểm cộng đầu tiên cho chuẩn MozJPEG là tối ưu được dung lượng lưu trữ mà không làm giảm đi chất lượng hình ảnh (resize without losses). Chi tiết hơn một hình JPEG thông thường 30MB bạn có thể resize xuống 600KB mà vẫn có thể giữ được chất lượng như ban đầu. Nếu không tin, mình có thể cung cấp 2 trang web hỗ trợ cho việc này để bạn có thể kiểm chứng:

(Khi truy cập vào 2 trang đó, nếu bạn thấy tuyệt vời hãy qua lại đánh giá 5 sao cho bài viết nhé :P)

Ưu điểm tiếp theo khi sử dụng chuẩn này là nó sẽ phù hợp với HTTP2. Nhiều bạn sẽ không biết HTTP2 là gì -> thật ra là HTTP version 2 - Hi hi. Mình sẽ giải thích kĩ hơn tí. Sau thời đại v1 của HTTP chúng ta cần tiến tới HTTP2, ở giai đoạn này chúng ta cần lưu ý đến các thuật toán sẽ sử dụng cho HTTP2. Thứ 1, các query hay nói đơn giản, các files truy cập trên trang web chúng ta cần ít hơn, chúng ta có thể tăng kích thước các file nhưng hãy giảm số lượng file trên đó. Điều này sẽ không dễ dàng cho các lập trình viên vì họ đã quen với cấu trúc phân tán để kiểm soát dự án tốt hơn. Tuy nhiên, vì các kết nối có giới hạn nên đây là điều chúng ta cần phải làm.

Vd đơn giản cho việc này, các bạn sẽ thấy một số website hiện nay thường nối các hình với nhau thành một hình dài xuống. Nguyên nhân của việc này là như mình để cập đến ở trên. “Tăng dung lượng - Giảm Query".

Quay trở lại với các thuật toán xử lý ở HTTP2, ở giai đoạn này, các hình ảnh sẽ được mã hoá trước khi được truyền tới các Web Browser hiện nay (Chrome, Safari, Firefox, Cốc cốc, …). Như vậy để mã hoá và giải nén hình ảnh, các nhà khoa học đã sáng tạo MozJPEG giúp các thuật toán được xử lý nhanh hơn, và không bị thất thoát dữ liệu khi truyền. Nói tóm gọn cho việc này: hãy sử dụng MozJPEG để phù hợp với HTTP2, còn tại sao lại là HTTP2, có lẽ mình sẽ đề cập tới ở bài viết sau.

#nén ảnh

Thiết kế web với chuẩn hình ảnh mới nhất - Phần 1

Bài nhiều người quan tâm

Danh mục

Tags