Làm thế nào để có điểm cao với Google PageSpeed Insights ?. Việc tối ưu bắt đầu từ những bước nào ?. Hãy dành ít phút đọc qua bài viết để làm website tốt hơn. Click Xem!
 

[Bí Mật] - Tối Ưu Google PageSpeed Insights


toi-uu-google-pagespeed

Chia sẻ cách tối ưu web lên 99 điểm trên di động PageSpeed Insights

Google vừa ra chuẩn đánh giá tốc độ đáp ứng của web mới khiến mọi người lao đao, chuẩn lần này coi bộ khá nặng nề, nhất là trên di động, mà bản thân trải nghiệm thấy hiện tại có trên 80% người sử dụng thiết bị di động, 10% sử dụng máy tính bảng, còn lại là trên máy bàn hoặc laptop vì vậy tối ưu trên di động gần như là điều tiên quyết ai cũng đang hướng tới.

Với những trang web lớn thì việc tối ưu đã diễn ra rất lâu rồi, vì sao ư, họ phải đi trước thời đại, cái gì cũng phải tốt nhất để sau này lớn mạnh thì không phải làm gì nhiều nữa, vì vậy những website cần tối ưu thường là những web mới làm, hoặc những web sài 1 thời gian nó trở nên chậm chạp và phải tối ưu để nó nhanh hơn, tăng trải nghiệm người dùng.

Bản thân là một Coder nên những vấn đề cơ bản bao trùm việc tối ưu mình xin tóm gọn như sau :

  1. Tối ưu hoá hình ảnh
  2. Tối ưu hoá css,js 
  3. Tối ưu code
  4. Sử dụng Cache và Preload
  5. Sử dụng Hosting hay VPS(máy chủ ảo) tốt.
  6. Bật nén trong Hosting(VPS) hoặc Sử dụng CDN


Mình xin đi vào chi tiết từng vấn đề, nếu các bạn gặp trục trặc ở vấn đề nào thì vui lòng để lại bình luận, trong khả năng mình sẽ trả lời.
 

1- Tối ưu hoá hình ảnh :

toi-uu-hinh-anh

Hầu hết các website đều có hình ảnh chưa tối ưu, thường thì mình sẽ dùng công cụ gtmetrix để check xem hình nào chưa được tối ưu, mình sẽ làm như hướng dẫn của nó, bản thân gtmetrix sẽ tạo ra 1 ảnh đã tối ưu để mình tải về và quăng lên lại, việc này đơn giản và ai cũng có thể làm được. Còn vấn đề nữa là gtmetrix hay báo "Serve scaled images", có nghĩa là một ảnh nào đó nên để đúng kích thước của nó, không dùng ảnh có kích thước lớn hơn rồi bóp nhỏ lại để hiển thị, ví dụ ảnh đó chỉ cần 90x90 nhưng lại dùng ảnh kích thước 200x200 để hiển thị, nhưng vậy code nó phải mất thêm thời gian bóp nhỏ ảnh rồi mới hiển thị gây hao tài nguyên và cũng không cần thiết, gặp lỗi này thì cứ tải ảnh cần scaled( bóp lại) về, sau đó dùng photoshop hoặc trang web hoặc plugins(chỉ dùng cho mã nguồn wordpress) để bóp nhỏ kích thước và quăng lên lại, khuyến nghị nên dùng File Zilla để tải về và quăng ảnh lên.

Các phương pháp tối ưu hình ảnh trước khi upoad lên website:
- Tối ưu hình ảnh với các website online:

- Pugin Wordpress giúp tối ưu hình ảnh:

2- Tối ưu hoá css,js:

toi-uu-minify-css

Đa phần web nào cũng có file css và js, thường thì để load nhanh hơn người ta sẽ dùng cách minify(quá trình này loại bỏ các khoảng trắng của các ký tự trống, ký tự dòng mới, ghi chú và ký tự ngoặc nhọn khỏi mã nguồn của bạn) cho css, js.
Với việc có quá nhiều file css và file js, người ta sau khi minify thì thường nối chúng lại để tăng tốc độ tải cho website. Có rất nhiều website giúp bạn minify file css và js có thể hỗ trợ bạn việc này.
Lưu ý : việc làm này có thể gây vỡ giao diện, hãy luôn có 1 bản backup và sử dụng File Zilla để an toàn hơn.

