Người dùng của bạn luôn mong đợi trang web của bạn tải nhanh hơn. Nếu không thì bạn có thể mất rất nhiều lưu lượng truy cập. Và như thế nào được coi là tải nhanh? Một số nghiên cứu cho thấy rằng nếu một trang không tải trong nháy mắt theo đúng nghĩa đen sẽ làm mọi người có thể mất hứng thú. Đó là khoảng 400 mili giây. Chỉ cần chậm trễ một giây cũng có thể làm giảm 16% sự hài lòng cuả khách hàng và cứ bốn khách truy cập thì sẽ có một người từ bỏ trang web nếu mất hơn bốn giây để tải.
Chưa kể Google còn coi tốc độ tải trang web là yếu tố để xếp hạng trang web trên di động. Vì vậy nếu trang web của bạn không nhanh, cả khách hàng của bạn và Google sẽ đánh giá kém về nó. Từ đó bạn sẽ mất dần người dùng và lưu lượng truy cập. Trang web của bạn nhanh như thế nào? Nếu mất hơn một hoặc hai giây để tải là bạn đang mất lưu lượng truy cập ngay tại thời điểm đó. Trang web của bạn chạy chậm là 1 điều bình thường. Luôn có nhiều cách có thể thực hiện để làm cho nó nhanh hơn, đảm bảo không bỏ lỡ 1 lượt truy cập nào của người dùng. Và dưới đây chính là 1 số cách có thể áp dụng:
Bước 1: Kiểm tra tốc độ tải trang web trên thiết bị di động của bạn
Trước khi làm bất cứ điều gì khác, bạn nên kiểm tra tốc độ chính xác của trang web dành cho thiết bị di động của bạn.
Bạn có thể nghĩ rằng nó tải tốt nhưng thực tế nó có thể chậm hơn bạn nghĩ. Một trong những thử nghiệm di động tốt nhất là từ Ubersuggest. Đây là cách nó hoạt động.
Bước #1: Nhập URL của bạn và nhấn vào “tìm kiếm”
Bước #2: Nhấn vào “kiểm ta trang web” trong thanh bên trái
Bước #3: Cuộn xuống “tốc độ trang web”
Đây là nơi bạn sẽ tìm thấy thời gian tải của cả máy tính để bàn và thiết bị di động. Điều này cho thấy thời giản tải trang web trên thiết bị di động của tôi là 2 giây – thời gian khá xuất xắc.
Nó cũng kiểm tra tốc độ liên quan đến 6 yếu tố chính của trang web của bạn:
– Văn bản / Hình ảnh đầu tiên được hiển thị
– Chỉ số tốc độ
– Thời gian tương tác
– Thời gian nội dung chính được hiển thị
– Thời điểm CPU vào chế độ chờ (Web đã ổn định)
– Độ trễ khi nhập dữ liệu
Nếu tốc độ trang web của bạn xuất sắc bạn không nên quá lo lắng. Nhưng nếu có chỗ cần cải thiện, đừng chờ đợi thêm nữa. Bởi cứ thêm 0,5 giây để tải trang web của bạn sẽ làm tăng tỷ lệ khách truy cập rời đi.
Tôi sẽ giải thích các nguyên nhân phổ biến nhất khiến các trang web trên di động bị tải chậm và những gì bạn có thể làm để cải thiện trang web của mình.
Bước 2: Hoàn thiện thiết kế trang web dành cho thiết bị di động của bạn
Hãy nghĩ lại thời điểm bạn thiết kế trang web của mình. Bạn đã nghĩ đến thiết bị di động chưa? Hẳn là bạn đã không.
Nếu bạn đã không làm vậy thì bây giờ là lúc bạn phải suy nghĩ lại về thiết kế của mình với suy nghĩ ưu tiên thiết kế trên thiết bị di động. Các trang web dành cho thiết bị di động đã thay đổi rất nhiều những năm qua. Trước đây các trang web sẽ có hai phiên bản, một dành cho thiết bi di động và một dành cho máy tính để bàn. Một trang web dành cho thiết bị di động có thể dễ dàng được xác định bằng ký tự “m.” ở phần phụ của tên miền.
Trong tình huống này, các trang web dành cho thiết bị di động và máy tính để bàn là hai loại hoàn toàn khác nhau, hoạt động tách biệt với nhau. Hiện nay, hầu hết các trang web sử dụng thiết kế đáp ứng. Thiết kế đáp ứng cho phép bạn có một trang web tự động thay đổi tùy thuộc vào cách nó được truy cập. Vì vậy mà người dùng thiết bị di động hay máy tính để bàn của bạn đều sẽ xem cùng một trang web, nhưng nó sẽ xuất hiện khác nhau trên mỗi thiết bị. Và đây cũng là điều Google thích áp dụng, họ chỉ đơn giản nói rằng:
“Thiết kế đáp ứng là thiết kế được đề xuất bởi Google”. Có thể bạn sẽ nghĩ ngay “điều này thì có gì liên quan đến tốc độ”. Các thiết kế đáp ứng thường tải nhanh hơn các trang web chỉ dành cho thiết bị di động, bởi vậy mà bạn đạt được lợi thế SEO (Search Engine Optimization) lớn ở điểm này. Nếu bạn sử dụng thiết kế đáp ứng, trang web của bạn sẽ được chú ý nhiều hơn khi được chia sẻ xã hội, điều mà thúc đẩy cao SEO của bạn.
Làm cho trang web của bạn đáp ứng tốt trong cả ngắn hạn và dài hạn. Nếu bạn chưa có một trang web thích ứng, lời khuyên cho bạn là nên xem xét đến nó càng sớm càng tốt.
Bước 3: Hãy giữ cho trang web của bạn “nhẹ”
Thật dễ dàng để bắt gặp việc tạo ra những thiết kế tốt nhất và bắt mắt nhất hiện có. Nhưng đôi khi bạn lại bị cuốn vào nó và kết quả là trang web của bạn ngày càng chậm hơn vì bạn thêm ngày càng nhiều. Đây là một tình trạng mà các nhà phát triển gọi là mã phình to. Mã phồng lên xảy ra khi trang web của bạn bị quá tải với nhiều mã thừa.
Hầu hết thời gian, sự phình to mã xảy ra khi một nhà thiết kế quá tập trung vào việc trình bày hình thức của một trang web. Tất nhiên trang web trông như thế nào là điều rất quan trọng song hiệu suất không thể nhường chỗ cho vẻ bề ngoài. Và dưới đây là một số mẹo cần ghi nhớ khi thiết kế trang web của bạn:
Hãy giữ nó đơn giản
Leonardo da Vinci đã nói điều này về sự đơn giản:
“Đơn giản là sự tinh tế tối thượng”
Bây giờ và khoảng năm trăm năm sau, lời nói của ông vẫn còn nguyên giá trị.
Hãy nhìn tổng quan những thiết kế phức tạp của quá khứ đã được thay thế bằng những thiết kế tối giản của tương lai.
Điều này cũng áp dụng cho các trang web đặc biệt với các trang di động. Trên màn hình thiết bị di động, các trang web dễ dàng trở nên quá chật, vì vậy điều quan trọng là phải giữ mọi thứ thoáng đãng và dễ nhìn.
Theo quy tắc chung, bạn chỉ nên có một lệnh hành động trên mỗi trang. Điều này sẽ giúp bạn giảm số lượng mã sử dụng và nó sẽ cải thiện trải nghiệm người dùng trên trang web của bạn. Bạn có thể muốn xem xét một thiết kế đơn giản như thế này của Rug Doctor:
Nó không quá hào nhoáng nhưng nó thu hút sự chú ý của bạn với kiểu dáng đẹp. Bạn không cần quá nhiều màu sắc tươi sáng và ảnh để làm cho trang web của bạn nổi bật. Nhưng khi nói đến thiết kế di động, ít hơn thường là nhiều hơn.
Loại bỏ các bước
Người sử dụng của bạn phải làm càng ít càng tốt. Tại sao phải có 7 bước giữa khách hàng và người bán hàng trong khi có thể rút có 3 bước? Điều này giúp rút ngắn kênh bán hàng của bạn một cách hiệu quả nhưng cũng giúp trải nghiệm của người dùng trở nên đơn giản hơn. Nhiều trang thương mại điện tử sử dụng chiến lược này để tăng doanh số bán hàng của họ. Trên trang web dành cho thiết bị di động của Boden, thật dễ dàng để mua một sản phẩm. Bạn thêm nó vào giỏ hàng của mình, nhấn vào thanh toán và thanh toán.
Nó đơn giản vào thẳng mục đích và không có bước không cần thiết. Điều này cũng tự nhiên làm giảm sự phình ra của mã. Thật khó để viết quá nhiều mã nếu như bạn không có quá nhiều trang trên trang web của mình. Cắt bỏ những bước không cần thiết là một trong những điều tốt nhất bạn có thể làm cho người truy cập của bạn. Người dùng di động có khả năng ở lại trang web của bạn lâu hơn nếu họ không phải làm quá nhiều. Tiết kiệm cho người dùng của bạn vài lần nhấn chuột và bạn sẽ nhận về nhiều nguồn lợi khổng lồ.
Sử dụng ít hình ảnh hơn
Trước khi đi sâu vào vấn đề này. Tôi muốn nói rằng hình ảnh tốt chắc chắn sẽ rất quan trọng đối với bất kỳ trang web nào và chúng cũng có lợi ích về SEO. Tuy nhiên trong trường hợp này bạn có thể sẽ bị rối với những hình ảnh và làm chậm trang web của mình trong quá trình này. Bạn có thể không nghĩ đây là một vấn đề lớn nhưng hình ảnh chiếm khoảng 63% “trọng lượng” của một trang web. Từ năm 2011 đến 2015 kích thước của trang trung bình trên thiết bị di động đã tăng gấp ba lần.
Điều đó có nghĩa rằng hình ảnh là một trong những yếu tố khắt khe nhất trên trang web của bạn. Chúng chiếm nhiều không gian, vì vậy mà quá nhiều sẽ không tốt. Một giải pháp đơn giản là cắt bớt hình ảnh. Một giải pháp khác là nén hình ảnh và giảm kích thước tệp của chúng. Nén về cơ bản là làm cho hình ảnh của bạn nhỏ hơn mà không làm giảm chất lượng. Điều này làm giảm thời gian tải trang web của bạn. Và lợi ích hơn nữa khi nó cũng làm giảm lượng thời gian để các công cụ tìm kiếm thu thập dữ liệu và index trang web của bạn.
Các trang web như Compressor.io có thể thực hiện điều này trong tích tắc.
Trên thực tế đây là một phương pháp hay nhất mà bạn nên áp dụng ngay cả khi trang web của bạn đang hoạt động rất nhanh.
Không sử dụng phông chữ tùy chỉnh
Tôi thích sử dụng phông chữ tùy chỉnh đẹp như bất kỳ ai khác, nhưng một trong số chúng có khả năng phải bảo trì cao. Một số phông chữ sử dụng rất nhiều CSS, trong khi những phông chữ khác sử dụng nhiều JavaScript. Dù bằng cách nào nhưng bạn cũng đang có rất nhiều mã. Nếu bạn muốn đọc thực sự sâu về chủ đề này, hãy xem bài đăng này ở trang nền móng thiết kế web của Google. Nếu bạn muốn 1 lời tóm tắt: chỉ sử dụng phông chữ tùy chỉnh khi chúng thật sự cần thiết.
Bước 4: Tối ưu mã của bạn
Tối ưu là một kỹ thuật rất hữu ích để cải thiện mã của bạn. Dưới đây là định nghĩa nhanh về ý nghĩa của việc “tối ưu” mã: tối ưu mã nghĩa là gì và tạo sao nó lại có lợi.
“Optimize code (Tối ưu code) là việc chỉnh sửa/viết lại code nhằm giảm dung lượng, hạn chế input/output, tăng tốc độ thực thi, giảm lượng phần cứng cần sử dụng. … Khi hệ thống chạy quá chậm, hoặc tốn quá nhiều tài nguyên, ta phải tối ưu để giúp hệ thống chạy nhanh hơn hoặc tốn ít tài nguyên hơn.”
Về cơ bản, việc rút gọn mã của bạn sẽ loại bỏ mọi thứ thừa và không cần thiết. Nó đảm bảo rằng trang web của bạn chỉ đang sử dụng mã mà nó cần. Đây là cách hiệu quả nhất khiến cho trang web của bạn nhẹ nhàng hơn. Bạn có thể rút gọn mã theo cách thủ công, nhưng nếu bạn không có bất kỳ kinh nghiệm viết mã nào điều đó sẽ hơi khó. Rất may có một số công cụ miễn phí mà bạn có thể sử dụng để rút gọn mã của mình ngay lập tức. Minifycode.com cung cấp một số công cụ rút gọn để cho phép bạn đơn giản hóa HTML, CSS, JavaScript và hơn thế nữa.
Nếu trang web của bạn chạy trên wordpress, bạn thậm chí còn có nhiều tùy chọn hơn nhờ các plugin như Better Wordperss Minify:
Bằng cách sử dụng các công cụ này, bạn có thể giảm thiếu mã của mình chỉ bằng vài cú nhấn chuột và bạn sẽ dễ dàng truy cập trang web nhanh hơn. Tất nhiên bạn nên làm tất cả những gì có thể để đảm bảo không có đoạn mã nào không cần thiết mà xảy ra sai sót. Những công cụ này cho phép bạn sửa những lỗi đó và đồng thời cải thiện trang web của mình.
Bước 5: Cắt giảm các chuyển hướng
Chúng có thể thực sự hữu ích cho SEO và trải nghiệm của người dùng. Nhưng cũng giống như mã, chuyển hướng có giới hạn sử dụng. Bạn không thể sử dụng chuyển hướng khắp nơi và mong muốn trang web của mình hoạt động tốt. Đó là bởi vì chuyển hướng vốn đã làm chậm trang web của bạn. Khi bạn nhấn vào một liên kết di động bình thường, máy chủ sẽ cung cấp tài liệu được tìm thấy tại liên kết đó.
Nhưng chuyển hướng có nghĩa là không có tài liệu nào tại liên kết cụ thể dó. Vậy nên máy chủ phải đi đến trang chưa tài liệu và truy xuất nó.
Quá trình này phải xảy ra với mỗi tệp trên một trang web. Điều đó có nghĩa là mọi hình ảnh, tệp CSS, JavaScript sẽ đi qua chuyển hướng. Do đó có thể mất vài giây trước khi trang bên tải được. Vào thời điểm đó thì người dùng của bạn có thể đã từ bỏ truy cập. Tôi khuyên bạn nên sử dụng Screaming Frog để kiểm tra chuyển hướng. Sau đó bạn có thể theo dõi cặn kẽ các chuyển hướng của mình và thay đổi bất kỳ điều gì không cần thiết. Càng phải làm ít công việc trang web hoạt động càng nhanh. Mặc dù chuyển hướng có thời gian và địa diểm nhưng đừng lạm dụng hay phụ thuộc vào chúng.
Bước 6: Tải trên nội dung chính // tiêu đề trước
Rõ ràng là người dùng xem nội dung tiêu đề trước khi họ thấy bất cứ thứ gì khác. Vậy tại sao phải tải toàn bộ trang của bạn cùng một lúc? Tại sao không chỉ tải nội dung chính trước và sau đó tải phần còn lại nếu cần? Đây là một khái niệm được gọi là “tải chậm” và nó đem lại hiểu quả đáng kinh ngạc cho tốc độ trang web. Tôi cá là nếu được lựa chọn bạn muốn nâng 3 pound hơn 30 phải không?
Tải chậm là một khái niệm chính xác cho các trang web. Bằng cách thực hiện tải chậm, bạn đang yêu cầu trang web của mình chỉ thực hiện công việc cần phải phải làm và chỉ có vậy. Nếu bạn cảm thấy thoải mái với mã, bạn có thể sử dụng plugin jQuery. Đối với các trang web wordpress, các plugin như BJ Lazy Load để hỗ trợ.
Nếu cả hai tùy chọn đó đều không phù hợp, bạn có thể phải cần thuê một nhà phát triển để giúp. Đây là một kỹ thuật nâng cao nhưng nó có thể giúp trang web của bạn không phải thực hiện nhiều công việc trong thời gian dài.
Kết luận
Tốc độ không chỉ dành cho xe đua nó còn là một trong những yếu tố cơ bản nhất tạo nên một trang web tuyệt vời. Trang web phù hợp với thiết bị di động có thể tăng lượng truy cập và mang lại nhiều khách hàng. Không có gì ngạc nhiên khi hiệu suất máy tính để bàn vẫn quan trọng nhưng thiết bị di động là hiện tại và tương lai.
Nói tóm lại, hãy làm cho trang web của bạn nhanh nhất có thể và giảm trọng lượng mà trang web của bạn đang phải gánh chịu. Bài báo Think with Google đã nói: “Nếu tốc độ cao, ma sát sẽ càng lớn”. Cải thiện tốc độ trang web trên thiết bị di dộng của bạn là một cú hích có một không hai làm cho trang web tốt hơn đến người dùng và các công cụ tìm kiếm. Nếu bạn vẫn chưa tập trung vào thiết bị di động, hãy bắt đầu ngay hôm nay.
Vậy bạn sẽ sử dụng kỹ thuật nào trong số những kỹ thuật này để tăng tốc độ trang web trên thiết bị di động của mình?