Hướng dẫn tối ưu hóa để giật điểm 100/100 của PageSpeed Insights

Thảo luận trong 'Tối ưu hóa On-Page' bắt đầu bởi babyinternet, 5/4/16.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,656
    Đã được thích:
    1,581
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    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. 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.

    Có rất nhiều công cụ để tối ưu hóa tốc độ tải trang 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. Tôi cũng đã có một bài viết hướng dẫn các bạn tối ưu lại website của mình trên di động, bạn nào quan tâm có thể đọc lại bài viết này ở đây:

    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. 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 :lol:

    Bước 1: 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 #:-s.



    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 :nemgach:

    Đố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.

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

    Ở 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.

    [​IMG]

    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. Hoặc đọc thêm bài này, cả bài này nữa


    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, bạn có thể đọc bài này để làm ra một phiên bản responsive cho trang của mình.


    Kết

    Để 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.

    Vì một diễn đàn VNWebmaster thân thiện và giúp đỡ lẫn nhau giữa các thành viên :embarrassed:
     
  2. nongdanseo

    nongdanseo Lính mới

    Tham gia ngày:
    13/3/16
    Bài viết:
    27
    Đã được thích:
    0
    Điểm thành tích:
    1
    Chất quá AD ơi, để em thử xem thế nào. Của em hiện tại bây giờ có 59/100 biết đến bao giờ mới được điểm tuyệt đối như vậy chứ nhỉ :D
     
  3. Nẹp trang trí nội thất

    Nẹp trang trí nội thất Lính mới

    Tham gia ngày:
    17/3/16
    Bài viết:
    9
    Đã được thích:
    0
    Điểm thành tích:
    1
    Hay quá, đúng cái đang cần, web mình điểm destop cũng có 59/100, đang tìm cách sửa để tối ưu tốc độc cho web
     
  4. thanhan025

    thanhan025 Đang làm quen

    Tham gia ngày:
    24/3/14
    Bài viết:
    85
    Đã được thích:
    0
    Điểm thành tích:
    6
    Kiểm tra trên trang nào vậy bạn ơi? Mình đang cần.
     
  5. vanbach26

    vanbach26 Đang làm quen

    Tham gia ngày:
    24/4/14
    Bài viết:
    119
    Đã được thích:
    1
    Điểm thành tích:
    18
    Quá tuyệt vời. Bác Nhân cho em note lại. Tối về tối ưu.
     
  6. blackcatcn

    blackcatcn Đang làm quen

    Tham gia ngày:
    13/8/12
    Bài viết:
    53
    Đã được thích:
    0
    Điểm thành tích:
    6
    Rất bổ ích, đang chố gắng lên 100 điểm mà chưa được. Thanks chủ thớt.
     
  7. Nhu tung

    Nhu tung Đang làm quen

    Tham gia ngày:
    2/5/15
    Bài viết:
    190
    Đã được thích:
    0
    Điểm thành tích:
    16
    Hôm nay mình cũng đã thử áp dụng theo bác thớt và đã thành công cám ơn bác nhiều lắm . Hôm nay mới biết toppic này biết sớm có phải tốt hơn không
     
  8. dragon208

    dragon208 Đang làm quen

    Tham gia ngày:
    28/3/12
    Bài viết:
    55
    Đã được thích:
    0
    Điểm thành tích:
    6
    Cố gắng sửa đi sửa lại vẫn ko tới 90 vãi nồi. Triều hồi lão @babyinternet
     
  9. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,656
    Đã được thích:
    1,581
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Cố lên em gái :D
    Mắc lỗi render-blocking phải không :p Lên blog của anh mà đọc nhé.:hehe:
     
  10. letrung0908

    letrung0908 Đang làm quen

    Tham gia ngày:
    10/1/14
    Bài viết:
    110
    Đã được thích:
    0
    Điểm thành tích:
    16
    Bài viết hay quá, giờ thiết bị di động lên ngôi rồi, số lượng người sử dụng điện thoại vào internet ngày càng tăng. à mà Em thấy trên nhiều diễn đàn nói rằng bây giờ share mạng xã hội như FB, G+ không có tác dụng cho SEO. AE dày kinh nghiệm trên VNW thấy có đúng không ạ ?
     
  11. sea031282

    sea031282 Đang làm quen

    Tham gia ngày:
    26/2/14
    Bài viết:
    314
    Đã được thích:
    0
    Điểm thành tích:
    16
    Bài viết rất hay, thường thì mọi người chú trọng tối ưu trên web mà ít chú trọng trên điện thoại di động. Qua bài viết này mình cũng cần chú ý tới việc tối ưu và thân thiện cho mobille. Chắc cố phấn đấu đạt 60/100 là mỹ mãn rồi.
     
  12. mautruc

    mautruc Đang làm quen

    Tham gia ngày:
    1/12/15
    Bài viết:
    119
    Đã được thích:
    0
    Điểm thành tích:
    16
    ôi ! hay quá ! của em đang 80/100 chỉnh bưã giờ mà chả thành công lên dc tý nà cả
     
  13. minhngoc233

    minhngoc233 Lính mới

    Tham gia ngày:
    2/5/14
    Bài viết:
    12
    Đã được thích:
    0
    Điểm thành tích:
    1
    khó quá, web của mình không đặt được mức độ 1/2 thật là nản
     
  14. quangcaoalphabeta

    quangcaoalphabeta Đang làm quen

    Tham gia ngày:
    6/11/15
    Bài viết:
    266
    Đã được thích:
    5
    Điểm thành tích:
    18
    Em không am tường sâu về những chỉ số đánh giá này, và em cũng không sâu về code lắm nên em thường đánh giá nôm na như sau, cứ vào một máy tính tầm cỡ trung bình: nhờ mấy đứa bạn làm ở văn phòng, bảo nó vào trang web mình quản lý, bấm giờ, nếu dưới 3s mà nó hiện ra toàn bộ là ô văn tê bác Bây bi ạ.
     
Đang tải...

Chia sẻ trang này