Làm cách nào để tối ưu hóa trang web của bạn cho người dùng di động?

Bạn có chắc chắn rằng trang web của bạn thân thiện với thiết bị di động?


Bạn có biết rằng Google đã giới thiệu một chính sách mới có tên Mobile-First? Nhiều hơn và nhiều hơn nữa người dùng web đang rời khỏi máy tính để bàn, và thay vào đó, duyệt và mua sắm bằng thiết bị di động của họ.

Thiết kế web đáp ứng đã giúp tạo ra các trang web hoạt động trên tất cả các nền tảng ở mức độ đồng đều. Nhưng, ngay cả khi đó, thiết kế đáp ứng chỉ là một phần của chiến lược tối ưu hóa UX cho thiết bị di động.

Nếu bạn muốn tối ưu hóa hiệu suất thực sự, bạn cũng sẽ phải xem xét các lựa chọn thay thế khác.

Đây là lý do tại sao có một sự nhấn mạnh mạnh mẽ như vậy vào việc xây dựng trang web của bạn như là một trải nghiệm di động đầu tiên. Nói một cách đơn giản, đầu tiên trên thiết bị di động có nghĩa là thiết kế và nội dung của bạn được tối ưu hóa cho người dùng di động trước tiên.

Điều đó đang được nói, bài viết này không phải là về thiết kế một trang web hoàn toàn mới. Thay vào đó, chúng tôi sẽ xem xét một số nguyên tắc thiết kế cơ bản đầu tiên trên thiết bị di động. Và, dành thời gian tập trung vào các kỹ thuật để tối ưu hóa trải nghiệm người dùng cho người dùng di động của bạn.

# 1: Thiết kế với thiết bị di động trong tâm trí

Web được xây dựng chủ yếu dựa trên nguyên tắc phục vụ người dùng máy tính để bàn. Web thật, những tiến bộ thực sự trong công nghệ, được hiển thị tốt nhất trên màn hình toàn màn hình đẹp. Tuy nhiên, điện thoại thông minh và các thiết bị di động khác là một điều, và đã đến lúc bắt đầu thích nghi với khái niệm thiết kế đầu tiên trên thiết bị di động.

Khác với thiết kế đáp ứng thông thường, những yếu tố thiết kế nào khác bạn nên triển khai trong các thiết kế web đầu tiên trên thiết bị di động của bạn?

  • Ưu tiên. Màn hình di động được giới hạn trong không gian hiển thị có sẵn. Ngoài ra, màn hình di động trình bày nội dung theo cách dọc trái ngược với cấu trúc ngang – rộng hơn nhiều cho máy tính để bàn. Điều này có nghĩa là bạn phải thiết kế bằng cách sử dụng ưu tiên. Những yếu tố nào là quan trọng nhất cho người dùng để xem? Nếu có các nút CTA, thật dễ dàng để xem chúng cho người dùng di động?
  • Nội dung đầu tiên. Màu thứ hai. Bạn có thể làm một số điều thú vị với thiết kế di động, nhưng chắc chắn không nằm trong phạm vi thiết kế máy tính để bàn. Vì vậy, hãy nhường đường cho nội dung đầu tiên. Làm cho bản sao của bạn và các phần nội dung khác dễ đọc và dễ tiếp cận. Một màn hình di động ít tha thứ hơn về các yếu tố thị giác gây mất tập trung.
  • Điều hướng dễ dàng. Trên thiết bị di động, bạn có thể chỉ cần nhấp vào bất cứ nơi nào và quay trở lại trang chủ. Trừ khi, tất nhiên, bạn có kế hoạch cho loại điều hướng này trước thời hạn. Và bạn nên. Thử nghiệm với các tiện ích Scroll-to-Top, nhưng cũng có các tiêu đề dính liền mạch bất cứ khi nào có thể.

Cách tốt nhất để kiểm tra xem bạn có đang thực hiện quyền này hay không là sử dụng điện thoại của chính bạn (tôi làm điều đó mọi lúc!) Và truy cập trang web của bạn. Kiểm tra kỹ lưỡng về cách mọi thứ cảm nhận và chảy cùng nhau.

