Tối ưu hóa di động. Sử dụng các nút xã hội. Một số thông tin cơ bản

Trong bài viết này chúng ta sẽ xem xét:

Khả năng thích ứng của trang web ảnh hưởng đến thứ hạng trong PS như thế nào?

Vị trí của Google

Vào tháng 11 năm 2016, thông tin về việc ra mắt chỉ mục Mobile-first đã xuất hiện trên blog chính thức. Bản dịch một đoạn của tuyên bố trên blog chính thức của Google:

“Để làm cho kết quả của chúng tôi hữu ích hơn, chúng tôi đã bắt đầu thử nghiệm lấy chỉ mục di động làm chỉ mục chính. Mặc dù chỉ mục tìm kiếm của chúng tôi vẫn là một chỉ mục duy nhất của các trang web và ứng dụng, thuật toán của chúng tôi sẽ chủ yếu sử dụng phiên bản di động của nội dung trang web để xếp hạng các trang từ trang web đó, hiểu dữ liệu có cấu trúc và hiển thị đoạn trích của các trang đó trong kết quả của chúng tôi. "

Nói ngắn gọn– Trước đây khi xếp hạng một website, Google PS sử dụng phiên bản dành cho máy tính để bàn, giờ đây nó sẽ dựa chủ yếu vào nội dung của phiên bản di động. VỀ ngày chính xácĐại diện Google không thông báo về việc ra mắt, được biết, chỉ mục Mobile-first hiện đang được thử nghiệm trên một mẫu giới hạn. Tuy nhiên, bây giờ chúng tôi khuyên bạn nên kiểm tra tính sẵn sàng của trang web để ra mắt.

Cách chuẩn bị một trang web cho chỉ mục di động

Nếu trang web của bạn sử dụng thiết kế đáp ứng hoặc nội dung động, hãy đảm bảo trang web hiển thị chính xác trên tất cả các thiết bị, trang tải nhanh và hình ảnh cũng như các yếu tố động khác được tối ưu hóa cho thiêt bị di động.

Nếu có một trang web di động riêng biệt trên tên miền phụ, hãy đảm bảo rằng toàn bộ nội dung quan trọng và siêu dữ liệu được hiển thị giống nhau trong phiên bản máy tính để bàn và thiết bị di động. Điều quan trọng nữa là đảm bảo rằng cả hai phiên bản của trang web đều sử dụng cùng một đánh dấu ngữ nghĩa. Đọc thêm về cách chuẩn bị trang web của bạn cho chỉ mục Ưu tiên thiết bị di động trên Blog của Trung tâm quản trị trang web của Google.

Vị trí Yandex

Ở Yandex, việc thích ứng cho thiết bị di động bắt đầu được tính đến vào tháng 2 năm 2016 như một yếu tố xếp hạng trong kết quả tìm kiếm trên thiết bị di động.

Yandex xác định xem một trang có được tối ưu hóa cho thiết bị di động hay không?

Nếu những điều kiện này được đáp ứng, trang được coi là phù hợp với thiết bị di động:

1. Không cuộn ngang. Cuộn ngang là triệu chứng đầu tiên của việc trang web thích ứng kém với thiết bị di động. Tất cả nội dung trang web (văn bản, hình ảnh, nút, menu, v.v.) phải thích ứng với kích thước màn hình.

2. Không có yếu tố nào không hoạt động trên nền tảng di động phổ biến. Ví dụ: các phần tử như vậy bao gồm các video flash mà trình duyệt di động không thể phát. Những video như vậy đã bị loại khỏi kết quả tìm kiếm trên thiết bị di động của Yandex.Video vì người dùng vẫn không thể xem chúng.

Cách tối ưu hóa trang web cho thiết bị di động

Phiên bản di động của trang web trên tên miền phụ

Phiên bản di động riêng biệt của trang web được triển khai hoàn toàn trên một URL khác và có thể được tối ưu hóa đáng kể cho thiết bị di động và điều hướng trên chúng.

Thuận lợi: bạn có thể đơn giản hóa đáng kể việc thiết kế trang web dành cho thiết bị di động, điều này sẽ có tác động tích cực đến tốc độ tải trang di động.

sai sót: nhược điểm chính là cần phải phát triển một phiên bản độc lập khác của tài nguyên Internet, đòi hỏi thêm thời gian và tiền bạc.

Thay thế nội dung động

Với phương pháp thích ứng này, máy chủ sẽ phân tích loại thiết bị mà yêu cầu được gửi đến và hiển thị cho người dùng thiết bị di động và PC phiên bản khác nhau các trang có cùng một URL.

Thuận lợi: URL vẫn giữ nguyên

sai sót: sự phát triển phức tạp và chi phí hỗ trợ cao. Lỗi khi xác định loại thiết bị: máy chủ có thể không nhận dạng điện thoại thông minh của người dùng là thiết bị di động và sẽ mở phiên bản máy tính để bàn.

Thiết kế thích ứng

Một trang web sẽ được hiển thị chính xác trên tất cả các thiết bị. Một số thành phần sẽ không xuất hiện trên thiết bị di động (và ngược lại) hoặc sẽ xuất hiện ở dạng nhỏ gọn hơn.

Thuận lợi: URL vẫn giữ nguyên, tương đối dễ phát triển.

sai sót: tốc độ chậm tải xuống và do đó nên đơn giản hóa chức năng để không làm thiết bị di động bị quá tải.

Chúng tôi đã thảo luận thêm về các cách thích ứng với thiết bị di động trong bài viết “”.

Vào tháng 2 năm 2018, Google PS đã ra mắt Hình thức mới trang Câu chuyện AMP dành cho thiết bị di động được tăng tốc. Với sự trợ giúp của nó, quản trị viên web sẽ có thể tạo các ấn phẩm bao gồm một số màn hình có hình ảnh và video.

Tương tự của Yandex - Trang Turbo. Không giống như AMP yêu cầu bạn phải làm việc với trang web để tạo, các trang Turbo được xây dựng thủ công bằng cách sử dụng trình tạo dựa trên mẫu. Tại đây, bạn có thể tải lên hình ảnh, tạo mẫu đơn đăng ký với các trường bắt buộc và để lại liên kết để truy cập trang web.

Hạn chế: không có quyền truy cập vào mã vì tất cả các trang đều nằm trên máy chủ hệ thống.

Mọi thông tin kết nối đều có sẵn trong bảng Y.Webmaster

Hình 7. Ảnh chụp màn hình dữ liệu của Y.Webmaster

Đảm bảo rằng văn bản và hình ảnh có thể đọc được mà không cần phóng to

Tất cả văn bản quan trọng trên trang web phải dễ đọc. Chúng tôi khuyên bạn nên xác định kích cỡ nhỏ nhất 16 pixel và đảm bảo rằng khoảng cách dòng thực hiện nhiệm vụ tách dòng này khỏi dòng khác. Sử dụng các thiết bị khác nhau để kiểm tra kiểu chữ và thực hiện thay đổi nếu cần thiết.

Tạo một nút lớn

Giúp bạn có thể thoải mái nhấn nút cả từ điện thoại thông minh và máy tính bảng. Kích thước nút phải phù hợp với ngón tay của con người.

Người dùng sẽ có thể dễ dàng gọi từ trang web

