Hướng dẫn tối ưu pagespeed insights lên thang điểm 100/100

Hướng dẫn tối ưu pagespeed insights lên thang điểm 100/100

Thảo luận trong 'Kiến thức Onpages - Offpages' bắt đầu bởi ntphong, 17/4/16.

Hướng dẫn tối ưu pagespeed insights lên thang điểm 100/100

Kiến thức Onpages - Offpages, 17/4/16. Trả lời: 0, Đọc: 6,872.

ntphong ntphong

Lượt xem: 6,872

Bạn đang xem:

Hướng dẫn tối ưu pagespeed insights lên thang điểm 100/100

Coppy cùng chia sẻ nhé bạn!
  1. ntphong

    ntphong Administrator Staff Member

    Tham gia ngày:
    25/12/14
    Bài viết:
    48,139
    Trang chủ:

    loading...
    Nâng cao tốc độ tải trang không còn là việc lạ lẫm của nhiều người và đặc biệt là việc rất quan trọng trong thời gian gần đây bởi như bạn biết, tốc độ tải trang là một yếu tố rất quan trọng trong SEO (Tầm quan trọng của tốc độ tải trang web 2015). Ngoài ra, tốc độ tải trang cũng ảnh hưởng rất nhiều đến việc thúc đẩy mua hàng, site tải càng nhanh, đơn hàng về với bạn càng nhiều và tôi đã có một bài viết chia sẻ những nghiên cứu liên quan đến vấn đề này, bạn nào quan tâm có thể đọc lại ở đây ([Infographic] Site tải càng lâu, tiền mất càng nhiều).

    Có rất nhiều công cụ để tối ưu hóa tốc độ tải trang (Công cụ kiểm tra tốc độ website) mà bạn có thể tìm thấy trên các website dành cho cộng đồng Webmaster. Tuy nhiên, nỏi tiếng nhất và nhiều người tin dùng nhất chính là PageSpeed Insights.

    Trong bài viết này, tôi sẽ trình bày thêm một số thông tin và một số phương án quan trọng để bạn có thể đạt điểm 100/100 trong PageSpeed Insights. Bài này chuyên sâu về PageSpeed Insights và tối ưu cho người dùng nên sẽ trở nên xa lạ với một số bạn. Không sao cả, các bạn hãy đọc các liên kết ở trên trước để có thể hiểu và tối ưu hóa về cơ bản trước khi bạn quay lại và đọc lại bài này.

    Bạn đã có động cơ để làm việc này chưa?

    Là một webmaster không phải lúc nào tôi cũng có thể theo dõi đươc website của mình, tôi quản lý khá nhiều site và phải làm việc với nhiều khách hàng mới nên việc thăm thú và điều chỉnh website cũ đối với tôi là việc không thường xuyên.

    Một ngày nọ, tôi kiểm tra PageSpeed Insights và tá hỏa khi thấy điểm được Google chấm có vẻ rất thấp: Mobile chỉ 59 và Desktop thì khá hơn với 95.

    [​IMG]
    Những phương pháp quan trọng và cần thiết đã được tôi trình bày trong các link đính kèm đã cung cấp ở trên. Chúng ta sẽ bắt đầu sau khi đã tối ưu hết những thao tác quan trọng ở trên và đẩy được điểm số lên con số cao hơn: 87. Giở là phần làm thế nào để đạt được 100/100 của PageSpeed Insights nha.

    Trước tiên là kết quả trước đã:

    [​IMG]

    Bước 1: tối ưu hóa hình ảnh

    [​IMG]

    Khi giải quyết các vấn đề có liên quan đến PageSpeed Insights, bên cạnh điểm số, PageSpeed Insights cung cấp cho bạn thêm nhiều thông tin gợi ý cách giải quyết nữa. Đối với hình ảnh, PageSpeed Insights Tool cho chúng ta biêt giải pháp cần làm là tối ưu hóa hình ảnh để chúng nhẹ hơn và tải xuống nhanh chóng hơn. Chúng ta cần làm 2 điều quan trọng sau:
    • Nén dung lượng ảnh bằng cách sử dụng công cụ Compressor.io hoặc TinyPNG.com. Tất cả đều miễn phí và có thể giảm kích thước tập tin của bạn đến 80% mà không làm giảm chất lượng hình ảnh.
    • Giảm kích thước ảnh(size) phù hợp với không gian hiển thị để làm giảm khối lượng ảnh tải xuống mà không làm ảnh hưởng đến kích thước ảnh. Ví dụ, tôi cần hiển thị một hình ảnh thumbnail có kích thước 150x150, tôi sẽ không sử dụng một hình ảnh có kích thước 300x300. Việc này không những giúp ảnh tải xuống nhanh hơn còn làm giảm không gian lưu trữ trên hosting. Bạn không nên giảm kích thước ảnh bằng HTML hoặc CSS vì như vậy cũng không làm giảm kích thước ảnh thực tế mà khiến cho trình duyệt phải render lâu hơn trang web.
    Chúng ta download các ảnh xuống và dùng công cụ đã nói ở trên để nén ảnh, resize ảnh lại đúng bằng kích thước mà chúng ta muốn sử dụng sau đó upload ngược lại lên server.

    Ngoài ra, Google thật tuyệt vời khi tối ưu hóa và cho phép bạn download các hình ảnh đã được Google tối ưu hóa sẵn cho bạn và việc của bạn chỉ là upload ngược chúng lên máy chủ mà không cần phải thực hiện công việc tối ưu lại.
    [​IMG]
    Tính năng này được Google cung cấp sẵn nhưng nhiều bạn ít để ý. Anh Google quá bá đạo và quá đáng yêu :v

    Bước 2: Minify CSS & JavaScript
    [​IMG]
    Bây giờ chúng ta xử lý tiếp các file CSS và Javascript bằng cách rút gọn nội dung chúng lại. Kỹ thuật là bỏ đi các khoảng trắng, các dòng dữ liệu không cần thiết để giảm kích thước tệp tin tải về của người dùng. Bạn nên lưu lại một bản trước khi được rút gọn, nếu không việc chỉnh sửa sẽ rất khó khăn sau này.

    Nếu bạn đang sử dụng Wordpress bạn có thể dùng plugin Autoptimize. Plugin này có thể tự động tối ưu cho bạn.

    Ngoài ra, bạn có thể tải về các tệp tin được Google tối ưu sẵn như tôi đã nói ở trên.

    Nhớ giữ bản backup đầy đủ để bạn có thể chỉnh sửa lại, nếu không mấy ông dev (hoặc chính bạn) cũng bó tay khi đọc từ một file đã đã tối ưu.

    Kết quả:

    [​IMG]
    Bước 3: Browser caching - tận dụng nó!

    [​IMG]

    Đối với nhiều người Caching là một khái niệm xa lạ vì không phải ai cũng biết sử dụng nó. Nếu bạn không hiểu nó thì Google nha, khái niệm và cài đặt không nhắc tới vì nó dài và phức tạp [​IMG]

    Đối với chúng tôi, giải pháp được tôi yêu thích là sử dụng một hệ thống CDN (CDN tác động đến SEO như thế nào?).

    Trích dẫn tí cho các bạn:

    CDN là gì?
    CDN là viết tắt của Content Delivery Network, có thể tạm dịch là mạng lưới cung cấp nội dung. Với hệ thống các máy chủ được đặt tại nhiều nơi trên thế giới sẽ giúp tối ưu tốc độ website cho người truy cập, cải thiện chất lượng website. Điều này có nghĩa là một lượng lớn các nội dung có thể được chuyển giao một cách nhanh chóng và không có bất kỳ sự gián đoạn nào.

    Ví dụ, nếu trang web của bạn có trụ sở tại Los Angeles, những người đang truy cập nó ở San Francisco sẽ nhận được các nội dung nhanh hơn so với những người truy cập nó từ Thượng Hải. CDN đã là một chủ đề nóng cho các doanh nghiệp muốn mở rộng bằng cách tiếp cận người dùng Internet trên toàn cầu. Nó cung cấp cho các doanh nghiệp những cơ hội để tiếp cận với hàng triệu người dùng web ở bất cứ đâu trên thế giới chỉ trong một vài giây. Nó có thể đưa doanh nghiệp của bạn ra trước mặt nhiều người và nhanh chóng là một ưu tiên đối với mọi doanh nghiệp đang tìm cách để phát triển và khi nói đến SEO, nó phải là một ưu tiên.
    Nhấn vào đây để mở rộng...
    Ở VN cũng có nhiều nhà cung cấp CDN (hỏi mấy cha bán host lớn ấy) để bạn sử dụng, ngoài ra bạn cũng có thể sử dụng các CDN của quốc tế nếu muốn.

    Chúng ta di chuyển các tập tin CSS, hình ảnh, Javascript vào máy chủ CDN để lưu trữ chúng chỉ giữ lại các tệp tin lập trình hay các tệp tin HTML trên máy chủ web để giảm tải cho máy chủ web đồng thời giúp cho các tệp tin tĩnh có thể tải nhanh hơn nhờ hệ thống CDN.

    Kết quả:

    [​IMG]

    Đối với các đoạn mã dùng lấy dữ liệu từ Mạng xã hội, chúng ta tối ưu hóa chúng bằng cách tự lưu trữ hình ảnh trên host (CDN) của mình. Thay vì sử dụng script của bên thứ ba để cố gắng lấy các thông số từ Google, FaceBook, Twitter... chúng ta download các script này về và đặt lên host của mình, giải quyết các vấn đề phát sinh (nếu có)

    [​IMG]

    Một vấn đề nữa cũng khá đau đầu là script Google Analytics vì nó là công cụ của Google. Thật may là Google ít khi thay đổi mã này. Thế nên chúng ta cũng download mã này về và lưu trữ trên host của mình để cải thiện thời gian tải trang.

    Ghi chú: bạn có thể viết một script để kiểm tra nếu mã GA có thay đổi bởi Google và cập nhật lại. Tuy nhiên chắc không nhức đầu vậy đâu vì mã Google Analytics rất hiếm khi Google chỉnh sửa nhiều hơn 1-2 lần mỗi năm.

    Kết quả đo tốc độ tải trang bằng Pingdom:

    [​IMG]
    Bước 4: Loại bỏ các tài nguyên ngăn chặn việc render

    [​IMG]

    Loại bỏ các render-blocking không phải là việc đơn giản và nó đòi hỏi bạn phải có kiến thức về kĩ thuật. Các vấn đề chính là bạn hạn chế các đoạn mã javascript tải trước bằng cách di chuyển nó từ thẻ header và body xuống footer để trang web load lên trước sau đó mới đến mớ này.

    Nếu bạn sử dụng Wordpress và có sử dụng plugin Autopmize mà tôi đã nói ở trên, chúng sẽ giúp bạn tối ưu phần này. Hãy bỏ check Force JavaScript in <head>check vào Inline all CSS

    [​IMG]
    Sử dụng nén GZIP để nén dữ liệu từ máy chủ. Phần này nếu bạn gặp khó khăn có thể nhờ đội ngũ kĩ thuật làm thay.

    Bước 6: Tối ưu hóa trải nghiệm ngừoi dùng mobile

    Hướng dẫn của Google liên quan đến trải nghiệm người dùng cho mobile rất chi tiết và bạn theo đó mà chỉnh sửa:

    [​IMG]
    Bạn có thể kiểm tra trải nghiệm của người dùng trên mobile bằng chính trình duyệt Chrome của mình và tiến hành giả lập thiết bị dễ dàng bằng cách ấn F12 (cửa sổ Console) và chọn thiết bị bạn cần.

    [​IMG]

    Trong một số trường hợp, nếu bạn chưa có phiên bản dành cho mobile, hãy thiết kế lại để làm ra một phiên bản responsive cho trang của mình.
    Tóm lại

    Để có thể có được điểm tuyệt đối 100/100 trong PageSpeed Insights, bạn cần chú ý một số thứ quan trọng sau:
    • Sử dụng CDN
    • Sửa chữa render-blocking
    • Tối ưu hóa hình ảnh, file tĩnh và nén chúng lại để giảm dung lượng tối đa.
    Trên tinh thần căn bản là vậy, nếu bạn tối ưu hóa và gặp vấn đề hãy đưa lên đây tôi sẽ cố gắng giúp đỡ bạn.

    Theo vnwebmaster

    / Nguồn: Thegioiseo.com
     

    Diễn đàn Seo

    Tiêu đề: Hướng dẫn tối ưu pagespeed insights lên thang điểm 100/100

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP



Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, can ho river city, Toyota camry, can ho novaland @@

Quan tâm nhiều

Đang tải...