Dự án tối ưu website: gaubongonline.vn

4 Tháng Năm, 2017 by

4.7/5 - (14 bình chọn)

Dự án tối ưu website gaubongonline.vn chạy trên nền tảng WordPress tới nay đã hoàn thành, bài viết này sẽ review sơ qua về quá trình tối ưu website. Tất nhiên là sẽ không thể viết chi tiết toàn bộ hay đi sâu vào từng phần một mà tôi sẽ chỉ khái quát lại các công việc công đoạn trong một phần quá trình để bạn có cái nhìn khái chung nhất. Nếu bạn đang quan tâm đến việc tối ưu tốc độ cho website của mình hay bạn là một lập trình viên đang muốn tìm hiểu về tối ưu website thì bài viết này sẽ khá hữu ích cho bạn đấy.

Xem thêm: Dịch vụ Tối ưu Website

Ngay từ lúc đầu tôi không hề có ý định review và việc tối ưu cho khách hàng đã hoàn thành xong nên để viết bài nhanh chóng tôi đã đưa lên localhost toàn bộ Source code của website mà tôi đã tải xuống trên hosting để phòng trường hợp xấu xảy ra (Backup là việc làm đầu tiên cực kỳ quan trọng khi tiến hành bất kỳ dự án nào). Tất nhiên sẽ thực tế hơn khi kiểm tra website chạy trên hosting và domain thật thay vì chạy trên localhost vì khi chạy trên localhost tốc độ kiểm tra sẽ nhanh hơn là website chạy trên internet. Thật tiếc vì ngay lúc này không thể đưa website lên internet và kiểm tra bằng Gtmetrix cho các bạn xem Gtmetrix đánh giá các điểm các chỉ số cho website.

Hình ảnh trang chủ của website

Tiến hành kiểm tra thông tin sơ bộ của website sau khi load ta có được những thông tin như sau :

Lượng requests quá cao 196 requests
Thời gian load xong toàn bộ 11.70s
DomContentLoaded 3,16s
Load 4,53s
Tổng dung lượng của toàn bộ trang cũng khá lớn lên đến 3,2MB
Hình ảnh trên trang khá nhiều và ảnh đưa lên kích thước và dung lượng chưa được tối ưu và đây cũng là công đoạn vất vả nhất trong tất cả
Lượng request cho CSS lên tới 15 request
Request dành cho JS lên tới 40 một con số quá lớn

Dưới đây là toàn bộ công việc cần tối ưu website

Việc đầu tiên tôi làm đó là tư vấn chuyển website đến Hosting có chất lượng tốt, ổn định và tiến hành triển khai HTTPS cho website để có thể đạt kết quả tối ưu cao nhất. Sau khi phía chủ đầu tư đồng ý Gấu bông đã được mặc áo mới đến chuyển đến nhà mới, tất nhiên là đẹp và xịn hơn nhà cũ rồi.

Dịch vụ cung cấp hosting uy tín được chúng tôi tin dùng trong 10 năm qua đó là HostVN.Net

Xem thêm: HOSTVN.NET là gì? Dịch vụ cung cấp Hosting Tên miền (Domain) của họ ra sao?

Những phân tích và hướng xử lý cho những phân đoạn chính của việc tối ưu:

Nhận thấy website có khá nhiều ảnh, hình ảnh trên trang chất lượng còn khá cao, ngoài ra kích thước quá lớn so với kích thước thật sự hiển thị. Sau khi đã kiểm tra trang chủ và các trang con thì kết quả thu thập được là 5 kích thước ảnh được sử dụng nhiều nhất trên website:

Product thumbnail ngoài trang chủ có kích thước : 245 x 245
Sidebar product thumbnail tại các trang chi tiết sản phẩm 32 x 32
Phần ảnh bài viết dịch vụ tại sidebar 100 x 90
Ngoài ra còn có kích thước 175 x 175 , 247 x 140