Nếu bạn đang ngồi trong quán cà phê hoặc chờ trên chuyến bay trong sân bay, hãy chọc vào vai ai đó và lịch sự yêu cầu họ kiểm tra trang web của bạn cho bạn. Sau đó, ngồi lại và nghe phản hồi của họ. Hầu hết các lần bạn sẽ tự làm mình ngạc nhiên với cách mọi người cảm nhận về trải nghiệm người dùng của trang web của bạn.

# 2: Tối ưu hóa tài nguyên; hình ảnh, biểu tượng, vv.

Bạn có thường xuyên thấy mình sử dụng hình ảnh vì mục đích cá nhân chứ không phải UX không? Điều đó xảy ra và nếu bạn sẽ sáng tạo, bạn sẽ trả tiền để hiểu cách tối ưu hóa phương tiện hoạt động.

Các yếu tố trực quan như ảnh, hình minh họa, biểu tượng và video là người tiêu dùng băng thông lớn nhất trên các trang web.

Thời gian tải trang trung bình cho năm 2018 Làm thế nào để bạn so sánh Blog tốc độ MachMetricsKích thước trang web trung bình năm 2018. Được liệt kê bởi các ngành và các quốc gia khác nhau.

Mặc dù có một kích thước trang web được thiết lập mà mọi người phải đáp ứng, nhưng theo ý nghĩa chung thì kích thước trang web nhỏ hơn tương đương với thời gian tải nhanh hơn.

Vì vậy, làm thế nào bạn có thể cắt bớt một số KB hoặc thậm chí MB khỏi nội dung hình ảnh của bạn?

  • Thay đổi kích thước hình ảnh của bạn. Nghe có vẻ đơn giản phải không? Chà, tôi có thể theo dõi số lần tôi đã duyệt một trang web di động chỉ để tải hình ảnh 1980 x 1200 trong nền. Thay vào đó, ảnh kích thước đầy đủ nên được cung cấp dưới dạng liên kết thay thế khi thích hợp. Thay đổi kích thước có thể cạo tới 80% tổng kích thước hình ảnh, tùy thuộc vào kích thước yêu cầu của bạn. Tuy nhiên, đối với các thiết bị di động, không có lý do gì để vượt quá phạm vi 600-700px.
  • Giảm kích thước tệp khi nén. Nén / tối ưu hóa hình ảnh là quá trình sử dụng phần mềm của bên thứ ba để giảm số lượng màu có trong hình ảnh. Điều này có thể được thực hiện ở một mức độ mà các bức ảnh của bạn không thể làm giảm chất lượng bẩm sinh của chúng nhưng có thể làm giảm kích thước tệp của chúng một cách đáng kể. Nếu bạn cần trợ giúp về việc nén hình ảnh, không có gì khác ngoài công cụ nén hình ảnh toàn diện của chúng tôi.
  • Khám phá các định dạng tệp thay thế. Mọi người đều đã nghe nói về định dạng tệp PNG và JPEG. Rốt cuộc, chúng là các tiêu chuẩn hình ảnh thực tế trên web. Nhưng không lâu. Công nghệ mới nhất và lớn nhất trong phân phối hình ảnh kỹ thuật số xoay quanh WebP và định dạng tệp SVG. Ví dụ, SVG, có thể tự động tỷ lệ kích thước màn hình, giảm số lượng tài nguyên cần thiết để tải các thành phần trực quan cụ thể.

Tối ưu hóa trải nghiệm người dùng cho thiết bị di động trước tiên là một điều quan tâm. Thiết kế theo xung có nghĩa là bạn không nên xem xét các tác động lâu dài của các quyết định của mình. Trong khi đó, một cách tiếp cận chánh niệm giúp bạn xây dựng ý tưởng từ người dùng di động.

Sâu sắc: Theo đúng khái niệm thiết kế di động trực quan, bạn không thể sử dụng lại các thành phần trực quan tương tự trên các thiết kế di động của mình. Loại bỏ một vài hình ảnh nền và thay thế chúng bằng nền màu – trên thiết bị di động – sẽ không gây hại cho trải nghiệm người dùng. Luôn tìm cách tiết kiệm lượng băng thông nhỏ nhất.