Đảm bảo rằng người dùng truy cập trang web của bạn trên điện thoại di động có tùy chọn gọi cho bạn bằng cách nhấp vào số điện thoại.

Không đăng điện thoại của bạn dưới dạng hình ảnh hoặc sai định dạng.

Hình ảnh sản phẩm phải được thu nhỏ

Người dùng có thể phóng to hình ảnh sản phẩm để xem chi tiết ở độ phóng đại cao.

Chọn chế độ xem chính xác

Chế độ xem cho trình duyệt biết kích thước chế độ xem mà chúng tôi muốn. Điều này rất hữu ích, bởi vì, theo quy luật, trình duyệt di động Họ đang cố gắng đưa toàn bộ trang web vào màn hình của một thiết bị di động. Nếu kích thước màn hình nhỏ, trang web trông nhỏ đến mức khó đọc được bất cứ thứ gì. Bằng cách kiểm tra tính chính xác của chế độ xem, bạn đảm bảo rằng khách truy cập sẽ thấy phiên bản đầy đủ của trang web, bất kể họ sử dụng thiết bị nào để xem.

Xóa cửa sổ bật lên

Cửa sổ bật lên lớn, biểu mẫu đăng ký, v.v. cản trở người dùng đang cố gắng lấy thông tin họ cần

Phần kết luận

Chia sẻ lưu lượng truy cập di động Liên tục phát triển. Nếu trang web của bạn không được tối ưu hóa cho thiết bị di động, bạn đã mất lưu lượng truy cập trên thiết bị di động và trong tương lai bạn có thể mất lưu lượng truy cập trên máy tính để bàn vì điều này.

Do đó, nếu trang web của bạn chưa thích ứng với thiết bị di động thì đã đến lúc sửa nó!

Vào tháng 4 năm 2015, bản cập nhật công cụ tìm kiếm đã được phát hành. Thuật toán của Google dưới cái tên không chính thức “Mobilegeddon” và vào tháng 2 năm 2016 Yandex đã công bố hoạt động của một thuật toán tương tự có tên “Vladivostok”. Bản chất của chúng giống nhau - ở tìm kiếm di độngưu tiên dành cho những trang web được điều chỉnh để xem trên thiết bị di động. Điều này có nghĩa là khả năng đáp ứng trên thiết bị di động không thể bị bỏ qua nữa.

Và nó không chỉ là về những yêu cầu công cụ tìm kiếm. Lưu lượng truy cập trên thiết bị di động toàn cầu đã bắt kịp lưu lượng truy cập trên máy tính để bàn vào đầu năm 2014. Và ngày nay, khoảng 67% lưu lượng truy cập trên RuNet đến từ thiết bị di động. Có tính đến nhu cầu của độc giả, chúng tôi đang nỗ lực huy động blog. Bạn sẽ sớm thấy tài nguyên cập nhật của chúng tôi, tài nguyên này sẽ rất thuận tiện để đọc trên nhiều thiết bị khác nhau.

1. Phân tích đối tượng mục tiêu của bạn

Trước khi bạn bắt đầu tối ưu hóa thiết bị di động, hãy phân tích đối tượng mục tiêu của bạn bằng cách các hướng dẫn sau(ví dụ: sử dụng báo cáo Metrica tiêu chuẩn):

  • nhân khẩu học (giới tính và độ tuổi);
  • địa lý (khu vực nào có nhiều chuyển đổi nhất);
  • thiết bị (thiết bị nào được khách truy cập ưa chuộng nhất - máy tính để bàn, điện thoại di động hoặc máy tính bảng);
  • hệ điều hành (Android, iOS, Windows Phone, Windows 7, v.v.);
  • hành vi trên trang web (độ sâu duyệt web, thời gian trên trang web, lỗi, v.v.).

Biết hồ sơ khán giả mục tiêu, bạn có thể điều chỉnh thiết kế và nội dung cho phù hợp với nhu cầu của khách truy cập.

2. Điều chỉnh mẫu để xem trên thiết bị di động

Về cơ bản có 3 phương pháp tiếp cận khác nhau thích ứng với thiết bị di động - tất cả chúng đều được mô tả trong tài liệu của Google dành cho nhà phát triển. Mỗi người trong số họ đều có những ưu điểm và nhược điểm riêng.

phiên bản điện thoại

Trong trường hợp này, sẽ có 2 trang web: máy tính để bàn và thiết bị di động. Phiên bản di động được lưu trữ trên một tên miền mới (chẳng hạn như m.site.ru).

Thuận lợi:

  • Thiết kế trang web hoàn toàn được thiết kế riêng cho thiết bị di động, không cần phải thỏa hiệp;
  • quản trị viên web có cơ hội tối ưu hóa nội dung phù hợp với đặc điểm xem trên thiết bị di động;
  • Các trang web có thể được sửa đổi độc lập với nhau;
  • dễ dàng đạt được hơn tốc độ cao lượt tải xuống.

sai sót:

  • nhu cầu quản trị đầy đủ trang web mới;
  • Do bảo trì riêng biệt nên chi phí sẽ tăng lên khi thực hiện thay đổi.

Phiên bản di động đang bật miền riêng biệt có một cửa hàng trial-sport.ru

Hiển thị động

Trong trường hợp này, thiết kế được điều chỉnh cho phù hợp với độ phân giải màn hình cụ thể. Các đường lưới và vị trí phần tử có kích thước cố định trên các thiết bị.

Thuận lợi:

  • dễ dàng phát triển;
  • không cần thực hiện các thay đổi riêng biệt đối với phiên bản di động;
  • Quản trị viên web dễ dàng kiểm soát cách thiết kế và nội dung sẽ hiển thị hơn các thiết bị khác nhau.

lỗ hổng- có thể xảy ra sự cố khi hiển thị trên các thiết bị có kích thước màn hình không khớp với kích thước màn hình do nhà phát triển chỉ định.


Trang web decathlon.ru sử dụng một URL với một bộ mã HTML khác

Thiết kế thích ứng

Trong trường hợp này, bố cục trang web được điều chỉnh chính xác theo bất kỳ kích thước hiển thị nào.

Thuận lợi:

  • hiển thị chính xác trên tất cả các thiết bị;
  • không cần thực hiện các thay đổi riêng biệt đối với phiên bản di động.

sai sót:

  • sự phức tạp của sự phát triển, đặc biệt là đối với các dự án hiện có;
  • Có thể có vấn đề khi điều chỉnh các khối trên các trang web có thiết kế phức tạp.


Trang web Vostok-Service sử dụng thiết kế đáp ứng thích ứng với mọi màn hình thiết bị

Bên cạnh đó các phương pháp trên thích ứng, bạn có thể sử dụng plugin để CMS phổ biến. Ví dụ: đối với WordPress có WPtouch và WP Mobile Edition. Đây là một giải pháp rẻ tiền, nhưng hoạt động chính xác của các trang web còn nhiều điều đáng mong đợi. Và nếu đây là một giải pháp cho blog, thì đối với các dự án phức tạp, giải pháp như vậy là không thể chấp nhận được.

3. Đơn giản hóa thiết kế của bạn

Thiết kế của phiên bản thích ứng của trang web phải đơn giản và ngắn gọn. Ngày nay cái gọi là “ thiết kế phẳng”, được đặc trưng bởi sự tối giản giúp đơn giản hóa việc sử dụng. Sự thể hiện đạt được thông qua việc chơi màu sắc, thay vì độ dốc, bóng, kết cấu và sự phức tạp. các hình thức tương tác và các phần tử.


