10 cách cải thiện hiệu suất website tập trung vào front-end performance (P1)
Có hàng triệu cách giúp tăng hiệu suất website có thể áp dụng cho doanh nghiệp. Các phương pháp khác nhau này chủ yếu nằm trong ba lĩnh vực chính: Phần cứng (web server), tối ưu hóa server-side scripting (PHP, Python, Java) và hiệu suất front-end.
Bài viết này Bizfly Cloud chủ yếu tập trung vào front-end performance vì nó dễ thực hiện nhất và cung cấp nhiều lợi ích nhất.
Tại sao lại tập trung vào front-end performance?
Front-end (HTML, CSS, JavaScript và hình ảnh) là phần dễ truy cập nhất trên website. Nếu sử dụng gói shared web hosting, người dùng không có quyền truy cập root vào server, do đó không có khả năng điều chỉnh các cài đặt server. Và ngay cả khi có quyền đi chăng nữa, web server và database engineering yêu cầu khá nhiều kiến thức chuyên môn để có thể thực hiện các thủ thuật tùy chỉnh cho website.
Thao tác tập trung vào Front-end không hề tốn kém. Hầu hết các tối ưu hóa front-end không gây tốn thêm bất kỳ loại chi phí phát sinh nào khác ngoài thời gian. Không những "free", mà front-end còn giúp "tiết kiệm" thời gian và tiền bạc cho doanh nghiệp bằng cách tăng tốc độ tải trang, từ đó tạo điều kiện tối đa cho tăng trải nghiệm khách hàng, giữ chân người dùng, tăng tỷ lệ chuyển đổi dẫn tới tăng doanh thu.
Sau đây là một vài cách đơn giản để cải thiện tốc độ tải trang
1. Lập hồ sơ các web page để tìm ra thủ phạm
Lập hồ sơ trang web để tìm các thành phần không cần thiết hoặc có thể tối ưu hóa. Để thực hiện bạn nên sử dụng những công cụ như Fireorms để xác định thành phần nào (hình ảnh, CSS, HTML documents, JavaScript) đang được người dùng yêu cầu, thời gian tải và độ lớn của thành phần. Một nguyên tắc chung là bạn nên giữ các thành phần trang càng nhỏ càng tốt (dưới 25KB là lý tưởng).
Firebug's Net tab có thể giúp bạn săn lùng các tệp khổng lồ làm nặng website. Công cụ này cung cấp bảng phân tích tất cả các thành phần cần thiết để hiển thị một trang web bao gồm: thành phần đó là gì, ở đâu, lớn như thế nào và mất bao lâu để tải.
2. Lưu hình ảnh ở định dạng phù hợp nhằm giảm kích thước tập tin
Nếu website có nhiều hình ảnh, bạn cần thiết phải tìm hiểu về định dạng tối ưu cho mỗi hình ảnh. Có ba định dạng tệp hình ảnh web phổ biến là: JPEG, GIF và PNG. Nói chung, bạn nên sử dụng JPEG khi cần ảnh hiển thị gần giống thực tế nhất với độ bóng và tông màu mượt mà. Bạn nên sử dụng GIF hoặc PNG cho hình ảnh có màu sắc rắn (như biểu đồ và logo). GIF và PNG tương tự nhau, nhưng kích thước PNG thấp hơn.
3. Giảm thiểu CSS và JavaScript
Giảm thiểu là quá trình loại bỏ các ký tự không cần thiết (như tabs, spaces, source code comments) khỏi source code để giảm kích thước tệp. Ví dụ:
.some-class {
color: #ffffff;
line-height: 20px;
font-size: 9px;
}
Có thể được thay đổi thành ngắn gọn như sau:
.some-class{color:#fff;line-height:20px;font-size:9px;}
Đừng lo vì quá phức tạp. Có rất nhiều công cụ miễn phí có sẵn giúp thu nhỏ các tệp CSS và JavaScript. Đối với CSS, bạn có thể tìm thấy một loạt các công cụ dễ sử dụng từ danh sách các công cụ tối ưu hóa CSS. Đối với JavaScript, một số công cụ phổ biến là JSMIN, YUI Compressor, và JavaScript Code Improver.
>>> Đọc thêm: 10 lý do không thể bỏ qua CDN khi tối ưu website
4. Kết hợp các tệp CSS và JavaScript để giảm HTTP request
Một HTTP request được tạo cho server khi các thành phần render nên website được người dùng yêu cầu. Vì vậy, nếu bạn có năm tệp CSS cho một trang web, bạn sẽ cần ít nhất năm HTTP GET request dành riêng cho web page cụ thể đó. Bằng cách kết hợp các tệp lại bạn sẽ giảm số lượng HTTP request xuống.
Bằng cách kết hợp này, website có khả năng giảm 1,6s trong tổng thời gian phản hồi, do đó giảm thời gian phản hồi xuống còn 76% so với ban đầu. Mặt khác, bạn có thể kết hợp các tệp CSS và JavaScript bằng cách sử dụng copy-and-paste.
5. Sử dụng CSS sprite để giảm HTTP request
CSS Sprite là sự kết hợp của các hình ảnh nhỏ hơn thành một hình ảnh lớn. Để hiển thị hình ảnh chính xác, bạn điều chỉnh background-position CSS attribute. Kết hợp nhiều hình ảnh theo cách này sẽ giảm các HTTP request.
Ví dụ: trên Digg (hiển thị ở trên), bạn có thể thấy các biểu tượng riêng lẻ tương tác với người dùng. Để giảm server request, Digg đã kết hợp một số biểu tượng trong một hình ảnh lớn và sau đó sử dụng CSS để định vị chúng một cách thích hợp.
Bạn có thể thực hiện việc này một cách thủ công, nhưng có một công cụ web-based tool có tên CSS Sprite Generator cung cấp tùy chọn tải lên hình ảnh để được kết hợp thành một sprite CSS, sau đó xuất CSS code (the background-position attributes) để hiển thị hình ảnh.
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: 10 cách cải thiện hiệu suất website tập trung vào front-end performance (P2)
