"url": "http://www.vndigitalmarketing.edu.vn/" } Làm thế nào để làm website bạn tạm thân thiện với Google - Digital Marketing Làm thế nào để làm website bạn tạm thân thiện với Google - Digital Marketing

728x90 AdSpace

  • Tin nóng

    Làm thế nào để làm website bạn tạm thân thiện với Google

    Theo Cindy Krum vừa công bố về những thay đổi di động thân thiện với google sắp tới mà tôi khuyên bạn nên kiểm tra trước khi tiếp tục.  Với nhu cầu tìm kiếm trên moblie của người dùng thì các nhà quản trị web cố gắn tối ưu hóa các trang web điện thoại di động trước ngày 21 tháng 4, nó có thể rất dễ dàng để hy sinh hiệu suất trong quá trình này. Đừng quên, Google đã đề cập nhiều lần rằng hiệu suất trang web cũng là một yếu tố trong bảng xếp hạng tìm kiếm, đầu tiên trong năm 2010 cho các trang web máy tính để bàn và một lần nữa vào năm 2013 cho các trang web điện thoại di động.

    Trong bài này tôi sẽ giới thiệu một số cấp cao thực hành tốt nhất để ghi nhớ trong trang web di động của bạn  nỗ lực thiết kế. Ngoài ra, tôi đề nghị bạn cũng kiểm tra nội dung tài liệu tuyệt vời của Google trên các trang web điện thoại di động thân thiện.

    Đo hiệu suất trang web di động của bạn

    Bước đầu tiên để cải thiện hiệu suất di động của bạn là để đo nơi bạn đang bắt đầu. Có một số Tools miễn phí và trả tiền tuyệt vời để làm như vậy, nhưng hai trong số yêu thích của tôi là những công cụ phát triển tích hợp của Google Chrome và WebPageTest. Vì lợi ích của sự đơn giản, tôi sẽ sử dụng công cụ phát triển Chrome trong bài viết này.

    Nếu bạn không phải là một người biết code? Đừng lo lắng, bằng cách sử dụng các công cụ Chrome là thực sự dễ dàng:


    1. Mở Chrome (cài đặt )
    2. Nhấn chút "bánh hamburger" menu (3 lines xếp chồng lên nhau) ở góc trên bên phải
    3. Chọn More Tools, sau đó Công cụ phát triển

    Bạn sẽ thấy một màn hình tiện lợi với rất nhiều thông tin juicy. Quan trọng nhất, ở phía trên có một drop-down với nhiều giả lập điện thoại di động và máy tính bảng khác nhau. Khá là lạ đúng không.


    Bây giờ, chọn một thiết bị quan tâm, ví dụ Apple iPhone 6. Nhập địa chỉ trang web của bạn trong thanh địa chỉ, nhấn Enter và thì đấy! Bây giờ bạn đang nhìn thấy trang web của bạn xuất như một chiếc iPhone 6 sẽ nhìn thấy nó. Cuộn xuống phía dưới để xem một số số liệu thống kê thực hiện thú vị như tổng thời gian tải trang, kích thước của trang, và tổng số lượng yêu cầu. Nhấn "Network" tab cho một đặc biệt hữu ích xem sơ đồ thác nước, như hình dưới đây:



    Tối ưu hóa các hình ảnh cho điện thoại di động

    Theo Archive HTTP, hình ảnh trên Site trung bình trên 60% tổng số nội dung trang của bạn. Khá trực quan, hình ảnh chiếm đa số nội dung trên web. Kiểm tra trang của riêng bạn với các công cụ phát triển Chrome và bạn có thể thấy các con số tương tự. Khi tải về qua tương đối chậm kết nối di động tốc độ, tác động của hình ảnh lớn về hiệu suất trang web của bạn có thể còn nghiêm trọng hơn.

    Trong khi nó luôn luôn là một thực hành tốt nhất để tối ưu hóa trang web của bạn bằng cách sử dụng kỹ thuật tối ưu lossless và lossy hình ảnh, có một yếu tố nữa cho điện thoại di động: có nên thậm chí bạn có thể tải hình ảnh đó để bắt đầu với? Là lớn, đẹp 1600px rộng "anh hùng" hình ảnh mà bạn sử dụng trên trang web của máy tính để bàn của bạn có thể hoàn toàn lãng phí trên các màn hình nhỏ hơn của một điện thoại hoặc máy tính bảng, thậm chí nếu đó là một máy tính bảng có độ phân giải cao hay "võng mạc" màn hình.

    Các giải pháp? Xem xét việc tải một hình ảnh nhỏ hơn chỉ cần cho người sử dụng điện thoại di động của bạn. Hãy cẩn thận, mặc dù; có một cách "đúng" và "sai" để làm điều này.

    Nhanh sang một bên: ví dụ này, và trang web di động của bạn nói chung, chắc chắn rằng bạn đang xác định các tag meta viewport trong phần đầu của trang của bạn. Về cơ bản, điều này nói với các trình duyệt di động của bạn có một trang web di động đáp ứng, và không cố gắng tự động quy mô một trang web máy tính để bàn lớn xuống độ phân giải điện thoại di động (xấu xí!). Ngoài ra nếu thẻ này không tồn tại, bạn sẽ nhận được kết quả khác nhau trong Chrome của bạn kiểm tra dưới đây.

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    Cách "sai"


    Thiết kế đáp ứng làm cho việc sử dụng nặng của các truy vấn CSS phương tiện truyền thông để tạo kiểu cho trang web của bạn một cách khác nhau ở các kích thước khung nhìn nhỏ hơn được sử dụng bởi các thiết bị di động, do đó, một cách tiếp cận rõ ràng để trao đổi trên hình ảnh của bạn có thể đi một cái gì đó như thế này:

    <!-- DON'T DO THIS -->
    <style> 
        @media (min-width:376px) {
            .mobile_image {
                display: none;
            }
            .desktop_image {
                display: inline;
            }
        }
        @media (max-width:375px) {
            .mobile_image {
                display: inline;
            }
            .desktop_image {
                display: none;
            }
        }
    </style> 
    <img src="mobile.png" class="mobile_image" />
    <img src="desktop.png" class="desktop_image" />

    Mã này sẽ hiển thị một hình ảnh khi độ phân giải màn hình rộng, và một / hình ảnh nhỏ khác nhau khi độ phân giải nhỏ hơn.

    Điều này có vẻ tốt trên các trang kết, nhưng có một vấn đề lớn: cả hai hình ảnh có được tải về! Để xác minh, tải mẫu này trong Chrome và bạn sẽ thấy một cái gì đó như thế này:


    Vâng đó là không tốt; trong thực tế, mà thậm chí còn tồi tệ hơn! Bạn đang lãng phí thời gian và băng thông tải một hình ảnh mà thậm chí sẽ không được hiển thị!

    Cách đúng

    Thay vào đó, hãy sử dụng các kiểu background-image trên DIV để đạt được hiệu quả tương tự, ví dụ:

    <!-- DO THIS -->
    <style>
        @media (min-width:376px) {
            .myimage {
                background-image: url("desktop.png");
                width: 700px;
                height: 550px;
            }
        }
        @media (max-width:375px) {
            .myimage {
                background-image: url("mobile.png");
                width: 350px;
                height: 130px;
            }
        }
    </style>
    <div class="myimage"></div>

    Tải công cụ trong Chrome, bạn sẽ không thấy điều này:


    Chỉ có các hình ảnh di động đã được nạp ... tốt hơn nhiều! Tất nhiên, có một điều lưu ý: để sử dụng background-image với một DIV, bạn cần cung cấp độ rộng hình ảnh và chiều cao trong CSS cho lớp đó. Điều này có thể được rườm rà cho rất nhiều hình ảnh, hoặc hình ảnh thay đổi kích thước thường xuyên, nhưng nếu "anh hùng" của hình ảnh là tương đối tĩnh trong tự nhiên, chiến lược sử dụng kỹ thuật này có thể làm cho một sự cải thiện đáng kể hiệu suất trang web di động của bạn.

    Takeaway: Nếu có thể, sử dụng các phương tiện truyền thông truy vấn CSS và phong cách background-image để có điều kiện làm cho hình ảnh điện thoại di động. Điều này chỉ có thể làm cho tinh thần cho hình ảnh lớn nhất của bạn.

    Hãy xem xét ditching jQuery


    Cái Gì? Bạn có đọc mà chính xác? jQuery là thư viện THE của sự lựa chọn cho các văn bản JavaScript, làm thế nào bạn có thể sống mà không có nó?

    jQuery thực sự là khá hữu ích, nhưng nhớ lại một nếu mục tiêu thiết kế ban đầu của nó là cung cấp một giao diện thống nhất phù hợp với W3C khuyến cáo API trên các trình duyệt cực kỳ đa dạng với các tiêu chuẩn khác nhau (và thường bị phá vỡ) triển khai. jQuery cho phép của bạn tránh viết "nếu Internet Explorer làm được điều này, người nào khác làm điều đó" code.

    NHƯNG, giao diện thống nhất của jQuery là ít hơn nhiều cần thiết trên điện thoại di động. Điện thoại di động bị chi phối bởi các trình duyệt WebKit có nguồn gốc như Safari hay Chrome, vì vậy có những vấn đề ít hơn để tóm tắt đi. Và nặng trong lúc một nặng 200 KB, jQuery vẫn là một thư viện lớn để tải về, ngay cả với tự do sử dụng bộ nhớ đệm. Ngay cả sau khi bạn nén và giảm bớt jQuery, bạn đang đối phó với khoảng 30KB.

    Nhưng chờ đợi, bạn nói; bạn vẫn muốn giao diện đơn giản hóa JavaScript jQuery cung cấp? Nó là khá tốt đẹp - vì vậy hãy xem xét Zeptojs thay thế. Trong khi không phải là đầy đủ tính năng như jQuery, nó chỉ nặng vỏn vẹn 5 KB nén, khoảng 6 lần nhỏ! Kể từ Zepto phần lớn là API tương thích với jQuery bạn không cần phải viết lại mã để sử dụng nó. Đối với hầu hết các trang web JavaScript cơ bản, Zepto là đầy đủ hơn.

    Takeaway: Giảm thiểu các thư viện của bên thứ ba, bạn có, và xem xét sử dụng Zeptojs như một thay thế cho jQuery nếu nhu cầu JavaScript của bạn là cơ bản.

    Xem lại các thiết lập bộ nhớ đệm của bạn


    Các nhà phát triển web thông minh làm giảm kích thước của các nguồn lực của mình để giảm thiểu thời gian tải trang. Thực sự phát triển web thông minh tránh sự cần thiết để tải các tài nguyên ở nơi đầu tiên. Đây là nơi mà trình duyệt đi kèm trong bộ nhớ đệm. Nếu hình ảnh của bạn, CSS, JavaScript hoặc hiếm khi thay đổi, xem xét bộ nhớ đệm cho họ. Bằng cách này, người dùng của bạn chỉ tải các tài nguyên một lần, và lần sau họ nhấn vào liên kết trang web của bạn đã được ngồi trên máy tính địa phương của họ (hoặc điện thoại hoặc máy tính bảng), chỉ cần chờ đợi để được sử dụng.

    Mobify có một lớp sơn lót tốt đẹp về thiết lập tiêu đề bộ nhớ đệm, và có rất nhiều công cụ miễn phí tuyệt vời mà có thể kiểm tra các thiết lập bộ nhớ đệm của bạn bao gồm các REDbot siêu mát mẻ, WooRank, và Zoompf riêng của chúng tôi. Nếu bạn đang chạy một máy chủ web Apache hoặc nginx, xem xét việc cho phép đơn giản hóa cấu hình mod_pagespeed bộ nhớ đệm của bạn. Nếu bạn có một trang web WordPress, các plugin W3 Total Cache là tuyệt vời.

    Takeaway: Caching là một trong những tối ưu hóa hoạt động hiệu quả nhất mà bạn có thể thực hiện, và quan trọng hơn bao giờ hết đối với các trang web điện thoại di động. Xem xét các chính sách bộ nhớ đệm của bạn và áp dụng bộ nhớ đệm đến lớn, không thường xuyên thay đổi các thư viện và hình ảnh của bạn.

    Hình Động  GIF? Trình duyệt của bạn không!


    Animated GIF đã thấy khá hồi sinh của cuối năm, nhưng định dạng là ngày và hiển thị độ tuổi của mình. Hẹn hò trở lại gần 30 năm, GIF hoạt hình là cồng kềnh và nặng nề để tải về, đặc biệt là khi GIF động của bạn là một clip phim ngắn. Xem xét sử dụng HTML5 video thay vì một bộ phim hoạt hình GIF. Tất cả các trình duyệt hiện đại hỗ trợ nó, và video HTML5 là thông thường là 10% hoặc ít hơn kích thước của một GIF hoạt hình tương đương.

    Một lựa chọn khác là Imgur. Khi bạn tải lên hình GIF động để Imgur, họ sẽ tự động chuyển đổi các hình ảnh động sang một định dạng mà họ gọi GIFV. GIFV về cơ bản chỉ là một video HTML5, nhưng với một kích thước tối ưu hóa đáng kể. Imgur quản lý việc lưu trữ các video của bạn, và tùy chọn phục vụ các tập tin tại GIFV hoặc GIF tùy thuộc vào khả năng của trình duyệt của người dùng (mặc dù hầu hết tất cả các trình duyệt hiện đại hỗ trợ HTML5 video).

    Takeaway: Hãy thử và tránh các ảnh GIF động cho các đoạn phim hoặc hình ảnh động phức tạp. Giao thức video hiện đại được sử dụng bởi HTML5 video và GIFV cung cấp hiệu suất vượt trội và giảm thời gian tải về cho người dùng của bạn.

    Tương lai: HTTP / 2


    Các web đang dần phát triển theo hướng HTTP / 2, và không phải là một thời điểm quá sớm. HTTP / 1.1 là trên 15 tuổi và có dấu hiệu của tuổi tác của mình, đặc biệt là khi nói đến không đáng tin cậy / kết nối liên tục trong các thiết bị di động. HTTP / 2 đã được hưởng trình duyệt phổ biến và hỗ trợ máy chủ. Trong khi tôi sẽ không khuyên bạn nên đổ xô vào một HTTP / 2 áp dụng cho 21 tháng 4 Mobile-thân thay đổi, hỗ trợ trong tương lai cho giao thức này chắc chắn phải là trên lộ trình của bạn. Bạn có thể đọc thêm về HTTP / 2 và tác động của nó trong tương lai về SEO và hiệu suất web trong bài viết trước đây của tôi.

    Takeaway: Kế hoạch thông qua HTTP / 2 trên lộ trình tương lai của bạn, nó đến!

    Cuối cùng


    Xây dựng một trang web, điện thoại di động thân thiện đáp ứng nhiều hơn là tinh chỉnh phong cách và các thẻ để làm hài lòng các crawler của Google. Có nhiều sắc thái, cân nhắc cụ thể di động, nếu bỏ qua, có thể làm chậm đáng kể dành cho di động của bạn và tiêu diệt trải nghiệm người dùng của bạn. May mắn thay có rất nhiều công cụ miễn phí để giúp bạn đánh giá hiệu suất trang web di động của bạn, bao gồm cả WebPageTest, công cụ phát triển Chrome, Google PageSpeed ​​Insights, và Báo cáo miễn phí của Zoompf. Và tất nhiên, hãy chắc chắn để kiểm tra với công cụ kiểm tra điện thoại di động thân thiện của riêng của Google.
    • Blogger Comments
    • Facebook Comments

    0 blogger-facebook:

    Đăng nhận xét

    Item Reviewed: Làm thế nào để làm website bạn tạm thân thiện với Google Rating: 5 Reviewed By: Nguyen Hieu Luc
    Scroll to Top