Một ví dụ về sự tối giản trong thiết kế

Ngoài ra, khi phát triển trang web dành cho thiết bị di động, bạn nên quên đi trình phát Flash, tiện ích và cửa sổ bật lên. Hiệu ứng thị sai, được nhiều người yêu thích, cũng nên được bỏ qua vì nó không được sao chép trên tất cả các hệ điều hành di động và làm chậm quá trình hiển thị trang.

4. Làm việc để cải thiện khả năng sử dụng

Khi thiết kế điều hướng, trước tiên hãy nghĩ đến người dùng và trải nghiệm của họ. Bất kỳ trang nào cũng có thể truy cập được trong một vài bước - không cần các bộ lọc và danh sách phức tạp. Để thực hiện cuộc gọi chỉ bằng một cú nhấp chuột, hãy nhập chính xác định dạng số với mã quốc gia và mã thành phố +7 495.... Cung cấp ủy quyền bằng một cú nhấp chuột qua mạng xã hội. Nói một cách dễ hiểu, hãy cố gắng giảm thiểu mọi hành động của khách truy cập vào mục tiêu.

Thay vì con trỏ chuột trên điện thoại thông minh, ngón tay được sử dụng nên tất cả các phần tử phải có kích thước vừa đủ. Một người không cần phải phóng to hình ảnh để nhấp vào bất kỳ yếu tố nào. Tránh sử dụng phông chữ serif, đường cong hoặc in nghiêng. Kích thước tối ưu phông chữ - 16 pixel, chiều cao dòng - 1,2 em.

5. Tăng tốc độ tải trang

Một mặt, khả năng tăng tốc tải được cải thiện yếu tố hành vi và mặt khác, có tác động tích cực đến xếp hạng. Sử dụng dịch vụ khác nhau nén:

  • HTML và tập lệnh (máy nén HTML hoặc Gzip);
  • Mã CSS (trình rút gọn CSS hoặc trình nén CSS);
  • Mã JS (Javascriptcompressor, jscompress, v.v.);
  • hình ảnh (Optimizilla, Resizepiconline, EWWW Image Optimizer, v.v.);
  • sử dụng bộ đệm của trình duyệt.

Kiểm tra tốc độ tải trang và xem vấn đề có thể xảy ra có thể sử dụng dịch vụ Thông tin chi tiết về tốc độ trang thông qua liên kết này.

6. Sử dụng các nút mạng xã hội

Người dùng di động tích cực đăng lại nội dung. Đừng tước đi cơ hội này của họ. Bằng cách này bạn sẽ đảm bảo cho mình lưu lượng truy cập bổ sung và cải thiện tín hiệu xã hội. Thêm các nút liên kết vào các mạng xã hội phổ biến nhất, nhưng không quá 4-5 ở phần hiển thị của màn hình, nếu không các nút sẽ quá nhỏ hoặc chiếm nhiều không gian.

7. Tối ưu hóa nội dung của bạn

Nội dung cần được tạo ra không chỉ để dễ xem trên màn hình nhỏ mà còn để phục vụ hành vi người dùng di động.

Thực hiện theo các quy tắc sau:

  • tính tuyến tính của nội dung (điều quan trọng nhất là ở màn hình đầu tiên và sau đó theo thứ tự giảm dần);
  • sử dụng các tiêu đề ngắn (có thể đọc nhanh);
  • chia văn bản thành các đoạn ngắn nhưng có ý nghĩa (diện tích màn hình di động nhỏ hơn nhiều so với PC và nếu người dùng không bị cuốn hút ngay từ những dòng đầu tiên, họ sẽ nhanh chóng mất hứng thú; tránh nước vào văn bản và lý luận trống rỗng);
  • thêm các yếu tố điều hướng cho bài viết (nội dung và các nút neo, nút “lên”, “xuống”, “đọc”);
  • tạo cơ hội gửi bài viết qua email (không phải ai cũng có thời gian đọc đến cuối - chẳng hạn tính năng hữu ích sẽ cho bạn cơ hội đọc tài liệu mà bạn quan tâm sau này);
  • điều chỉnh bảng để xem trên thiết bị di động (chỉ sử dụng các plugin, tập lệnh hoặc phần tử cuộn ngang đặc biệt cho bảng).

8. Đừng hạn chế quyền truy cập vào nội dung

Một số nhà thiết kế, thay vì điều chỉnh tất cả nội dung cho thiết bị di động, lại ẩn đi một số nội dung đó. Điều này thường được thực hiện do tính phức tạp của mẫu, nhưng đây là cách tiếp cận sai. Cung cấp phiên bản "lite" là không công bằng cho người dùng di động. Bạn cần hướng tới việc đơn giản hóa và tối ưu hóa thiết kế thay vì cắt giảm nội dung.

9. Bắt kịp xu hướng

Theo dõi xu hướng hiện nay trong lĩnh vực thiết kế và khả năng sử dụng và thực hiện những thay đổi kịp thời để không bị “đứng sau đầu máy”. Ví dụ: ngày nay các xu hướng sau có liên quan:

  • thiết kế mô-đun (nội dung được nhóm thành các khối được sắp xếp trong một nguồn cấp dữ liệu hoặc nhiều nguồn cấp dữ liệu tùy thuộc vào kích thước màn hình);
  • thiết kế phẳng (bóng, vùng nửa tối, âm lượng - tất cả những điều này đã là quá khứ);
  • cách tiếp cận đầu tiên trên thiết bị di động (trước đây các trang web được tạo cho PC và sau đó, vì cần thiết, chúng được điều chỉnh cho phù hợp với thiết bị di động - ngày nay thì ngược lại).

10. Đừng quên phân tích trang web về khả năng sử dụng trên thiết bị di động

Định kỳ kiểm tra trang web của bạn xem có tuân thủ các yêu cầu của công cụ tìm kiếm về khả năng thích ứng với thiết bị di động hay không. Bạn có thể thực hiện việc này trên Google bằng liên kết này. Chỉ cần nhập địa chỉ trang và chờ kết quả xác minh. Bất kỳ lỗi nào được tìm thấy phải được sửa chữa càng sớm càng tốt.

Để kiểm tra tính phù hợp với thiết bị di động trong Yandex, hãy thêm trang web vào Yandex.Webmaster, sau đó đi tới phần “Công cụ” / “Kiểm tra trang dành cho thiết bị di động” và nhập địa chỉ trang web. Nếu có lỗi, chúng tôi cũng sửa chúng.

Nếu bạn không có thời gian để tự mình xử lý việc kiểm tra và lỗi trên màn hình di động của trang web, bạn có thể đặt hàng dịch vụ kiểm tra và nhận đề xuất từ ​​dịch vụ "Quản lý cá nhân".

Vì vậy, khả năng đáp ứng trên thiết bị di động không chỉ là yếu tố xếp hạng mà còn là cách để tăng lưu lượng truy cập và cải thiện hành vi của người dùng trên trang web. Nếu bạn tập trung vào việc làm cho trải nghiệm người dùng dễ dàng hơn trên trang web của mình, bạn sẽ tăng khả năng cạnh tranh và chuyển đổi.