# 3: Tải trước và tải nhanh

Có cần thiết phải tải tất cả các tài nguyên phương tiện trên các trang cần một lượng thời gian đáng kể để đọc không? Và, nó có thể giúp hiển thị các trang bên ngoài trước người dùng truy cập chúng không?

Trước tiên, hãy nhìn vào các trình tải trước, còn được gọi là gợi ý trình duyệt.

Trình tải trước là cách để một trang nói với trình duyệt về các cơ hội điều hướng tiềm năng. Ví dụ. Một người dùng có thể truy cập Trang B từ Trang A.

Với tải trước, người dùng có thể kết xuất Trang B trước khi nhấp vào liên kết điều hướng trên Trang A.

tải trước chỉ thị

Hãy nhớ rằng việc tải trước không phải lúc nào cũng hoạt động, và nó lên tới trình duyệt để đưa ra quyết định cuối cùng. Các yếu tố như loại thiết bị và băng thông được cân nhắc riêng.

Các loại trình tải trước phổ biến nhất là gì?

  • Tải trước. Loại này cho thấy rằng một URL cụ thể rất có thể là lựa chọn điều hướng tiếp theo. Và, nếu trình duyệt cấp yêu cầu, thì nó sẽ tự động lưu trữ các tài nguyên trang quan trọng, từ đó làm cho trang tiếp theo tải nhanh hơn nhiều.
  • Tiên tri. Trong khi loại trên chỉ tìm nạp một số tài nguyên nhất định, prerender sẽ lưu trữ toàn bộ trang. Tất cả nội dung được hiển thị được lưu trữ bên trong bộ nhớ người dùng.
  • Tìm nạp trước DNS. Tìm nạp trước DNS sẽ giải quyết DNS được chỉ định và không có gì khác. Kết quả là, nếu người dùng thực hiện một lượt Turn cụ thể trên trang web của bạn, thì về cơ bản, bạn sẽ loại bỏ thời gian cần thiết để điều hướng.
  • Kết nối trước. Tương tự như trên, nhưng cũng thiết lập các kết nối và bắt tay, với các kết nối TCP và TLS.

Một số ví dụ mã cho trình tải trước là gì?

Vì trình tải trước sử dụng thẻ HTML động, bạn có thể tải trước nội dung như Google Fonts hoặc tạo tập lệnh tùy chỉnh để tải trước tài sản JavaScript trong WordPress.

BTW, nếu bạn đang sử dụng WordPress thì Tên lửa WP có thể giúp bạn với điều đó để siêu tải trang web của bạn.

Bây giờ bạn đã biết nhiều hơn về trình tải trước, hãy để cuốn sách nói về chủ đề nóng khác: lười tải.

Lười tải là gì?

Bất cứ khi nào bạn truy cập một trang web mới, cho dù là một bài đăng trên blog hoặc một trang tĩnh – trình duyệt sẽ tải toàn bộ nội dung trang và sau đó phục vụ nội dung đó như một trải nghiệm duyệt web gốc. Trong hầu hết các trường hợp, bạn buộc phải tải xuống toàn bộ trang mà không thực sự nhìn xa hơn trên màn hình đầu tiên.

Trong khi lười tải, trình duyệt được yêu cầu tải (kết xuất) nội dung mà chỉ có trong chế độ xem của người dùng. Vì vậy, nếu có những ảnh hoặc video nhạy cảm về kích thước được thêm vào một trang nhất định, những tệp đó sẽ chỉ hiển thị bất cứ khi nào màn hình trình duyệt của bạn đến phần đó của trang web.

Và nếu bạn lo lắng về các vấn đề SEO tiềm năng, thì hãy ủng hộ. Yoast đã xác nhận rằng Google không kết xuất các trang sử dụng tải lười biếng, và xem nó chỉ là một tín hiệu cải thiện hiệu suất.

Layzr js

