Khi xây dựng một website bản thân anh em chúng ta đều muốn tất cả mọi người biết đến, khi search google thì auto kết quả chúng ta được tìm thấy như vậy chúng ta đã rất thành công rồi

Để website lên được top 1 google chúng ta hay được tư vấn là website đó phải chuẩn SEO, chuẩn W3C như: trên trang web của bạn phải có những thẻ heading, thẻ image phải có alt đi kèm, vân vân và mây mây nhưng chúng ta quên rằng đó chỉ là một phần nhỏ đóng góp trong đó thôi. Theo kinh nghiệm của mình thì content (nội dung), sản phẩm, dịch vụ của anh em mới là phần quan trọng nhất. Nội dung thu hút, dịch vụ tốt, sản phẩm chất lượng không chỉ kéo được lượng người truy cập lớn mà còn giữ được khách hàng quay trở lại website của bạn

Ngoài ra một điều cực kỳ quan trọng nữa và được google ưu tiên rất nhiều đó là website của bạn có tối ưu hay không ?, website có thân thiện với thiết bị di động hay không ?

Lấy ít nhất 80 điểm từ  Google PageSpeed Insights là khó hay dễ
Lấy ít nhất 80 điểm từ Google PageSpeed Insights là khó hay dễ

Bạn hãy thử đặt bản thân mình vào vai khách hàng, khi bạn muốn mua một sản phẩm hay tham khảo một dịch vụ nào đó trên website mà bạn ngồi chờ website đó load rất lâu liệu bạn có đủ kiên nhẫn để chờ đợi hay sẽ tìm trên một website khác nhanh hơn tốt hơn hay khi bạn truy cập website từ điện thoại của bạn thì một website thân thiện với thiết bị di động sẽ giúp bạn dễ xem, dễ tham khảo hơn.

Ở bài viết này mình sẽ đề cập một trong những vấn đề đó là vấn đề tối ưu website. Làm thế nào để website của anh em load nhanh nhất, làm thế nào để đạt được ít nhất 80 điểm của Google PageSpeed Insights (điểm số bản thân mình cảm thấy ổn và tối ưu), những chia sẻ dưới đây đều là kinh nghiệm bản thân mình đúc kết ra và xử lý cho khách hàng của Viweb Solution và mình sẽ đi những điểm cụ thể nhất, chi tiết nhất chứ mình sẽ không nói khái quát, tổng quan chung chung.

Nguyên nhân khiến website của bạn load chậm

Có khá nhiều nguyên nhân khác nhau dẫn đến website bạn bị chậm, có thể do người làm website, có thể do người quản lý website, v.v. Một số nguyên nhân dưới đây mình đã gặp phải như:

  • Website sử dụng rất nhiều hình ảnh không đúng kích thước, dung lượng hình ảnh quá lớn
  • Có thể sử dụng một số câu truy vấn (query) tốn quá nhiều thời gian, khiến website của bạn load quá lâu.
  • Hosting hay VPS bạn đang sử dụng đường truyền mạng không ổn định hoặc quá chậm so với bình thường
  • Sử dụng theme có sẵn mà không tối ưu
  • Sử dụng quá nhiều plugin không cần thiết
  • Lạm dụng quá nhiều thư viện css, jquery

Giải pháp nào để tối ưu website nhanh hơn

1. Website sử dụng nhiều hình ảnh không đúng kích thước, dung lượng

Đây là một trong những nguyên nhân chủ yếu và quan trọng khiến website của bạn bị đánh giá thấp, ít điểm từ Google PageSpeed Insights. Nếu muốn điểm số trên website của anh em được tăng lên, đầu tiên anh em cứ tối ưu hình ảnh trước cho mình. Lời khuyên của mình ở đây là sử dụng hình ảnh theo quy định của theme hoặc của nhà cung cấp website của bạn, còn không thay vì sử dụng ảnh full hãy sử dụng ảnh đã resize như: thumbnail, medium, large từ mặc định của wordpress, bạn cũng có thể custom kích thước riêng để phù hợp với kích thước website bên mình.

Anh em hãy phân biệt kích thước hình ảnh và dung lượng hình ảnh

  • Dung lượng hình ảnh: Google sẽ dựa vào dung lượng theo kích thước hình ảnh để đánh giá xem website của bạn đã tối ưu hay chưa, nếu anh em sử dụng kích thước hình ảnh lớn mà dung lượng nhỏ thì việc tối ưu sẽ dễ dàng hơn, anh em chỉ cần resize lại hình ảnh vậy là được. Kích thước website chuẩn là 1920×1080 (nếu xem trên tivi 4K thì kích thước sẽ là 3840 x 2160), vì vậy chúng ta chỉ cần chọn hình ảnh không quá 1920 hoặc 3840 vậy là ổn. Nếu hình ảnh của anh em upload lên mà 1, 2Mb thì phải xem lại cách tối ưu hình ảnh, dung lượng càng lớn thì chất lượng hình ảnh càng tốt nhưng đồng nghĩa với thời gian tải tài nguyên của website càng lâu, càng chậm. Theo lời khuyên của mình ngoài ảnh gif (ảnh động) có thể upload dung lượng cao một chút, còn lại hãy cố gắng sử dụng hình ảnh có dung lượng thấp hơn 1Mb. Nếu hình ảnh của bạn không có nền (background) hãy sử dụng định dạng hình ảnh là png, còn lại bạn hãy sử dụng hình ảnh định dạng jpeg, jpg.
  • Kích thước hình ảnh: Như mình đã nói ở trên Google sẽ dựa vào kích thước của hình ảnh đễ chia ra dung lượng chuẩn của họ nhưng để đạt được chuẩn của họ thì cực kỳ khó. Mình đã thử vài lần nhưng chỉ được xấp xỉ chứ không bằng tuyệt đối được, kích thước hình ảnh mỗi website một khác nhau nên khi quản lý website anh em nên chú ý đến kích thước để làm sao cho tỉ lệ chính xác nhất có thể. Vì website bây giờ đa phần đều thân thiện trên thiết bị di động nên việc chấm điểm trên mobile thấp hơn desktop (máy tính) là điều dễ hiểu vì chúng ta không thể đáp ứng được đúng kích thước theo từng tỉ lệ được nhưng không phải là không có cách để xử lý vấn đề này, hiện nay chúng ta có thể sử dụng hình ảnh theo tỉ lệ kích thước màn hình được bằng cách như sau:

Ví dụ 1:

<img srcset="example-480w.jpg 480w,
             example-800w.jpg 800w"
     sizes="(max-width: 800px) 480px,
            800px"
     src="example-800w.jpg">

Ví dụ 2:

<picture>
  <source media="(max-width: 480px)" srcset="example-480w.jpg">
  <source media="(max-width: 800px)" srcset="example-800w.jpg">
  <img src="example.jpg" />
</picture>

Ở 2 ví dụ bên trên anh em có thể sử dụng thẻ nào cũng được, mình sẽ giải thích thông số một chút.

Ví dụ 1: mình sử dụng thẻ image trong attribute src sẽ hiển thị ảnh gốc của mình, trong attribute srcset mình sẽ xét 2 hình ảnh với 2 kích thước. Nếu thiết bị nhỏ hơn 800px như ipad screen dọc (portrait), mobile screen ngang sẽ hiển thị hình ảnh example-800w.jpg, tương tự từ màn hình 480px trở xuống sẽ hiển thị hình ảnh example-480w.jpg.

Ví dụ 2: thay vì sử dụng srcset mình sẽ sử dụng thẻ picture, trong picture đó sẽ chứa tất cả hình ảnh theo thiết bị mà mình set ở đó. Tương tự attribute src sẽ là hình ảnh gốc, thẻ source mình sẽ quy định kích thước cụ thể theo từng thiết bị như: kích thước nhỏ hơn 800px và 480px.

Về việc set kích thước theo hình ảnh này anh em hãy custom resize kích thước hình ảnh này khi upload là được. Nếu anh em biết về code thì sử dụng hook để can thiệp còn không anh em hãy tìm một plugin nào đó để đáp ứng được nhu cầu này nhé =)))

Sử dụng photoshop để tối ưu hình ảnh
Sử dụng photoshop để tối ưu hình ảnh

Để tối ưu dung lượng hình ảnh mình thường sử dụng photoshop hoặc truy cập trang web tinypng để tối ưu. Photoshop anh em lưu dưới dạng web (save for web), quality anh em set vào khoảng 80, 90% là ổn, sẽ làm giảm chất lượng ảnh một chút nhưng không vấn đề gì mà còn đáp ứng được vấn đề dung lượng, ở tinypng cũng thế anh em đừng lạm dụng quá nếu tối ưu đi tối ưu lại nhiều lần sẽ khiến hình ảnh bị giảm chất lượng đi rất nhiều.

Định dạng webp tối ưu cực kỳ tốt

Một giải pháp nữa được google khuyến nghị (recommended) và mình đã test thử thì thật sự rất thành công trong việc tối ưu hình ảnh. Đó là sử dụng định dạng webp, hiện nay đã có một số website sử dụng định dạng này để áp dụng trên website của mình. Bản thân mình khi áp dụng trên Viweb Solution bằng một plugin có tên webp express, hình ảnh được tối ưu hầu như giảm được khá nhiều, hình ảnh bên dưới khi mình đã test qua Google PageSpeed Insights thì ảnh được tối ưu gần như 100%

Sau khi test thử PageSpeed Insights thì ảnh gần như được tối ưu 100%

Một lưu ý nhỏ nữa là khi anh em tối ưu website tốt rồi, sau một thời gian khách hàng của mình hay người quản lý website đó lại upload hình ảnh không đúng kích thước hay dung lượng quá lớn thì sẽ xảy ra vấn đề đó một lần nữa nên anh em cần lưu ý vấn đề này để rào trước với khách hàng để tránh xảy ra vấn đề tranh luận sau này.

2. Một số câu truy vấn (query) tốn quá nhiều thời gian, khiến website của bạn load quá lâu.

Trường hợp này thì lại ít gặp và khó nhìn thấy ngay được, anh em muốn biết hoặc nhận biết vấn đề này thì anh em phải có kiến thức về lập trình website để tìm (debug) và xử lý lỗi này. Bản thân mình đã bị vấn đề này khi sử dụng wordpress khi mình muốn sắp xếp (order by) bài viết (posts) theo taxonomy.

Nếu anh em nghi ngờ vấn đề này xảy ra trên website anh em có thể sử dụng plugin Query Monitor, sau khi cài đặt xong anh em qua trang nghi ngờ rồi load lại trang. Anh em sẽ xem được có đúng vấn đề là do câu query gây ra hay không. Nếu plugin báo đỏ thì anh em hãy tối ưu lại phần đó hoặc anh em không biết gì về code thì hãy nhờ người chuyên về vấn đề này để giải quyết, tránh tình trạng website xảy ra lỗi.

Query Monitor

3. Hosting hay VPS bạn đang sử dụng đường truyền mạng không ổn định hoặc quá chậm so với bình thường

Nguyên nhân này thường do nhà cung cấp dịch vụ hoặc anh em thuê dịch vụ này ở nước ngoài trường hợp đứt cáp quang sẽ bị ảnh hưởng.

Vấn đề này thì dễ giải quyết hơn, anh em có thể sử dụng dịch vụ một bên khác mà anh em cảm thấy tốt hơn hiện tại. Để không bị ảnh hưởng việc đứt cáp quang anh em hãy sử dụng dịch vụ ở trong nước nhé.

Bản thân mình hay sử dụng dịch vụ VPS (server ảo) ở nước ngoài, dịch vụ cung cấp là Linode và mình chọn server đặt ở Singapore, sau một thời gian dài sử dụng bên này mình thấy khá ổn định mà đứt cáp quang không ảnh hưởng gì nhiều.

4. Sử dụng theme có sẵn mà không tối ưu

Hiện nay, việc tạo hay làm một website thì không phải khó, có thể anh em không có kiến thức thì anh em cũng có thể tạo cho mình một website. Rất nhiều dịch vụ có sẵn, rất nhiều chỗ bán theme đẹp dễ dàng tùy biến nhưng cái gì cũng có hai mặt của nó. Nếu anh em thuê một coder làm theo yêu cầu của mình đưa ra thì việc của anh em là đưa ra yêu cầu việc còn lại là do coder đáp ứng. Còn anh em muốn tự mua theme để xây dựng sẽ xảy ra một số vấn đề như: anh em muốn thay đổi theo ý mình không phải dễ, theme có sẵn thường phục vụ chung cho nhu cầu cộng đồng nên rất nhiều chức năng anh em không sử dụng đến dẫn đến việc anh em không tối ưu tốt sẽ khiến website sẽ rất chậm, load rất lâu.

Ưu điểm của mua theme giá thành rẻ, nhiều chức năng, dễ dàng quản lý, dễ dàng nâng cấp. Còn thuê một coder chi phí cao hơn, chọn không đúng người hay chọn không đúng công ty có tâm anh em sẽ nhận lại trái đắng, bị “bỏ con giữa chợ”, tiền mất tật mang. Khá nhiều khách hàng đã từ bỏ dịch vụ một bên nào đó tìm đến Viweb Solution để làm lại mới hoàn toàn mặc dù website cũng chỉ mới làm.

Tại Viweb Solution chúng tôi chuyên nhận thiết kế website theo yêu cầu anh em chỉ cần bỏ tiền ra thuê, đưa ra yêu cầu chúng tôi sẽ đáp ứng và anh em hãy yên tâm với chất lượng dịch vụ, hỗ trợ xử lý sự cố cũng như nâng cấp sau này.

5. Sử dụng quá nhiều plugin không cần thiết

Vấn đề này xảy ra khi anh em không biết hoặc không có kiến thức về website nên bắt buộc phải sử dụng plugin để đáp ứng được nhu cầu. Lời khuyên của mình nếu anh em thấy chức năng đó nho nhỏ hoặc không cần thiết thì anh em có thể bỏ nó đi hoặc một plugin lớn quá nhiều chức năng mà anh em chỉ sử dụng một chức năng nhỏ trong đó thôi thì cũng nên xem lại có nên sử dụng hay không hoặc có thể tìm những plugin khác nhỏ hơn để đáp ứng nhu cầu của mình.

6. Lạm dụng quá nhiều thư viện CSS, JQuery

Việc sử dụng thư viện css, jquery sẽ giúp website của bạn đẹp hơn, thẩm mỹ hơn nhưng lại khiến website của bạn bị ảnh hưởng bởi tốc độ load trang. Nên giống như plugin mình khuyên anh em nếu thật sự cần thiết thì hãy sử dụng còn không thì chúng ta nên lược bỏ bớt đi.

Khi xây dựng 1 website bản thân mình sẽ sử dụng một số thư viện CSS, JQuery gần như mặc định dự án nào cũng có anh em có thể tham khảo như: Bootstrap (để sử dụng resposive), Font Awesome (icons font này mình sử dụng vì nó đa dạng và class của nó ngắn hơn bootstrap :D), Owl Carousel (sử dụng cho những slider nếu dự án đó có sử dụng), thư viện jQuery thì không thể thiếu, 1 file viết css và 1 file để viết script cho website.

Cách tối ưu tài nguyên này nếu anh em sử dụng wordpress thì anh em có thể tham khảo plugin w3 total cache sử dụng minify của nó là ổn, còn không anh em hãy sử dụng nhưng file đã nén lại (file .min) để đảm bảo giảm tải tài nguyên khi load trang. Nếu anh em có plugin nào tốt hơn hãy để lại bình luận bên dưới để mọi người tham khảo với nha.

Kết luận

Trên đây là một số “tâm sự” mà mình đã trải qua khi tối ưu website cho khách hàng bên mình, có những website bản thân mình cảm thấy rất ưng ý tối ưu cực kỳ tốt cũng có những website tối ưu mãi không lên điểm cũng buồn lắm anh em nhưng khách yêu cầu mình phải làm thôi chứ biết làm sao giờ.

Sau khi bàn giao thì điểm số rất đẹp, nhưng khi khách tự quản lý thì không còn đẹp như vậy nữa :)))

Những chia sẻ của mình chủ yếu theo hướng cá nhân của bản thân đã trải qua, nếu mình có nói gì không đúng anh em muốn đóng góp, đưa ra ý kiến hay cần mình hỗ trợ gì hãy đưa ra bình luận bên dưới bài viết giúp mình nhé.

Cho mình PR chút xíu là bên mình chuyên cung cấp dịch vụ thiết kế website theo yêu cầu, anh em có nhu cầu cứ liên hệ với bên mình nhé. Đảm bảo đáp ứng nhu cầu của tất cả anh em ạ 😀