Xin chào các độc giả thân mến của trang blog. Đây không phải là lần đầu tiên trong các bài viết tôi đề cập đến điều đó Lưu lượng truy cập di động trong RuNet tăng đáng kể. Và điều này đang bắt đầu có tác động khá lớn đến cuộc sống của các quản trị viên web và người làm SEO.

Thứ nhất, nhiều chủ sở hữu trang web bắt đầu nghĩ về cách kiếm tiền từ lưu lượng truy cập trên thiết bị di động đang trở nên dồi dào (thậm chí một con quái vật như nó đã cung cấp các tùy chọn riêng để kiếm tiền từ khách truy cập truy cập trang web của bạn từ thiết bị di động).

Nhưng điều quan trọng nhất là chúng ta đang làm “thứ hai”. Thực tế là một trang web không được điều chỉnh để nhận cùng lưu lượng truy cập trên thiết bị di động này có thể mất vị trí nghiêm trọng trong kết quả tìm kiếm do các đặc điểm hành vi xấu đi. TRÊN điện thoại di động rất bất tiện khi sử dụng cuộn ngang khi đọc văn bản hoặc tìm kiếm menu, vì vậy họ nhanh chóng rời khỏi các tài nguyên đó và theo quy luật, không chuyển sang các trang khác.

Đương nhiên, tôi đã biết tất cả những điều này từ khá lâu, nhưng luôn có một điều gì đó quan trọng và tối quan trọng hơn, và khái niệm hoàn chỉnh về việc điều chỉnh trang web để xem trên thiết bị di động chưa bao giờ hình thành trong đầu tôi. Tuy nhiên, sáng hôm qua Google đã thúc ép tôi rất nhiều, gửi cho tôi một tin nhắn rằng từ ngày 21 tháng 4 khi xác định xếp hạng tìm kiếm trang web, Google sẽ tính đến việc xem các trang web trên thiết bị di động có thuận tiện hay không.

Như họ nói, họ đã đến. Tôi đã phải suy nghĩ và trong nửa ngày để phát triển và đưa khái niệm huy động địa điểm vào cuộc sống. Tất nhiên, sự hiểu biết vội vàng và không đầy đủ về tất cả các phương án để giải quyết vấn đề này đã ảnh hưởng đến tính tao nhã của giải pháp cho vấn đề, nhưng “những gì đã phát triển thì đã phát triển” và bạn sẽ có thể hoàn thành nó trong suốt chặng đường. nhiệm vụ chinh hoàn thành - . Và làm thế nào điều này được thực hiện, hãy đọc phần tiếp theo của ấn phẩm này.

Sự liên quan của việc tối ưu hóa trang web dành cho thiết bị di động và những thách thức phía trước

Vì vậy, đầu tiên tôi sẽ mô tả tình hình hiện tại và sau đó là các phương án giải quyết mà tôi đã chọn. Như đã đề cập ở trên, tôi đã bắt đầu nghĩ đến việc tối ưu hóa trang web cho thiết bị di động từ lâu, nhưng đôi khi để tiến thêm một bước, bạn cần có người hỗ trợ bạn. Cú đá này hóa ra là một lá thư từ Google Adsense nói rằng đã đến lúc phải giải quyết vấn đề này.

Trên thực tế, những lá thư tương tự từ người nhận này được gửi đến thường xuyên (họ thường đưa ra ví dụ về mức độ tốt của những trang web được tối ưu hóa cho lưu lượng truy cập trên thiết bị di động), nhưng ở đây chỉ có tối hậu thư:

Theo ý kiến ​​của tôi, 17% lưu lượng truy cập trên thiết bị di động là khá tốt, nhưng thành thật mà nói, chưa đề cập đến sự thay đổi có thể xảy ra trong thuật toán xếp hạng của Google và tính đến yếu tố tối ưu hóa trang web cho thiết bị di động, tôi khó có thể di chuyển (luôn có một hoạt động quan trọng hơn, đặc biệt là khi bạn không có kế hoạch cụ thể để giải quyết vấn đề trong đầu).

Nhân tiện, 17 phần trăm khách truy cập trang web từ thiết bị di động và có thể thấy rằng tỷ lệ thất bại của những người dùng như vậy cao hơn nhiều so với những người truy cập trang web từ máy tính hoặc máy tính xách tay (tức là vấn đề là hiển nhiên) :

Liên kết được cung cấp trong thư dẫn đến dịch vụ của Google, nơi bạn có thể đánh giá chất lượng tối ưu hóa thiết bị di động của trang web của mình theo nguyên tắc: mọi thứ đều ổn hoặc hoàn toàn kinh dị. Tất nhiên, ban đầu, trang web này có một phán quyết màu đỏ đáng buồn (báo động):

Trong ảnh chụp màn hình, tôi sử dụng blog của Devaki đáng kính để minh họa, vì bây giờ tôi có một bức ảnh hơi khác. Trong trường hợp của tôi, đối với tôi, có vẻ như thậm chí có ba lý do cản trở việc xem trang web trên điện thoại di động, nhưng trên thực tế, dịch vụ này chỉ đưa ra phán quyết.

Nhưng để tìm hiểu chi tiết, tôi khuyên bạn nên sử dụng một dịch vụ khác của cùng tên Google. Ở đây mọi thứ sẽ ít nhiều chi tiết và ít nhất sẽ rõ ràng “đào theo hướng nào”:

Họ còn có một cái nữa dịch vụ tương tự, nhưng nó chỉ được đưa ra đánh giá, nhưng rất tiếc là không có khuyến nghị cải tiến nào. Nhưng bạn có thể đăng ký thay đổi:

Trong trường hợp của chúng tôi, bạn nên chú ý đến xếp hạng “Sự dễ dàng của người dùng” trên tab “Dành cho thiết bị di động”. Rõ ràng là tốc độ tải cũng rất quan trọng, nhưng đối với cá nhân tôi, tất cả đều phụ thuộc vào cài đặt máy chủ, điều mà bản thân tôi không thể thay đổi (vì tôi là người mới trong quản trị máy chủ) và tôi vẫn không thể làm được. đạt được thỏa thuận với bộ phận hỗ trợ kỹ thuật của Infobox (một lần nữa, rõ ràng là tôi cần một cú đá vào mông để bắt đầu di chuyển). Nhưng đây có lẽ là chủ đề cho một bài viết riêng.

Nhiệm vụ mà tôi phải đối mặt đã được giải quyết vào tối hôm qua và trang web đã nhận được 95 và 100 điểm có thể để thuận tiện cho người dùng di động. Theo đó, dịch vụ Google, liên kết đến được đưa ra trong thư, cho biết rằng mọi thứ hiện tại đều ổn (nhờ bộ sạc):

Anh ấy khoe, bây giờ bạn có thể bắt đầu mô tả các bước đã thực hiện và các chiến lược đã lên kế hoạch. Vì vậy đã có một số vấn đề cần giải quyết:


Các số tính bằng pixel biểu thị điểm ngắt. Nếu bạn bắt đầu giảm chiều rộng của cửa sổ này (với trang https://site đang mở trong đó) (ở góc trên bên phải của trình duyệt có một nút có hai hình vuông chồng lên nhau - “Captain Obvious” cho biết), thì đó là khi bạn vượt qua chiều rộng 1025px và 760px sẽ có những thay đổi về thiết kế.

Đầu tiên, thanh bên sẽ rơi ra (nó sẽ rơi xuống tận cùng) và menu trên cùng sẽ thay đổi một chút (tôi muốn biến nó thành trình đơn thả xuống cho điện thoại di động trong tương lai, nhưng tôi chưa làm được điều đó) Tuy nhiên, như thường lệ).