Đề nghị của tôi cho một thư viện để sử dụng là Layzr.js – tải đơn giản và hiệu quả cho việc tải hình ảnh của bạn! Kịch bản cũng được kích hoạt trên trang chủ của dự án, vì vậy bạn có thể thấy nó thực hiện trong thời gian thực. Người dùng WordPress có thể tìm thấy hàng tá plugin tải lười biếng trong repo plugin công khai.

# 4: Bộ nhớ đệm web

Bộ nhớ đệm web dựa trên khái niệm sao chép phiên bản của trang, sau đó có thể được trình bày cho người dùng bất cứ lúc nào. Các trang được lưu trong bộ nhớ cache khi truy cập lần đầu vào trang web. Khi một người dùng mới sau đó cố gắng truy cập trang đó, thay vì phục vụ phiên bản trực tiếp, máy chủ web sẽ hiển thị phiên bản được lưu trong bộ nhớ cache.

Mục tiêu của bất kỳ loại bộ nhớ đệm nào là cải thiện hiệu suất trang web và giảm các tài nguyên phụ trợ cần thiết. Tùy thuộc vào giải pháp bộ đệm của bạn, bạn có thể định cấu hình các khoảng tùy chỉnh và các sự kiện dựa trên kích hoạt khác.

bộ nhớ đệm web

Một số tên phổ biến nhất trong bộ nhớ đệm web là Varnish, Squid và Memcached. Nhưng hãy yên tâm rằng có rất nhiều giải pháp khác trên thị trường, đặc biệt là nếu bạn là người dùng WordPress.

Bạn cũng có thể xem xét đăng ký CDN.

Điều gì một CDN (Mạng phân phối nội dung)?

Mạng phân phối nội dung sử dụng cụm máy chủ phân tán toàn cầu để cung cấp phân phối nội dung cực kỳ nhanh. Một CDN có thể nhanh chóng chuyển tất cả các loại nội dung phổ biến trên web: video, ảnh, JavaScript, v.v. Ngày nay, hầu hết các lưu lượng truy cập web đều chuyển qua một số dạng CDN.

Một điều cần nhớ về mạng phân phối nội dung là chúng hoạt động tốt nhất khi được sử dụng trên một trang web có nhu cầu cao. Vì vậy, nếu bạn chỉ phục vụ vài nghìn khách truy cập mỗi tháng, việc nhìn thấy những cải tiến đáng chú ý có thể tỏ ra khó khăn. Tuy nhiên, CDN là một giải pháp tuyệt vời để cải thiện thời gian tải trang web của bạn, giảm chi phí băng thông, tăng tính khả dụng của nội dung và tăng cường bảo mật tổng thể.

Nếu bạn không có kinh nghiệm trước với CDN, chúng tôi khuyên bạn nên dùng thử Đám mây – họ cung cấp một kế hoạch miễn phí mãi mãi và đó là một nền tảng tuyệt vời để bắt đầu học hỏi. Và nếu Cloudflare không thực hiện theo mong đợi của bạn, hãy xem bài đăng của chúng tôi để biết các nhà cung cấp CDN miễn phí tốt nhất trên thị trường.

# 5: AMP (Trang di động được tăng tốc)

Google Google Dự án AMP là tối ưu hóa điện thoại di động trên steroid! Về cơ bản, AMP loại bỏ các trang của bạn xuống mức cần thiết để cung cấp trải nghiệm tải cực nhanh, nhưng cũng để ưu tiên nội dung dễ đọc. Cho biết tốc độ trang quan trọng như thế nào, bạn có thể tập trung can đảm để nói không với thời gian tải gần như tức thời?

Google AMP (Trang di động được tăng tốc)

Được rồi, tất cả những từ thông dụng này nghe có vẻ hay, nhưng AMP thực sự hoạt động như thế nào?

AMP là một trang HTML đơn giản với những hạn chế nhất định về loại nội dung nào có thể được hiển thị. Điều này dẫn đến thời gian tải nhanh hơn nhiều và hiệu suất tổng thể do giới hạn thực thi các tập lệnh và như vậy.