Các Plugins hỗ trợ minify CSS - JS Wordpress:

  • Autoptimize
  • Fast Velocity Minify

3- Tối ưu code :

Hiện nay có rất nhiều mã nguồn khác nhau, mỗi mã nguồn lại chứa đựng vô số theme khác nhau, việc tối ưu code sẽ khó khăn hơn rất nhiều, vì vậy, khi thiết kế 1 website bạn nên chú ý đến việc nó sử dụng theme gì, có dễ dàng tối ưu không, cộng đồng hỗ trợ lớn không, có update thường xuyên không, v.v.v...


4- Sử dụng Cached và Preload

Dù bạn sử dụng mã nguồn nào bạn cũng cần phải tạo cache cho web, việc này thì hầu như web nào cũng phải tạo ra, mục đích là để khách truy cập lần đầu tiên web sẽ thực thi bình thường, kể từ lần thứ 2 thì khách truy cập đúng link đó thì nó sẽ thực thi nhanh hơn vì sử dụng lại file đã tạo ra dạng html nên máy chủ không phải xử lý như lần đầu tiên nữa, việc này vừa giúp tăng tốc tải trang vừa giúp cho việc sử dụng thấp nhất tài nguyên của Hosting(VPS). Với đợt cập nhật Google PageSpeed Insight lần này, Google ưu tiên những web có sử dụng hàm "preload" trong code, nếu bạn muốn cải thiện tốc độ trên di động trên 90 điểm thì không thể bỏ qua việc này , với từ khoá "Preloading content with rel="preload"+tên_mã_nguồn" mong là các bạn có thể tìm kiếm được thứ bạn cần.

Xem thêm: Hướng Dẫn Tối Ưu Tốc Độ Tải Trang [Wordpress] | VinaHost.VN
 

5- Sử dụng Hosting hay VPS chất lượng.

su-dung-vps-chat-luong

Việc này cũng rất quan trọng, nó đảm bảo cho bạn có sự ổn định, trong SEO nó càng quan trọng hơn nữa. Nếu điều kiện kinh tế cho phép hãy mua 1 VPS để phục vụ cho sự ổn định của máy chủ vì SEO là công việc lâu dài, nên thời gian uptime càng cao càng tốt, lý tưởng nhất là 99,99%, thế thì làm sao để đánh giá 1 Hosting hay 1 VPS tốt.Bạn coi thử hosting của bạn có những điều này không nhé:

  • Sự ổn định, chưa thấy hoặc không thấy nó rơi vào tình trạng "Waiting for {tên_web_site}" quá lâu, ngay gốc trái màn hình, nếu bạn thấy nó cứ Waiting hoài, hoặc vô lâu nó đơ và trắng trang hoặc lỗi gì đó bằng Tiếng Anh hoặc tiếng Việt mà không phải giao diện của bạn thì bạn nên cân nhắc thay đổi Hosting (VPS) khác.
  • Sử dụng SSD
  • Dùng LiteSpeed 
  • Chạy hệ điều hành Centos + CloudLinux
  • Sử dụng Maria Database

Nhiều bạn với chi phí thấp nhưng vẫn muốn sử dụng VPS thì có thể góp mua chung để sài hay hơn là sử dụng Hosting Share.
Để kiểm tra VPS có ok không các bạn đăng nhập SSH trong VPS và dùng lệnh này :
curl -Lso- tocdo.net | bash
Có những thông số bạn cần lưu ý để nhận biết 1 VPS tốt :

  • Loại ảo hoá tốt nhất là KVM & Cloud OpenStack, các loại ảo hoá khác như OpenVZ, XEN không nên sử dụng.
  • Tốc độ trung bình( Average) : cần trên 400 MB/s
  • Read IOPS : trên 35k mới gọi là ổn.
  • Write IOPS : trên 20k mới gọi là ổn.
  Xem thêm:  [TOP] - 8 Lưu Ý Cách Chọn (WORDPRESS HOSTING) | VinaHost.VN
 

