Yếu tố người dùng tương tác có ý nghĩa quyết định đến xây dựng trang web. Nếu trang web xây dựng với chủ đề blog mọi người đọc bài viết, nếu trang web đó là một shop bán hàng online, mọi người mua hàng, còn nếu đó là trang mạng xã hội, người dùng phải tương tác với nhau.
Hiệu suất đóng vai trò chính trong sự thành công của bất kỳ trang web nào, các trang web có hiệu suất cao thu hút và duy trì người dùng tốt hơn so với các trang web có hiệu suất thấp. Giữ chân người dùng là rất quan trọng để thúc đẩy trang web tăng trưởng mạnh mẽ. Các trang web chậm sẽ gây tác động xấu đến doanh thu, làm cho doanh thu không tăng mà ngày cảng giảm đi do đó nếu bạn đang quản trị một trang web bán hàng online, hiệu suất là rất quan trọng. Nếu trang web của bạn tải nhanh và tạo trải nghiệm cao cho người dùng sẽ dẫn đến những tác động tích cực như: lưu lượng truy cập không ngừng tăng lên, tỷ lệ thoát trang thấp, doanh thu tăng cao nếu trang đang chạy quảng cáo.
Khi một trang web bắt đầu tải, cần có một khoảng thời gian chờ đợi để nội dung hiển thị. Tuy nhiên, trên các kết nối chậm hơn, thời gian buộc phải chờ lâu hơn. Khi các trang web gửi nhiều mã CSS, HTML, JavaScript,..., Các thiết bị di động có bộ nhớ CPU và bộ nhớ hạn chế do đó nếu dữ liệu trang web không được tối ưu hóa dẫn đến hiệu suất kém.
Dưới đây là các phương pháp giúp bạn cải thiện hiệu suất làm cho trang tải nhanh trên thiết bị di động.
Giảm kích thước trang
Nguyên nhân đầu tiên khiến trang tải chậm mà bạn cần nghĩ đến là kích thước trang (page size) hay dung lượng của toàn bộ trang khi tải. Bạn đang mất kiểm soát về kích thước trang hãy bỏ ra vài phút thậm chí vài tiếng để tìm hiểu nguyên do đâu trang mình lại có kích thước cao.
Mình chia kích thước của trang bằng ba thành phần cộng lại là: CSS, HTML, JavaScript do đó bạn cứ kiểm tra tối ưu từng cái một trước để làm giảm kích thước trang
Đầu tiên là tối ưu css thành phần nằm trong cặp thẻ <head></head>, mình đã viết sẵn các bài để bạn tham khảo bên dưới
- Tìm hiểu về cách chặn font, css và js mặc định của Blogger
- Làm thế nào để tối ưu css trong blogspot?
Kế đến là thành phần HTML nằm trong cặp thẻ <body></body>
Đây là nơi bạn đặt các widget tiện ích lấy dữ liệu bài viết hiện thị hoặc lấy dữ liệu từ bên ngoài, tại đây bạn chia cấu trúc của trang web thành các thành phần header, main, footer. Với mỗi thành phần bao gồm các tiện ích liên quan trong đó tiện ích Bài đăng trên Blog (widget Blog) chiếm kích thước nhiều nhất vì tiện ích này hiển thị dữ liệu bài viết trong đó có ảnh. iframe...
Cách giảm kích thước element trên thiết bị di động là đặt code xml trong thẻ điều kiện trên di động loại bỏ những cái không cần thiết chỉ hiện thị trên máy tính đừng lôi nó xuống di động làm lãng phí tài nguyên tăng kích thước.
Điều kiện nếu không phải mobile
<b:if cond='!data:blog.isMobileRequest'>
Code XML
</b:if>
Điều kiện nếu là mobile
<b:if cond='data:blog.isMobileRequest'>
Code XML
</b:if>
Hoặc đặt điều kiện trực tiếp trong <b:widget> không tải tiện ích đó trên di động, hoặc trong <b:section> không tải tất cả tiện ích trong vùng chứa của nó.
Điều kiện không hiển thị tiện ích trên mobile
<b:widget cond='!data:blog.isMobileRequest'>
</b:widget>
Điều kiện không hiển thị vùng chứa các tiện ích trên mobile
<b:section cond='!data:blog.isMobileRequest'>
<b:widget></b:widget>
</b:section>
Cuối cùng là thành JavaScript
JavaScript phải được đặt dưới cùng trong cấu trúc của theme tức là đặt trước thẻ đóng </body> để đảm bảo tất cả thành phần css, element tải trước rồi mới tải JavaScript sau cùng. Nếu code script được tải từ nguồn bên ngoài (không đồng bộ) sử dụng thêm thuộc tính asyns="" hoặc defer='"" trong thẻ script
<script asyns='"" defer='"" src='"/main.js"></script>
Tải JavaScript trong điều kiện trang không nên đặt tất cả một tệp duy nhất mà tại trang đó không sử dụng đến
+ Chỉ tải script tại trang chủ
<b:if cond='data:view.isHomepage'>
<script>//<![CDATA[
//]]></script>
</b:if>
+ Chỉ tải script trên mobile và không tại ở trang tĩnh
<b:if cond='data:blog.isMobileRequest and !data:view.isPage'>
<script>//<![CDATA[
//]]></script>
</b:if>
+ Chỉ tải script tại trang bài viết
<b:if cond='data:view.isPost'>
<script>//<![CDATA[
//]]></script>
</b:if>
Bài tham khảo
- Tạo sự kiện trì hoãn get script tăng hiệu suất tải trang
- Các phương pháp tải feeds hiệu quả làm tăng tốc độ tải trang
Tối ưu hóa hình ảnh
Tối ưu hóa hình ảnh đảm bảo trang web của bạn tải càng ít dữ liệu hình ảnh càng tốt. Vì hình ảnh chiếm một phần lớn tải trọng trung bình trên mỗi trang trên web , tối ưu hóa hình ảnh thể hiện một cơ hội lớn duy nhất để tăng hiệu suất. Nếu bạn có thời gian, hãy xem xét việc sử dụng các định dạng hình ảnh WebP thay thế vì định dạng này hỗ trợ trình duyệt rộng rãi và sử dụng ít dữ liệu hơn JPEG và PNG trong khi vẫn giữ chất lượng hình ảnh cao.
Bài tham khảo: Sử dụng định dạng ảnh WebP để giảm kích thước trang và cải thiện hiệu suất
Cung cấp hình ảnh đáp ứng
Sự đa dạng các thiết bị và kích thước màn hình của chúng, để cải thiện hiệu suất bằng cách gửi hình ảnh với kích thước phù hợp nhất với màn hình xem chúng. Trong các trường hợp sử dụng đơn giản nhất, bạn có thể thêm một srcset thuộc tính cho một thành <img> phần để chỉ định một mảng hình ảnh mà trình duyệt có thể chọn.
Bài tham khảo: Thiết lập kích thước ảnh khi tải trang phù hợp với kích thước màn hình
Sử dụng lazyload tải ảnh và iframe
Trì hoãn các hình ảnh trong vùng không nhìn thấy trong màn hình thiết bị, chỉ khi nào scroll đến mới tải ảnh hiển thị. Các bạn xem mục 4 Tối ưu hình ảnh bài viết Chia sẻ một vài kinh nghiệm giúp bạn tối ưu Blog tải nhanh hơn
Khi người dùng di động chiếm một phần lớn người dùng internet trên toàn thế giới, điều quan trọng các bạn cần phải nhớ rằng nhiều người dùng này truy cập web thông qua mạng di động LTE, 4G, 3G và thậm chí là 2G. Do đó tối ưu hiệu suất trang trên thiết bị di động là phương pháp hay nhất giữ chân người dùng, giúp trang web tăng trưởng bền vững.