Và ở điểm đột phá thứ hai, bạn sẽ nhận thấy rằng khi bạn tiếp tục giảm độ rộng của vùng xem, văn bản, hình ảnh và video bắt đầu thích ứng với kích thước mới(thích ứng với nó) và thanh bên nằm bên dưới cũng sẽ có những thay đổi. Trên thực tế, tôi thậm chí còn phóng to phông chữ cho màn hình có chiều rộng nhỏ hơn 760px (để đề phòng).

  • Tuy nhiên, theo tôi, phương án đầu tiên có một nhược điểm đáng kể. Khi tải trang, cả ba phiên bản của tệp kiểu đều được tải (và không chỉ phiên bản sẽ được sử dụng cho chiều rộng khung nhìn nhất định). Vì tất cả chúng đều có trọng lượng gần như nhau, vì chúng chứa gần như cùng số lượng thuộc tính CSS, nên đây là .

    Vì vậy tôi quyết định sử dụng tùy chọn thứ hai để tạo thiết kế thích ứngđể trang web tối ưu hóa nó cho thiết bị di động. Nó bao gồm trong . Trong trường hợp này, bạn sẽ không cần tạo ba bản sao của tệp kiểu, nhưng chỉ cần thêm nội dung như thế này vào cuối tệp chính là đủ:

    Màn hình @media và (độ rộng tối đa: 1025px) ( Thuộc tính CSS, sẽ thay đổi thiết kế khi chiều rộng màn hình nhỏ hơn 1025px ) @media screen và (max-width: 760px) ( Thuộc tính CSS sẽ thay đổi thiết kế khi chiều rộng màn hình nhỏ hơn 760px )

    Chà, trong những khu vực bị giới hạn bởi dấu ngoặc nhọn, chỉ cần viết các thuộc tính CSS sẽ trải qua các thay đổi để điều chỉnh mẫu trang web của bạn cho phù hợp với thiết bị di động là đủ.

    Đúng, tôi vẫn chưa hiểu đầy đủ các sắc thái của việc kết nối các lệnh này trong trình duyệt, vì đơn giản là chúng không hoạt động. tôi phải thêm vào tập tin header.phpĐây là các dòng (kết nối cùng một tệp kiểu, nhưng ở các độ phân giải màn hình khác nhau):

    Đây chính xác là cách tất cả hoạt động trên blog này. khoảnh khắc này thời gian.

  • Nói chung, tôi đã chọn tùy chọn thứ hai, nhưng không phải ngay lập tức, vì vậy tôi phải so sánh nội dung của các tệp Small-device-min.css và Small-device.css với style.css ban đầu để xác định các dòng trong đó Tôi đã thực hiện những thay đổi. Sau đó, tôi chèn những dòng này vào bên trong dấu ngoặc nhọn của lệnh @media được hiển thị ở trên (ở cuối tệp style.css chính). Nhưng điều này không còn quan trọng nữa.

    Chúng tôi điều chỉnh mẫu để thuận tiện cho người dùng di động

    Vì vậy, bạn đã tải xuống trang web của mình từ Internet, đẩy nó vào máy chủ cục bộ và làm quen với các nguyên tắc mà chúng tôi sẽ sử dụng. Bây giờ là lúc để bắt đầu thử nghiệm. Vì những lý do rõ ràng, tôi không thể đưa ra lời khuyên rõ ràng cho bạn (vì tất cả các mẫu đều khác nhau, ngay cả đối với cùng một công cụ), chính xác những gì cần thay đổi trong trường hợp của bạn và những điểm đột phá nào cần chọn.

    Để đơn giản, bạn thường chỉ có thể chọn một điểm của từ, chẳng hạn như bằng chiều rộng tiêu chuẩn của phần chính (phần trung tâm, nơi hiển thị các bài viết) và không thay đổi bất cứ điều gì trước đó. Nhưng lựa chọn của tôi có vẻ thích hợp hơn với tôi, mặc dù tôi không có nhiều thời gian để suy nghĩ về nó.

    Người dùng sẽ thấy gì với màn hình nhỏ hơn điểm đột phá đầu tiên?

    Nhìn. Để thực hiện thiết kế nhiều cột V. bố cục hiện đạiđược sử dụng . Ví dụ: thanh bên của tôi nổi ở bên phải khu vực chính nhờ:

    #sidebar(float:right;)

    Vì vậy, để ngắt bố cục hai cột và biến nó thành bố cục một cột, tôi cần thay thế giá trị cho quy tắc float vào đúng vị trí. Tôi thực sự tìm hiểu mọi thứ, bởi vì tôi đã quên cấu trúc mẫu của mình một chút và do đó có thể đã nắm bắt được điều gì đó không cần thiết, nhưng đây là đặc thù của việc “lắp ráp một thiết kế trên đầu gối của bạn” mà không có kinh nghiệm thích hợp. Nhưng kể từ khi thí nghiệm tiếp tục Máy chủ cục bộ, sau một tiếng rưỡi, tôi đã tìm thấy tất cả các điểm cần thiết (bằng cách thử và sai), kết quả mà bây giờ bạn có thể quan sát được.

    Theo đó, trước tiên, cần huấn luyện mẫu để bố cục thành hai cột, yêu cầu viết bên trong lệnh @media (với điểm ngắt thứ nhất và thứ hai):

    #sidebar(float:none;) #sidebar(float:none !important;)

    Vẫn một vấn đề với thực đơn trên cùng , không dễ vỡ và chiếm nhiều không gian trên màn hình nhỏ, nhưng có kế hoạch biến nó thành một trình đơn thả xuống cho phiên bản di động của trang web (nếu có, tôi sẽ viết về nó). Vâng, các quầy ở dưới cùng được xây dựng giống như một ngôi nhà (bây giờ tôi mới để ý), nhưng rất khó sửa (điều chính là không được quên).

    Vì vậy, hãy giả sử rằng bạn sẽ thực hiện một số phép thuật trên máy chủ cục bộ, thử nghiệm và kết quả là bạn sẽ có được tùy chọn dễ hiểu để điều chỉnh trang web của mình cho phù hợp với thiết bị di động của khách truy cập. Tất cả những gì còn lại là chuyển vấn đề này đến địa điểm làm việc. Đương nhiên, bạn sẽ không sao chép tất cả các tệp (chứ đừng nói đến cơ sở dữ liệu), vì chỉ cần thêm (sao chép) một vài dòng vào tệp header.php và chuyển thêm một vài dòng vào tệp kiểu chính là đủ (những dòng bên trong @media chỉ thị).

    Sau đó, bạn có thể kiểm tra các thay đổi đã thực hiện (bạn có thể cần đặt lại bộ đệm trong công cụ hoặc trong trình duyệt) trên màn hình máy tính khi giảm độ rộng của cửa sổ trình duyệt và trên màn hình của bạn. tiện ích di động(điện thoại, máy tính bảng). Nếu có điều gì đó “xuất hiện” thì có thể nhanh chóng khắc phục vấn đề này.

    Điều quan trọng là sau những thay đổi đã làm trang web của bạn đã vượt qua bài kiểm tra của Google để phù hợp khi xem trên thiết bị di động (đừng quên reset cache trước khi thực hiện việc này). Vâng, bạn sẽ hoàn thành các chi tiết theo thời gian.

    Sử dụng mã khối thích ứng từ Google AdSense trên trang web để thiết kế thích ứng (đáp ứng)

    Bây giờ hãy nói về Google Adsense. Nếu bạn không làm việc với hệ thống này quảng cáo theo ngữ cảnh, thì bạn không cần phải đọc thêm. Nếu bạn làm việc và sử dụng mã cho các khối quảng cáo có kích thước cố định trên trang web của mình, bạn sẽ phải thay đổi nó thành mã cho các khối thích ứng (theo tôi hiểu thì Google nhấn mạnh vào điều này) để các quảng cáo có kích thước phù hợp được tải trên các thiết bị có độ rộng màn hình khác nhau.

    Trên thực tế, điều này không khó thực hiện chút nào, nhưng cá nhân tôi đã gặp phải một trở ngại cần phải nỗ lực tinh thần để giải quyết nó. Vì vậy, với sự đều đặn đáng ghen tị (không phải nói là tệ hơn, khá hơn, nhưng lâu ngày không đăng nhập thì cúp máy một chút). Vì điều này, tôi đã phải viết lại bài viết được trích dẫn trong liên kết một vài lần, nhưng nó lại lỗi thời, có nghĩa là hóa thân thứ tư của nó sẽ sớm xuất hiện (tuy nhiên, điều này thật mệt mỏi).

    Được rồi, đó không phải là vấn đề. Để tạo một cái mới khối quảng cáo Bạn sẽ cần nhấp vào bánh răng bên phải trong giao diện Adsense góc trên cùng và chọn tùy chọn “Cài đặt”. Trên trang mở ra chúng tôi cần điểm cao nhất menu “Quảng cáo của tôi”, nơi tạo khối mới bạn chỉ cần nhấp vào nút cùng tên:

    Trên trang mở ra, khối thích ứng sẽ được cung cấp cho bạn theo mặc định. Tại đây, bạn nên chọn loại quảng cáo sẽ được hiển thị (trong hầu hết các trường hợp, hiển thị mọi thứ sẽ có lợi hơn), sau đó chỉ định cho khối này cùng một kênh khách hàng, mà bạn đã đặt cho khối cũ (mà bạn sẽ thay thế). Thực tế là một số nhà quảng cáo có thể nhắm mục tiêu quảng cáo của họ đến trang web của bạn một cách chính xác thông qua kênh khách hàng này và để không làm mất họ, bạn cần chọn cùng một kênh cho khối quảng cáo mới.

    Phương pháp này không hiệu quả với tôi (hóa ra nó là một thứ rác rưởi), vì vậy tôi đã thử vào phần trợ giúp của Google Adsense để tìm giải pháp và cuối cùng tìm thấy nó trên trang này.

    Đây chính xác là phiên bản mã tôi đã sử dụng (các khối sẽ được hiển thị trên các thiết bị khác nhau kích thước phù hợp). Có vẻ như mọi thứ bắt đầu xuất hiện như bình thường, nhưng không hoàn toàn như vậy. Đầu tiên, tôi nhận thấy rằng sau khi thay đổi mã, số liệu thống kê về số lần hiển thị đã ngừng thay đổi quảng cáo TRÊN trang chủ Quảng cáo. Khi xem số liệu thống kê cụ thể cho khối mới, tôi nhận thấy rằng thực tế không có lượt hiển thị nào.

    Thứ hai, tôi quyết định làm cho giao diện của quảng cáo (màu sắc, phông chữ) trong khối thích ứng mới giống như trong quảng cáo cũ. Sau khi thực hiện những thay đổi, lại càng có nhiều hiểu lầm hơn. Các quảng cáo hiển thị trong bài viết không thay đổi thiết kế. Tôi bắt đầu so sánh mã trang nguồn(trong trình duyệt, bạn có thể thực hiện việc này bằng cách chọn mục thích hợp từ trình đơn nút bên phải mouse) và phát hiện ra rằng bằng cách nào đó thẻ ngắt dòng BR đã được thêm vào sau một số dòng mã.

    Do đó, tôi đã xóa tất cả dấu cách và ngắt dòng ở những vùng có vấn đề, sau đó quảng cáo ngay lập tức thay đổi thiết kế và số liệu thống kê bắt đầu được tính. Đây là loại vấn đề có thể xảy ra.

    Trước đó, tôi đã có mã Adsense đồng bộ (tôi đã cài đặt lại vào năm 2012) và về lý thuyết, nó có thể làm giảm tốc độ tải trang web. Mã hiện đại hoàn toàn không đồng bộ, điều này loại bỏ hoàn toàn khả năng gây ra sự chậm trễ khi tải trang. Tôi nghĩ rằng đây là một tin đồn, nhưng như họ nói, chúng ta sẽ thấy.

    tái bútĐây là một báo cáo ngắn về những gì tôi đã hoàn thành sau khi viết bài.

    Ktonanovenkogo.ru="">

    Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog

    Bạn có thể xem thêm video bằng cách vào
    ");">

    Bạn có thể quan tâm

    Cách tạo mục lục (nội dung, menu) cho bài viết trên website

    Ngày nay, ngày càng có nhiều người thích lướt Internet bằng thiết bị di động và máy tính bảng. Do đó, ngày nay điều quan trọng hơn nhiều đối với các nhà thiết kế và nhà phát triển là phải suy nghĩ về cách trang web của họ sẽ được trình bày trên các thiết bị này.

    1. Thẻ meta viewport - chiều rộng trang trong trình duyệt trên thiết bị di động

    Thẻ meta chế độ xem meta là một thẻ HTML cần thiết để xác định độ rộng của khung nhìn và kiểm soát tỷ lệ trang. Sử dụng thẻ này, chúng tôi có thể đặt tỷ lệ trang trong quá trình tải lần đầu, chỉ định độ phóng đại tối đa được phép và cũng có thể tắt hoàn toàn độ phóng đại.

    Dưới đây tôi muốn đưa ra một ví dụ về cách thẻ meta viewport thường được thêm vào bên trong thẻ.

    @-viewport ( width: chiều rộng thiết bị; )

    Thẻ meta viewport là một thẻ thiết yếu (cùng với Truy vấn phương tiện) nếu bạn định phát triển một trang web phản hồi. Tuy nhiên, về mặt kỹ thuật, bạn có thể sử dụng thẻ trong các thiết kế không phản hồi.

    2. Truy vấn phương tiện

    Truy vấn phương tiện cho phép bạn thay đổi kiểu trang web của mình bằng cách sử dụng các điểm ngắt cụ thể. Suy cho cùng, không phải tất cả các thành phần của trang web truyền thống của bạn đều phù hợp với màn hình nhỏ của thiết bị di động.

    Sử dụng Truy vấn phương tiện, bạn có thể thêm các kiểu cụ thể cho độ rộng màn hình cụ thể. Chúng tôi cũng có thể thêm các kiểu khác nhau dựa trên hướng và mật độ pixel của thiết bị.

    Bạn có thể nhúng Truy vấn phương tiện trực tiếp vào mã trang bằng liên kết:

    1 "màn hình và (hướng: dọc) và (chiều rộng tối thiểu: 960px), trình chiếu" />

    Hoặc sử dụng mã yêu cầu trực tiếp trong các biểu định kiểu xếp tầng (phương pháp này thường được các nhà phát triển sử dụng nhất).

    3. Hiện đại hóa

    Modernizr là một công cụ javascript để phát hiện khả năng của trình duyệt/thiết bị. Các trình duyệt khác nhau và không cung cấp hỗ trợ tính năng giống hệt nhau. Khi phát triển trang web cho thiết bị di động, bạn có thể muốn tận dụng các thuộc tính hiện đại và tiện lợi của CSS3 và HTML5, thật không may, không phải tất cả các trình duyệt đều hỗ trợ (không phải ai cũng sử dụng phiên bản mới nhất trình duyệt).

    Modernizr cho phép bạn cung cấp cho người dùng các trình duyệt cũ một trang web dự phòng thiếu nhiều tính năng và chức năng hiện đại.

    4. Điều khiển cảm ứng trên trang web.

    TouchSwipe là một plugin jQuery cho phép bạn triển khai hỗ trợ Kiểm soát cảm ứng trên trang web (trên thiết bị di động hoặc máy tính bảng). Nó hỗ trợ lựa chọn các cử chỉ phổ biến nhất của họ như vuốt, chụm, thu phóng và cuộn.

    Kể từ hôm nay hầu như tất cả các nhà sản xuất thiết bị di động đều từ chối bàn phím vật lý, và thực hiện hỗ trợ cảm ứng, bạn chắc chắn nên xem xét việc triển khai hỗ trợ cảm ứng trên trang web của riêng mình.

    5. Biểu tượng iOS

    Điều đầu tiên bạn nhìn thấy khi mở khóa iPhone (hoặc iPad) là các biểu tượng. Ngoài các biểu tượng ứng dụng, trong iOS bạn còn có thể nhìn thấy các biểu tượng trang web đã được thêm vào Màn hình chính.

    Để tạo biểu tượng này cho trang web của bạn, chỉ cần thêm liên kết theo dõi trong phần đầu của mã trang web của bạn:

    1 2 3 "touch-icon-iphone-retina.png" rel="apple-touch-icon" size="114x114" />

    Mặt khác, bạn có thể chỉ cần xóa các liên kết này, chỉ cần đảm bảo rằng các biểu tượng được lưu trong thư mục gốc và có tiền tố apple-touch-icon-* trong tên.

    6. Màn hình giật gân

    Màn hình giật gân là hình ảnh đầu tiên được hiển thị khi bạn khởi chạy một ứng dụng. Màn hình này thông báo cho người dùng về việc tải xuống ứng dụng hiện tại. Bạn thường nên sử dụng trình bảo vệ màn hình cũng để quảng bá thương hiệu của mình.

    Để thêm trình bảo vệ màn hình như vậy vào trang web của bạn, chỉ cần dán dòng sau trong đầu.

    1

    Khi người dùng mở trang web của bạn thông qua Màn hình chính, hình ảnh được chỉ định trong liên kết này sẽ nhanh chóng xuất hiện trên màn hình thiết bị.

    Mặc dù việc sử dụng màn hình giật gân làm quảng cáo chất lượng có phần trái với quy tắc, nhưng nếu bạn sử dụng bảo vệ màn hình đẹp, sẽ chỉ được hiển thị trong vài giây, điều này sẽ tạo ra nhiều hơn nữa kinh nghiệm tốt tương tác.

    7. Biểu tượng Windows 8

    Windows 8 và RT cũng cung cấp khả năng thêm các khối biểu tượng vào Màn hình chính. Trong Windows 8, các khối này được gọi là Biểu tượng Ghim.

    Không giống như iOS sử dụng phần tử liên kết, Windows 8 sử dụng thẻ meta. Hãy xem một ví dụ.

    1

    Thẻ meta đầu tiên xác định màu của ô, thẻ thứ hai chịu trách nhiệm về hình ảnh của biểu tượng. Có một trang tên là Build My Pinned Site cho phép bạn dễ dàng tạo các thẻ meta như thế này.

    Tóm lại là

    Cuộc cách mạng di động đã thay đổi cách các nhà phát triển web tạo trang web. Và bây giờ bạn nên xem xét ít nhất những thành phần mà chúng ta đã nói đến hôm nay. Tất nhiên, nếu bạn muốn trang web của mình trông đẹp mắt trên các thiết bị chạy iOS và Windows 8.

    Chắc chắn bạn đã nghe nói rằng việc tối ưu hóa trang web trên thiết bị di động ảnh hưởng đến tốc độ và hiệu quả quảng bá ở phân khúc di động, thu hút khách hàng, đối tác và khách hàng mới.

    Lưu lượng truy cập của thiết bị di động trong RuNet năm 2017. Qua theo Kỹ thuật số Báo cáo là 75%, và vào năm 2018. sẽ tăng lên 79%.

    Không có đào tạo đặc biệttối ưu hóa trang web di động bạn đã mất hàng trăm, hàng nghìn khách truy cập mục tiêu - những khách hàng có khả năng tạo ra lợi nhuận.

    Tỷ lệ người dùng di động cho các ngóc ngách và phân khúc thị trường khác nhau khác nhau nhưng có xu hướng chung tăng lên.

    • Làm thế nào để biết bạn có cần đặt hàng không tối ưu hóa thiết bị di động trang web ngay bây giờ?
    • Làm cách nào để kiểm tra độc lập các thuộc tính và chỉ số thân thiện với thiết bị di động của một dự án web?
    • Trang web/cửa hàng của bạn sẵn sàng nhận lưu lượng truy cập trên thiết bị di động như thế nào?

    Tối ưu hóa trang web trên thiết bị di động: 5 bài kiểm tra miễn phí

    Vuốt tự kiểm tra cửa hàng trực tuyến, trang web bán hàng của bạn hoặc trang đích, để xác định:

    1. Bạn có cần tối ưu hóa thiết bị di động ngay bây giờ không?
    2. Nó thuận tiện như thế nào cho khách hàng di động của bạn?
    3. Trang web của bạn ẩn những lỗi gì?

    Tối ưu hóa trang web trên thiết bị di động được bao gồm trong phạm vi dịch vụ tiêu chuẩn của chúng tôi.

    Chúng tôi làm việc đồng thời với phiên bản dành cho máy tính để bàn và thiết bị di động (thích ứng) nhằm tối đa hóa việc quảng bá trang web hoặc cửa hàng trực tuyến trong TOP 10 và đưa khách hàng đến với bạn.

    Mức độ tối ưu hóa của trang web dành cho thiết bị di động được hiển thị theo 2 thông số:

    • Mobile Friendless (thân thiện, khả năng sử dụng - 96/100)
    • Tốc độ di động (tốc độ - 53/100)

    Trong ví dụ trên, trang web được thử nghiệm 100% cần tối ưu hóa tốc độ di động. Nhưng với khả năng thích ứng (tiện lợi) thì mọi thứ đều ổn. Ảnh chụp màn hình cho thấy dự án cũng yêu cầu tăng tốc phiên bản dành cho máy tính để bàn (Tốc độ máy tính để bàn - 66/100).

    Nếu bài kiểm tra hiển thị số “đỏ” hoặc “vàng” trong báo cáo, hãy sửa lỗi ngay lập tức.

    Cần tối ưu hóa trang web trên thiết bị di động nếu tài nguyên web của bạn nhận được tổng cộng hơn 10% lưu lượng truy cập trên thiết bị di động. Khách hàng đang truy cập trang web của bạn từ máy tính bảng và điện thoại, nhưng bạn đã chuẩn bị như thế nào cho những lần truy cập này?

    Bạn có thể xem tỷ lệ phần trăm lưu lượng truy cập di động hiện tại trong số liệu thống kê của Yandex.Metrica:

    Báo cáo -> Báo cáo tiêu chuẩn -> Công nghệ -> Thiết bị

    Trong ví dụ báo cáo hàng quý này, 64,9% tổng lưu lượng truy cập rơi trên PC (máy tính để bàn những máy tính cá nhân) và 35,1% còn lại là chuyển tiếp trên thiết bị di động:

    • điện thoại thông minh - 31,6%
    • máy tính bảng - 3,5%

    Nếu lưu lượng truy cập trên thiết bị di động lớn hơn 10% thì việc tối ưu hóa trang web trên thiết bị di động sẽ giúp tăng doanh số bán hàng. Nhưng sự vắng mặt hoàn toàn lượt truy cập trên thiết bị di động là một vấn đề...

    Lưu lượng truy cập trên thiết bị di động bằng 0 cho thấy có lỗi nghiêm trọng. Có lẽ dự án web của bạn:

    • không trải qua quá trình tối ưu hóa thiết bị di động
    • mất khách hàng di động và lợi nhuận
    • có khả năng cạnh tranh thấp trong kết quả tìm kiếm trên thiết bị di động của Yandex và Google

    Để đánh giá xu hướng tăng trưởng về số lượt truy cập trên thiết bị di động theo thời gian và trong tương lai, bạn cần xây dựng lại báo cáo Yandex.Metrica một chút.

    Trên cùng một trang của báo cáo, chọn khoảng thời gian - “NĂM” và hiển thị - “Dòng” hoặc “Khu vực”:

    Trong hình, lưu lượng truy cập web trên PC đang giảm và số nhấp chuột từ điện thoại thông minh đang tăng lên. Nếu bạn có hình ảnh tương tự, hãy tối ưu hóa đơn hàng và thu hút nhiều khách truy cập trên thiết bị di động hơn. Kiếm tiền trên bán hàng di động bây giờ, trước khi các đối thủ cạnh tranh làm điều này.

    Xin lưu ý rằng đối thủ cạnh tranh không ngủ!

    Nếu các trang web cạnh tranh được chuẩn bị tốt hơn cho lượt truy cập trên thiết bị di động, phù hợp với lưu lượng truy cập trên thiết bị di động, sử dụng thuận tiện và nhanh chóng, bạn sẽ mất khách hàng và tiền bạc. Thậm chí 10% lưu lượng truy cập trên thiết bị di động cũng là một giá trị thương mại đáng kể không thể bỏ qua.

    Tối ưu hóa trang web trên thiết bị di động sẽ cung cấp thêm lợi thế cạnh tranh và tiềm năng để chinh phục phân khúc thị trường di động trong phân khúc chủ đề của bạn.

    5. Kiểm tra tối ưu hóa trang web dành cho thiết bị di động

    Cách dễ nhất để kiểm tra xem tài nguyên web của bạn có sẵn sàng cho lượt truy cập trên thiết bị di động hay không là yêu cầu kiểm tra từ công ty “TỐI ƯU HÓA” của chúng tôi. Trong trường hợp này bạn:

    • thoát khỏi những rắc rối khi phân tích và phân tích ở giai đoạn phát triển
    • tiết kiệm thời gian và tiền bạc cho doanh nghiệp của bạn
    • lấy khuyến nghị chi tiết, Làm thế nào để cải thiện website bán hàng, những điều cần chú ý

    Trong 2 ngày, chúng tôi sẽ kiểm tra kỹ lưỡng, toàn diện và chuyên nghiệp tất cả các thông số trong chuỗi bán hàng của bạn, bao gồm cả phiên bản di động và thống kê lưu lượng truy cập. Chúng tôi sẽ biên soạn báo cáo chi tiết và từng bước với danh sách các mẹo từ các nhà phát triển web giỏi nhất của chúng tôi.

    Tối ưu hóa trang web di động bao gồm những gì?

    1. Làm việc với từ khóa

    Từ điện thoại họ thường nhập ngắn (bàn phím) hoặc rất dài ( quay số bằng giọng nói) cụm từ và điều này phải được tính đến. Cốt lõi ngữ nghĩađang được điều chỉnh cho phiên bản di động!

    2. Thiết kế

    Mọi thứ không cần thiết đều bị loại bỏ. Tối ưu hóa trang web dành cho thiết bị di động giới hạn hoặc điều chỉnh khu vực xem để phù hợp với các thành phần trang quan trọng bên trong màn hình nhỏ. Sau đây có thể được tối ưu hóa:

    • phông chữ và phong cách
    • khối và mô-đun
    • màu sắc và hình nền
    • cấu trúc và điều hướng
    • menu và widget
    • lề và phần đệm

    3. Tăng tốc

    Tốc độ Internet di động nhà khai thác di độngĐể lại nhiều mong muốn. Nếu trang web chạy chậm và mất hơn 2-3 giây để tải, khách truy cập sẽ chuyển sang đối thủ cạnh tranh. Vì vậy, điều quan trọng là phải tăng tốc tài nguyên.

    4. Thông số ĐỊA LÝ

    Công cụ tìm kiếm trong kết quả di động cho Nền tảng Android và iOS tính đến vị trí địa lý và hiển thị cho người dùng các ưu đãi gần nhất trong khu vực của họ. Không thể tối ưu hóa trang web dành cho thiết bị di động nếu không đặt thông số GEO.

    Tối thiểu, bạn cần thêm dự án vào các dịch vụ GEO phổ biến, dịch vụ trợ giúp Yandex và bản đồ địa phương như 2GIS.

    Những thiếu sót cản trở hoạt động binh thương, giảm sự tham dự và thu nhập. Loại bỏ lỗi - giai đoạn quan trọng tối ưu hóa trang web cho thiết bị di động và tiện ích.

    6. Khả năng sử dụng trên thiết bị di động

    Bạn cần xác định dự án kinh doanh của mình thuận tiện như thế nào khi mở từ thiết bị di động. Chỉ có 2 giải pháp để tiếp nhận và phục vụ khách hàng di động:

    − Thích ứng cách trình bày(thiết kế tự động thích ứng với màn hình khác nhau tiện ích) hoặc...

    − Đặc biệt phiên bản trang web (phiên bản di động được tạo trên tên miền phụ và khác biệt đáng kể so với tài nguyên chính ở chức năng đơn giản hóa, menu đặc biệt và thiết kế).

    Bạn có thể tự mình thực hiện công việc này mà không cần sự trợ giúp của chuyên gia không? Bạn sẽ mất bao lâu nữa khách hàng di động và thị phần? Tại sao bạn không khắc phục tình trạng này ngay bây giờ và yêu cầu tối ưu hóa trang web trên thiết bị di động?

    Xét cho cùng, nó không đắt lắm và mọi chi phí sẽ được thanh toán hết trong 2-3 tháng tới. Nhấn nút và đạt doanh số cao!