JavaScript, ví dụ, không hoạt động với AMP. Trừ khi, tất nhiên, bạn sử dụng Thư viện AMP JS có sẵn trên GitHub. Sử dụng thư viện JS sẽ cho phép bạn đạt được một số kết quả nhất định, như tránh các trình chặn quảng cáo, nhưng nếu bạn muốn hiệu suất thực sự, thì AMP thô là cách để đi.

AMP bằng ví dụ

Nếu bạn là người dùng WordPress, thì trong hầu hết các trường hợp, việc thêm AMP vào blog của bạn sẽ được thực hiện với sự trợ giúp của plugin. Nhưng, nếu bạn làm việc với một trang web được xây dựng tùy chỉnh, việc thêm AMP lần đầu tiên có thể cảm thấy một chút thách thức.

Tìm hiểu AMP bằng ví dụ

Đây là đâu AMP bằng ví dụ có ích Một dự án phụ cho nền tảng thực tế, trang web này chi tiết mọi ngóc ngách có thể đạt được với AMP. Mỗi thành phần và hiệu ứng đi kèm với một bản demo được cung cấp để bạn có thể thấy nó trông như thế nào.

Nghiên cứu trường hợp thú vị cho AMP:

  1. Terra thúc đẩy lượng người xem di động lên với AMP
  2. Times of India báo cáo lợi nhuận doanh thu cao gấp 1,5 lần
  3. Fastc Commerce thúc đẩy chuyển đổi cho khách hàng bằng cách xây dựng AMP-first

# 6: Kiểm tra trước khi cam kết

Trong thời đại ngày nay, không có lý do gì để không có một môi trường dàn dựng riêng cho dự án của bạn. Hầu hết các nền tảng lưu trữ đám mây đều cung cấp các môi trường theo mặc định, vì vậy hãy kiểm tra với nhà cung cấp của bạn để xem bạn có quyền truy cập vào một.

kiểm tra trước khi cam kết

Những gì một môi trường dàn dựng?

Chà, cách nhanh nhất để giải thích điều này là bằng cách xem trang web trực tiếp hiện tại của bạn.

Trang web này là những gì bạn gọi là trang sản xuất – phiên bản thời gian thực của tất cả mã, tập lệnh và nội dung mà trang web của bạn dựa trên. Một môi trường dàn dựng trong bối cảnh này là một bản sao của trang web sản xuất của bạn. Một trang web giả nếu bạn sẽ. Và trong môi trường dàn dựng này, bạn có thể thay đổi hoặc thêm các tính năng mới mà không phá vỡ trang web trực tiếp của bạn.

Tôi luôn nghĩ về bài đăng của Ashley Harppiên, Lãng phí thời gian lãng phí – Thử nghiệm thay đổi trước khi cam kết.

Cô ấy nhận lấy cách chúng tôi tự lừa mình để tránh những điều nhất định là một ví dụ điển hình về cách chúng tôi không muốn chịu trách nhiệm khi chúng tôi phạm sai lầm. Tuy nhiên, bài đăng Ashley Ashley cũng bao gồm các liên kết đến các công cụ hữu ích để thiết lập môi trường dàn dựng cục bộ.

Kiểm tra không đáng sợ như nó có vẻ. Nhưng nó chắc chắn là đáng sợ khi bạn vô tình xóa toàn bộ cơ sở dữ liệu của bạn trên một máy chủ sản xuất!

Tuyên bố đóng cửa

Tối ưu hóa trang web của bạn để có trải nghiệm di động mượt mà không phải là khó khăn. Tất cả bạn cần là một chút quyết tâm và sẵn sàng áp dụng các phương pháp được phác thảo trong bài viết này. Rất có thể, bạn đã quen thuộc với những thứ như bộ nhớ đệm nội dung và tải lười biếng, nhưng về môi trường dàn dựng hoặc trình tải trước?

Hy vọng rằng, bài đăng này đã làm sáng tỏ tình trạng tối ưu hóa trang web di động hiện nay. Hãy để lại nhận xét hoặc đề xuất các giải pháp bổ sung.

THẺ

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map