Còn lại những kích thước khác thì ít hơn nên có thể xử lý trên từng ảnh, sau khi đã xác định được các kích thước này tôi tiến hành xử lý chúng trong code của website tiến hành tạo ra tất cả kích thước của các ảnh và đưa từng kích thước này vào những vị trí xuất hiện tương ứng. Sau đó là tối ưu lại chất lượng hình ảnh hiển thị.

Chú ý: Các website giá rẻ thường không tối ưu ảnh cho bạn hoặc cắt các ảnh thumbnail cho chuẩn kích thước sử dụng mà thường dùng kích thước mặc định, ở trường hợp gấu bông Online này thì dùng ành 300×300 pixel cho thumbnail ở kích thước 32×32 pixel

Nghe có vẻ đơn giản nhưng trong quá trình xử lý ảnh thì đã có khá nhiều sự cố xảy ra như sau khi chuyển Hosting thì những ảnh có dấu (định dạng UTF-8) đều không thể hiển thị trên website, không tìm ra cách nào khác tôi phải đổi lại tên cho những ảnh bị lỗi có khoảng 300 cái, chưa dừng lại ở đó sau khi sửa lại tên ảnh xong thì lại phải update chúng trở lại các sản phẩm, bài viết trên website. Phần tối ưu chất lượng ảnh cũng không thể dùng plugin của WordPress do Hosting chưa có những những thư viện mà plugin yêu cầu một lần nữa lại phải tải về làm thủ công. Mất khoảng 3 ngày cùng với những thủ thuật và kinh nghiệm tôi mới có thể hoàn thành chúng.

Xem thêm: 5 bước tối ưu hóa hình ảnh trong WordPress chuẩn SEO

Tiếp đó là công đoạn tìm giải pháp xử lý đối với Requests qua các lần kiểm tra thì requests dao động từ 192 cho đến 196 request. Requests chắc chắn sẽ giảm đi rất nhiều sau khi xử lý đống requests CSS JS trên kia đấy.

Tiếp tục đi vào code của website, lần mò tới các tệp CSS xóa bỏ những phần nào không được sử dụng và gộp chúng lại thành một tệp duy nhất, việc này có thể khó khăn cho quản lý sau này nhưng nó sẽ giúp cho request giảm đi rất nhiều. Đối với các tệp JS cũng vậy.

Website có rất nhiều js từ bên thứ 3 như fanpage facebook, google map, Google analytics, Google tab manager. Google map thì đã được thay lại bằng một tấm ảnh có link tới địa chỉ map của cửa hàng trên Map của Google, tất nhiên thay một con voi bằng một con kiến chắc chắn sẽ nhẹ đi rất nhiều. Những request này thì không thể can thiệp từ phía website được, ở đây tôi chỉ chỉnh lại và đặt các vị trí của chúng sao cho phù hợp mà thôi.

Xem thêm: SEO Bounce Rate: 7 Bí quyết giảm tỷ lệ thoát trang web

Những công việc khác sau đó cũng được tiến hành dần dần như chỉnh sửa code, cấu trúc của những nơi chưa hợp lý. Minify các tệp tin CSS, JS, PHP để giảm tối ta dung lượng của tệp, đưa tệp CSS lên trên đầu, JS xuống cuối trang, gỡ bỏ một số plugin không cần thiết, cài đặt những plugin cần thiết, gỡ bỏ query string tại các request JS và CSS…

Hơn hết website đã được triển khai HTTPS, một giao thức bảo mật mà bất kì một trang website lớn nào cũng cần trong thực trạng ngày có càng nhiều cuộc tấn công an ninh mạng trên internet. HTTPS có thể bảo vệ những thông tin trao đổi giữa người dùng và máy chủ. Ngoài ra lợi ích khác mà HTTPS đem lại đó là Google coi đây là một dấu hiệu để thăng hạng website trong SEO

Trên đây chỉ là một phần trong toàn bộ quá trình mà không thể nào tôi đi sâu review cho các bạn được. Kết quả sau khi tối ưu đã khác một trời một vực so với hiện trạng ban đầu: