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.
Trước tiên là kết quả trước đã:
Bước 1: tối ưu hóa hình ảnh
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.
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.
Bước 2: Minify CSS & JavaScript
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ả:
Đố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]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vfPXxpUgMbtjom9RMcreiXpR_jKsA7w593gnsslNKnTV0ctaGszScLgyZ8v1GYrdWvw5vxXmA8vOVgAnCDlCnIaMYHsroeTOLrvXd9wQKslJOu4D8UUQk=s0-d)
Đố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:
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ả:
Đố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ó)
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:
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> và check vào Inline all CSS
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:
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.
