Hướng dẫn tối ưu page speed nhanh như chớp

Thảo luận trong 'SEO Onpage - Tối Ưu Website' bắt đầu bởi hieuthai2019, 9/9/19.

  1. hieuthai2019

    hieuthai2019 New Member

    Bài viết:
    6
    Đã thích:
    0
    Vừa qua mình có làm vài slide hướng dẫn tối ưu pagespeed cho các bạn, có rất nhiều bạn hỏi cách làm để điểm số được cải thiện. Hôm nay mình viết bài này hướng dẫn các bạn tối ưu code để lên điểm pagespeed.
    Đầu tiên các bạn check tổng quan web mình trên pagespeed
    Các bạn nhìn các chỉ số trên các bạn có thể rút ra được kết luận 1 điều cần
    Thứ 1 là bạn xem hình ảnh bạn có được nén hết chưa
    nếu chưa nén download source hình dùng công cụ tiny png nén lại hình ảnh
    Ở đây mình đi thẳng vào 1 domain
    thietbiamthanhhn . com
    Ở bảng pc thì chỉ mục tốc độ bạn này là 3.4 thì có thể nói là chưa nhanh về phần network các bạn có thể nhấ F12 qua phần network xem
    nếu chỉ số load hình lên dưới 100ms là có thể đạt được tốc độ còn lớn hơn 100ms thì nên tìm cách giảm tải những hình ảnh này
    Đó là phần cốt yếu của tối ưu pagespeed
    1 điều quan trọng là trong code các bạn thường dùng những plusgin của wordpress để tạo hiệu ứng slider(lướt banner các kiểu), web site có banner 1 đã tối ưu hình ảnh nhưng vẫn nặng web điểm thấp ở chỗ này đặt biết với các bác mà dùng responsive.
    Ở thời điểm hiện tại thì hầu hết các bác chưa chuyển hóa được cái banner mình.
    Để khắc phục được tình trạng này có thể dùng silder dạng background hình ảnh. vẫn có thể lướt được nhưng tốc độ sẽ được cải thiện ngay,
    Có nhiều web lại dùng thêm mấy link css js gắn từ bên ngoài kéo về web, server phải resquest thêm 1 lần nửa để đi đến source bên ngoài kéo về thế là tốc độ xuống nhanh như chớp liền.
    Thay thế những tấm hình quá khổ về đúng dạng...
    Nếu ai là code thì có thể chuyển những hình ảnh này về đúng kích thước responsive xem...
    Thử nghĩ 1 tấm hình ở bảng pc thì 1350x350 px giả xử nó đạt 130kb
    Nhưng nếu ở bảng mobile bạn cũng dùng 1350x350 này về để nó tự resize thì có lẽ bị dư về kích thước khi load mobile rùi phải ko?
    Hãy thêm code đưa nó về dạng 650x350px xem, đảm bảo nó sẽ giảm size web ngay là tốc độ có thể cải thiện hơn ko ?
    Tuyệt chiêu là đó nha các bác.. Tôi cũng vừa thử vài size có dạng responsive,
    Đưa css và js về cuối trước đóng </body> nhưng ở wp thì hình như nhiều bạn đưa về đây hay bị lỗi phần js.
    Thường lỗi đó do jquery.min.js nó phải được khởi tạo đầu tiên, hãy thử đưa jquery.min.js này về lại trước đóng </head>
    Tôi cũng mới gia nhập diễn đàn này nên cũng ko biết cách up hình dưới đoạn này nên ko thể mô tả thực tế cho các bác thấy được..
    Hi vọng bài viết sau tôi biết cách đăng hình lên cho nhanh ...
    Các bác có câu hỏi hãy đặt dưới đây tôi sẽ giúp gỡ rối cho các bạn nâng điểm pagespeed này..
    Chúc các bác có ngày chủ nhật vui vẻ
     

    Các file đính kèm:

    Đang tải...
  2. ngohuuvinhit

    ngohuuvinhit Member

    Bài viết:
    44
    Đã thích:
    0
    Một bài viết dài lê thê, mà tóm lại chỉ là giảm kích thước ảnh để tăng Speed up page loading
     
  3. tonthepnguyenthanh

    tonthepnguyenthanh Member

    Bài viết:
    73
    Đã thích:
    17
    Mình đọc có bài hướng dẫn F12 để dùng tools coverage xóa css thừa. Cái này có ổn không thế? CSS mà lỗi 1 tý thôi là hỏng web luôn ấy. Giờ muốn giảm CSS thì làm ntn được mà ko sợ lỗi hiển thị nhỉ?
     
  4. sofatoanquoc

    sofatoanquoc Member

    Bài viết:
    209
    Đã thích:
    22
    Google Page Speed này liệu có cùng giống với GTmetrix không nhỉ? Trước làm theo gtmetrix thấy lên khá nhanh nhưng không biết giờ như thế nào rồi?
     
  5. Trần Hữu Phú

    Trần Hữu Phú New Member

    Bài viết:
    4
    Đã thích:
    0
    mẹ, cuối cùng thì chỉ mỗi cái ảnh, thế bố bỏ ảnh đi có dám chắc 100% không?
     
Đang tải...
Đang tải...