Tăng tốc website (phần cuối)

Hãy cùng điểm qua 6 phương pháp thuộc nhóm “Hình ảnh” (Image) và “Di động” (Mobile) thường được sử dụng để cải thiện tốc độ "hiện hình" của một trang web hay website.
Thực tế cho thấy, các phương pháp và kỹ thuật giúp cải thiện thời gian đáp ứng của trang web được trình bày trong 3 kỳ bài viết trước (ID: A1003_88, A1007_120 và A1008_126) đóng vai trò hết sức quan trọng trong quy trình xây dựng và thiết kết website. Tuy nhiên, để thu được kết quả tốt nhất, tùy tình huống cụ thể, lập trình viên cần phối hợp các phương pháp này linh hoạt và phù hợp với hạ tầng sẵn có như máy chủ, loại nội dung hay thậm chí thói quen lướt web của người dùng.
Bên cạnh các phương pháp đã được trình bày trước đây, với một website hay trang web, các nội dung dạng hình ảnh cũng đóng vai trò đặc biệt quan trọng trong việc quyết định một trang web sẽ xuất hiện nhanh hay chậm. Riêng với thiết bị di động, việc thiết kế website hay trang web cũng cần tuân theo vài nguyên tắc cơ bản.
1) Tối ưu ảnh
Sau khi bộ phận thiết kế hoàn tất việc "sáng tạo" các hình ảnh cho trang web, bạn cần làm vài thứ trước khi chép những ảnh này lên máy chủ dịch vụ web (web server).
• Bạn có thể kiểm tra các ảnh định dạng GIF có sử dụng bảng đặc tả màu (palette size) đúng với số màu trong ảnh không. Bạn có thể sử dụng tiện ích ImageMagick (ImageMagick: Convert, Edit, and Compose Images) cho công việc này với cú pháp identify -verbose image.gif.
Về cơ bản, số lượng màu trong palette size càng nhiều thì độ chi tiết, sắc nét của ảnh càng cao - điều đó cũng có nghĩa là dung lượng tập tin ảnh sẽ tăng theo. Do đó, tùy vào chất lượng ảnh cần hiển thị, bạn chọn giá trị phù hợp nhất cho palette size.
• Cố gắng chuyển tập tin ảnh từ định dạng GIF sang định dạng PNG để tiết kiệm không gian lưu trữ. Tuy nhiên, các lập trình viên và thiết kế website thường do dự trong việc sử dụng ảnh PNG vì định dạng này không được vài trình duyệt hỗ trợ. Vấn đề cần quan tâm duy nhất của PNG chính là sự trong suốt về màu sắc thực của định dạng PNG, tuy nhiên, GIF cũng không thể hiện màu sắc trung thực cũng như không hỗ trợ tính trong suốt. Do đó, những gì một ảnh GIF làm được thì PNG cũng có thể (trừ hỗ trợ các hịệu ứng chuyển động). Cũng với tiện ích ImageMagick, bạn sử dụng cú pháp convert image.gif image.png để chuyển một ảnh định dạng GIF sang PNG.
• Sau đó, bạn sử dụng tiện ích PNGCrush (PNGCRUSH) hay bất cứ tiện ích tối ưu ảnh PNG nào cho tất cả ảnh PNG chuẩn bị chép lên máy chủ. Ví dụ, bạn sử dụng cú pháp pngcrush image.png -rem alla -reduce -brute result.png
• Tiếp đến, bạn sử dụng lệnh jpegtran (JPEGclub.org) cho tất cả ảnh JPEG. Công cụ này sẽ giúp bạn tối ưu, thậm chí gỡ bỏ những thành phần và thông tin không cần thiết khác (như thông tin EXIF) trong các tập tin ảnh của mình.
Ví dụ: jpegtran -copy none -optimize -perfect src.jpg dest.jpg
2) Tối ưu CSS Sprites
• Như đã trình bày trong kỳ đầu tiên (ID: A1003_88), CSS Sprites là một trong những phương thức có chức năng giúp giảm số lượng yêu cầu HTTP, bằng cách giảm số lần yêu cầu truy xuất hình ảnh. Cụ thể, người lập trình và thiết kế trang web cần kết hợp các hình nền vào một hình duy nhất và sau đó sử dụng công cụ lập trình (như CSS background-image và background-position) để yêu cầu hiển thị đúng phần ảnh cần thiết. Do đó, bạn nên sắp xếp các ảnh thành phần này một cách có trật tự, đồng thời giảm kích thước tập tin ảnh "nhiều trong 1" này xuống mức nhỏ nhất có thể.
• Bạn nên kết hợp các màu tương tự vào cùng một sprite ảnh, thường là dưới 256 màu để có thể gói gọn trong một tập tin ảnh định dạng PNG-8 (sử dụng 24bit màu).
• Nếu được, bạn cần hạn chế để các khoảng trống lớn giữa các ảnh thành phần. Việc này không ảnh hưởng nhiều đến kích thước của tập tin nhưng sẽ giúp người dùng (hay chính xác là máy tính hay thiết bị di động) cần ít bộ nhớ hơn để giải nén các ảnh thành phần sang một ma trận điểm ảnh (pixel map). Ví dụ, ảnh 100x100 pixel gồm 10.000 điểm ảnh hay ảnh 1000x1000 gồm 1 triệu điểm ảnh.
3) Không "co - kéo" ảnh trong HTML
Bạn không cần sử dụng ảnh lớn hơn nhu cầu chỉ vì bạn có thể chỉnh lại độ cao và độ rộng trong HTML. Ví dụ, nếu muốn tập tin mycat.jpg hiển thị ở kích thước 100x100 pixel, bạn sử dụng cú pháp<img width="100" height="100" src="mycat.jpg" alt="My Cat" />, thay vì phải "co" ảnh có độ phân giải 500x500 pixel. Tương tự với tình trạng "kéo" từ ảnh có kích thước nhỏ hơn.
4) Tạo tập tin favicon.ico nhỏ và có thể lưu tạm
Về cơ bản, favicon.ico là một "ảnh" được lưu ở thư mục gốc trên máy chủ của bạn. Đó là tập tin cần thiết bởi vì thậm chí nếu bạn không quan tâm thì trình duyệt vẫn yêu cầu tập tin này. Ngoài ra, các cookie trên cùng máy chủ cũng sẽ được gửi đi mỗi khi tập tin này được máy chủ yêu cầu. Do đó, favicon.ico thường làm cản trở quá trình tải về của trang web. Ví dụ trong IE, khi bạn yêu cầu các thành phần bổ sung trong tác vụ tải về, tập tin favicon.ico sẽ được tải về trước các thành phần bổ sung.
Để giảm những điểm yếu của tập tin favicon.ico, bạn cần đảm bảo rằng:
• Tập tin có dung lượng nhỏ, nên dưới mức 1K.
• Thiết lập khóa Expires với giá trị thích hợp (bởi vì bạn không thể đổi tên của tập tin này). Để an toàn, bạn có thể thiết lập thời gian hiệu lực của khóa Expires trong vài tháng, đồng thời kiểm tra ngày chỉnh sửa mới nhất của tập tin favicon.ico hiện tại.
Tiện ích Imagemagick cũng có thể giúp bạn tạo ra các tập tin favicon dung lượng nhỏ.
5) Giữ các thành phần dưới 25K
Với thiết bị di động nói chung và điện thoại di động nói riêng, việc hiển thị một trang web đòi hỏi nhiều tác vụ phức tạp, song quan trọng hơn hết là tốc độ tải về và dựng lại các thành phần. Vậy tại sao lại tồn tại quy ước nên thiết kế các thành phần có dung lượng dưới mức 25K? Sự giới hạn này liên quan đến thực tế là iPhone không thể lưu trữ tạm thời (cache) các thành phần có dung lượng lớn hơn 25K. Lưu ý, đây là dung lượng chưa nén. Trong trường hợp này, bạn sẽ nhận thấy việc "thu nhỏ" dữ liệu bằng phương pháp nén dữ liệu Gzip (tham khảo lại bài viết kỳ 2) là lựa chọn thích hợp.
6) Gom nhiều thành phần
Để tăng tốc độ hiển thị, đặc biệt với trình duyệt trên thiết bị di động, nội dung cần được tải về nhanh hơn. Giải pháp thường được sử dụng là "gói" nhiều thành phần vào 1 tài liệu "đa tầng", tương tự như email có các tập tin đính kèm. Giải pháp này sẽ giúp bạn nhận được nhiều thông tin hơn chỉ với 1 yêu cầu HTTP. Tuy nhiên, trước khi áp dụng giải pháp kỹ thuật này, bạn cần kiểm tra xem thiết bị hay nền tảng mà mình chuẩn bị sử dụng có hỗ trợ không - iPhone không hỗ trợ giải pháp này.
Đừng ngần ngại chia sẻ với chúng tôi và đông đảo độc giả khác những bài viết, kỹ thuật và kinh nghiệm của chính bạn trong vịệc xây dựng, thiết kế và tối ưu website tại Công Đồng của Thế Giới Vi Tính
(pcworld)