Mặc dù chắc chắn có một số yếu tố ảnh hưởng đến doanh thu, hầu hết các chuyên gia nói rằng các trang web kinh doanh tải trong vòng 5 giây kiếm được gần gấp đôi những người làm điều đó trong 19, thời gian tải trang trung bình.
Nghiên cứu đã phát hiện thêm rằng các trang web tải trong vòng 5 giây có:
- Khả năng hiển thị quảng cáo cao hơn 25%,
- Tỷ lệ thoát thấp hơn 35% và
- Phiên người dùng dài hơn 70%.
Đó chính xác là lý do tại sao chúng ta cần tập trung vào các giải pháp di động đầu tiên để giúp các doanh nghiệp của chúng tôi thành công. Rốt cuộc, tốc độ di động chưa bao giờ quan trọng hơn.
$config[code] not foundTốc độ tải chậm có thể thực sự là một vấn đề
Theo Google,
- 1 trong 2 người mong đợi một trang sẽ tải trong vòng chưa đầy 2 giây.
- 53% lượt truy cập có nhiều khả năng bị bỏ qua nếu trang mất nhiều hơn 3 giây để tải trên thiết bị di động.
- 46% mọi người đã tỏ ra không hài lòng khi chờ đợi các trang tải trong khi duyệt web trên thiết bị di động.
Ba yếu tố chính làm chậm các trang web trên internet di động là số lượng yêu cầu máy chủ, kích thước tệp và thứ tự tuần tự của các yếu tố tải trang. Vì vậy, bây giờ chúng tôi đã nhấn mạnh các nguyên nhân; hãy để đến với giải pháp.
Cách tăng tốc độ trang web trên thiết bị di động
Đo lường và giảm thiểu thời gian phản hồi máy chủ của bạn
Tốc độ trang di động của bạn không chỉ phụ thuộc vào mã của bạn mà còn phụ thuộc vào một công cụ công nghệ quan trọng được gọi là máy chủ.
Máy chủ của bạn chờ phản hồi yêu cầu trình duyệt càng lâu thì trang của bạn tải trên thiết bị càng chậm. Hầu hết các chuyên gia tại Google khuyên rằng máy chủ của bạn bắt đầu truyền 1thứ byte tài nguyên trong vòng hai trăm mili giây của một yêu cầu cho kết quả tối ưu hơn.
Thông thường, có 3 phương pháp chính liên quan đến độ cao của thời gian phản hồi máy chủ của bạn:
- Cải thiện cấu hình hoặc phần mềm máy chủ web của bạn.
- Nâng cao phạm vi và chất lượng dịch vụ lưu trữ của bạn, đặc biệt đảm bảo bạn có đủ tài nguyên bộ nhớ và CPU.
- Giảm số lượng tài nguyên theo yêu cầu của các trang web của bạn.
Sử dụng CSS để tải hình ảnh
Nếu bạn muốn ẩn hình ảnh nội dung của mình cho người dùng di động, hãy tải chúng dưới dạng hình nền thông qua CSS và sử dụng các truy vấn phương tiện để ẩn chúng theo điều kiện.
Một biến thể của kỹ thuật này được Amazon sử dụng để tải hình ảnh cụ thể theo thiết bị.
Giảm thiểu số lần chuyển hướng để tăng tốc độ trang di động của bạn
Chuyển hướng không là gì ngoài các hướng dẫn có khả năng tự động đưa khách truy cập trang web từ trang này sang trang khác.
Mỗi chuyển hướng có thể ăn hết mili giây có giá trị, dẫn đến tải trang chậm hơn. Điều này đặc biệt có vấn đề đối với các thiết bị di động vì chúng thường phụ thuộc vào các mạng không đáng tin cậy hơn so với người dùng máy tính để bàn.
Bước đầu tiên để khắc phục vấn đề này là khảo sát số lượng chuyển hướng trên trang web của bạn bằng cách sử dụng các công cụ như chuyển hướng ánh xạ. Nếu số lượng quá lớn, giảm thiểu nó, hoặc lý tưởng nhất, đưa nó xuống 0 để có kết quả tốt nhất.
Giảm thiểu các tệp JS và CSS
Nhiều dữ liệu hơn có nghĩa là trọng lượng trang vượt quá. Điều này sẽ khiến các trang của bạn mất nhiều thời gian hơn để tải trên thiết bị di động.
Đó là lý do tại sao hầu hết các nhà phát triển web xứng đáng với khí phách của họ biết nhu cầu tối ưu hóa và giảm thiểu tài sản để tăng tốc độ tải trang.
Giảm thiểu tối ưu hóa giúp loại bỏ sự dư thừa mà không ảnh hưởng đến việc hiển thị trang. Một loạt các công cụ Google có thể giúp bạn loại bỏ các khoản dư thừa đó, bao gồm các mục như:
- CSSNano (cho CSS)
- UglifyJS (cho JS)
Thay vì hình ảnh, hãy sử dụng CSS3
Thả bóng, góc tròn và tô màu gradient - tất cả các tính năng này có thể được thực hiện thông qua CSS, thay vì hình ảnh.
Điều này có thể giúp ích rất nhiều trong việc giảm số lượng yêu cầu HTTP, do đó tăng tốc thời gian tải cùng một lúc.
Sử dụng các SVG nội tuyến thay vì JPEG
Giống như URI dữ liệu, các SVG (đồ họa vectơ có thể mở rộng) có thể được nhúng trên một trang để giảm số lượng yêu cầu
Các tệp này có thể được tạo trên trình soạn thảo đồ họa vector như Inkscape, Adobe Illustrator, v.v. Sau khi nó được tạo, bạn có thể mở nó trong trình soạn thảo văn bản và thả nó vào mã của bạn.
Lưu ý: Để nhúng một SVG trong biểu định kiểu của bạn, trước tiên bạn phải chuyển đổi nó thành URI dữ liệu và sau đó tiến hành bước tiếp theo.
Vì vậy, ít nhiều tổng hợp mọi thứ lên. Hy vọng bạn đã có một đọc tốt và khai sáng.
Ảnh qua Shutterstock
1