6- Bật nén trong Hosting(VPS) hoặc Sử dụng CDN

su-dung-wordpress-cdn

Khi bạn truy cập vào site của bạn, một request sẽ được gửi tới server để chuyển file xuống. Những file này càng lớn, càng mất nhiều thời gian để tải. Bằng cách nén trang web của bạn và CSS trước khi gửi chúng qua cho trình duyệt sẽ giảm thời gian tải xuống đáng kể vì files sẽ nhỏ hơn.Vì vậy kết quả cuối cùng sau khi gzip nén file, kích thước của trang và CSS có thể giảm tới 60-70%

Với từng Web Server riệng thì việc bật Gzip cũng khác nhau, có thể kể đến các web server như Apache chúng ta phải chỉnh file .htaccess, với Nginx chúng ta chỉnh file php.ini, với các Web Server khác chúng ta có thể tham khảo anh google, 😀😀😀
Nếu việc bật Gzip khó khăn với bạn, bạn có thể sử dụng CDN, điển hình CDN miễn phí của Cloudflare có thể giúp bạn việc này, với những website có nhiều lượng truy cập từ nhiều nước khác nhau việc sử dụng CDN gần như bắt buộc.

***Tối ưu hoá mã nguồn WordPress :

Với mã nguồn được các SEOER tin tưởng thì việc tối ưu cũng trở nên bức thiết khi web ngày một chậm hơn
Cũng với những công đoạn trên, các bạn nên làm theo từng bước 1 ở trên để có được kết quả tốt nhất.
Một vấn đề tồn động mà hầu hết các bạn đang gặp phải là lỗi do không nén những file có nguồn gốc từ live chat của facebook và các ứng dụng như comment facebook hay Chúng tôi trên Facebook, Facebook sử dụng ngôn ngữ lập trình riêng trên nền tảng javascript "ReactJS" nên lúc cần phải truy xuất thì phải tham khảo rất nhiều file *.js để trả về kết quả, việc này là không cần thiết, điều cần nhất là inbox vào hộp thư fanpage facebook mà không phải sử dụng plugins, đơn giản nhất là chèn 1 ảnh có biểu tượng chat facebook và link tới hộp thư FanPage dạng m.me/duong-dan-fanpage-facebook và dùng css cố định ảnh đó chạy theo khi mình cuộn trang.

Việc tối ưu file css và js của website với wordpress chúng ta nên sử dụng plugins cache, với những gì kể trên thì plugins cache đó phải đảm bảo các tiêu chí sau :

  • Có chức năng Preload
  • Minify và nối file js,css
  • Lazy Load ảnh và khung iframe
  • Nhẹ nhàng
  • Tạo cache riêng cho giao diện mobile (cực quan trọng)
  • Tối ưu Database
  • Disable Emojis
  • Hỗ trợ CDN


Tuỳ vào mỗi người sẽ có cách chọn lựa khác nhau, với bản thân thì mình sử dụng Plugins WP Rocket bản Premium để cache, nó chứa các ưu điểm trên và tương thích hầu hết các theme của wordpress.
***************************************************

Câu hỏi : Nếu tôi muốn đạt được 99/100 điểm PSI trên di động sử dụng wordpress, đơn giản nhất tôi sẽ làm gì ?
Trả lời : Bạn chỉ cần cài giao diện Astra phiên bản miễn phí, kết hợp plugins WP Rocket bản Premium ,không sử dụng Page Buider để tuỳ biến trang chủ,dùng VPS tối thiểu 2GB ram, bật CDN từ Clouflare và phải sử dụng chứng SSL có phí

P/S : Không phải cứ PSI cao thì website nó tốt ,nó chẳng nói lên điều gì cả, chỉ cần website tải nhanh là được, người phán xét website của bạn suy cho cùng là người dùng, họ là người phán quyết cuối cùng chứ không phải Google PSI !

Nếu các bạn vẫn còn băn khoăn ở một chi tiết nào đó hãy để lại bình luận.

Nguồn: https://www.facebook.com/groups/diendanseomxh/permalink/2001863339879785/