Hướng dẫn tăng tốc độ tải trang web qua tối ưu code

Làm cách nào để tăng tốc độ tải trang của website với tài nguyên server cùng một cấu hình có thể đáp ứng đồng thời số concurrent user lớn nhất có thể, và thời gian phản hồi nhanh nhất. Vấn đề này bất kỳ một SEOer nào cũng mong muốn để phục vụ trải nghiệm load nhanh nhất cho độc giả của mình.

Vậy làm cách nào để đạt được điều đó? Đó là câu hỏi lớn mà chúng tôi mất rất nhiều thời gian để tìm được cách xử lý từ gôc, và hôm nay tôi sẽ chia sẻ với bạn cách chúng tôi thực hiện tối ưu cho các website của mình.

Trước tiên để thực hiện được việc này bạn cần nhớ 2 điểm quan trọng nhất trong tối ưu:

• Sử dụng gì thì lấy cái đó (tránh dư thừa)
• Tiền xử lý (chuẩn bị sẵn sàng mọi thứ người dùng yêu cầu)

Sử dụng gì thì lấy cái đó: Việc tối ưu từng byte dữ liệu rất quan trọng, đơn giản khi số lượng user đồng thời là 1024 người dùng, 1 byte dữ liệu giảm được 1M dữ liệu truyền qua mạng. Việc làm giảm tối thiểu dung lượng của 1 trang web đặc biệt quan trọng. Giả sử băng thông mạng (con đường) chỉ đáp ứng được 10.000 người 1 lúc, bạn tối ưu size của 1 page giảm một nữa sẽ đáp ứng được gấp đôi là 20.000 người dùng đồng thời. Giờ bạn đã thấy việc tối ưu size của 1 trang web quan trọng tới mức nào.

Tiền xử lý: chuẩn bị sẵn sàng mọi thứ người dùng yêu cầu trước thả vào một vùng nhớ phía server, có thể lưu trữ trong bảng tạm(table) hoặc file lưu trữ (lưu ý là chưa sử dụng tới cache). Người dùng yêu cầu chỉ đọc dữ liệu và không phải lúc yêu cầu mới tính toán, xử lý những thứ người dùng muốn. Ví dụ đơn gian như khách hàng order 1 suất ăn gồm: cơm, rau, thịt, cá, ta sẽ chuẩn bị sẵn và cho vào khay trước khách hàng đến có sử dụng luôn không phải đợi, khác với việc khi khách order mới đi lấy cơm > rau > thịt > cá.

Thời gian load trang tác động trực tiếp tới trải nghiệm người dùng và đây là yếu tố xếp hạng quan trọng, để tăng được sự tín nhiệm của Google bạn cần thực hiện từ gốc: Tổ chức cơ sở dữ liệu, tối ưu câu lệnh query (Index), lưu trữ dữ liệu lớn cần phân mảnh dữ liệu (partition table), …

Tài liệu này dành cho Người phát triển website (Developer, Coder), Seo technique,  những người tham gia vào việc tối ưu website từ CSDL, Code ứng dụng. Nhưng nếu bạn chỉ chuyên SEO không code được stored, code phần ứng dụng thì bạn cần trao đổi với đội phát triển code để thực hiện việc này.

Lưu ý: Đây là phương pháp tối ưu hiệu suất từ gốc chưa đề cập tới Cache ứng dụng, Cache server, Cacher Proxy. Tập trung vào tối ưu các truy vấn SQL, và tối ưu cách viết code ứng dụng.

Nội dung

1. Vấn đề gặp phải
2. Khó khăn
3. Mục đích
4. Một số nguyên tắc
5. Các bước thực hiện tối ưu
6. Ai thực hiện việc tối ưu?
7. Minh họa Thực tiễn
8. Mô hình Servers
9. Tài liệu tham khảo 

1. Vấn đề gặp phải

• Size dữ liệu tăng lên > 20.000 good > 200.000 fine > 2.000.000 bad
• Concurrent User tăng: 5.000 good > 8.000 fine > 10.000 bad 25.000 (concurrent user) – xoso.com.vn
• Bottleneck nghẽn cổ chai
• Tốn tài nguyền CPU, I/O
• Thời gian phản hồi chậm 

2. Khó khăn

Vấn đề hay gặp của các team, member khi thực hiện tối ưu???

• Chỉ viết cho chạy được, chưa quan tâm nhiều đến tối ưu hiệu năng
• Do tốn thời gian, mất nhiều công sức
• Chưa gặp những thực tiễn với User concurrent cao
• Khả năng của team: Team của bạn hoàn toàn giải quyết được vấn đề
• Không tối ưu > SLOW > USER SAD > Bỏ sử dụng 

3. Mục đích

• Trải nghiệm sử dụng tốt nhất cho người dùng về thời gian xử lý
• Giảm thiểu chi phí đầu tư servers (Code tệ không tối ưu có thể cần đến 3-10 server sau khi tối ưu chỉ cần 1)
• Tối ưu > Load fast > USER GLAD > có thể sử dụng tiếp
• Đáp ứng được nhiều concurrent user (Scales with concurrency)

4. Một số nguyên tắc

• Đảm bảo tính khả dụng, sẵn sàng (Availability)
• Hiệu năng cao (high Performance) => Page speed load fast
• Độ tin cậy (Reliability)
• Khả năng quản lý: dễ điều khiển và giám sát
• Khả năng mở rộng (Scalability)
• Chi phí giảm chi phí đầu tư phần cứng, tăng chi phí phát triển 

5. Các bước thực hiện tối ưu

Tối ưu bắt đầu từ gốc: DB > Code > Cache App > Server/load balancer/cache > Network

• DB Tunning
• Code optimize
• Cấu hình cài đặt 

1. Kiến trúc hệ thống

• Các thành phần tham gia hệ thống
• Server DB, App, Cache 

Tham khảo mô hình Kiến trúc triển khai hệ thống website hiệu suất cao Tham khảo Mô hình kiến trúc website của Twitter

2. Mô hình hệ thống – phân tích thiết kế

   • Mô hình nghiệp vụ
   • Mô hình phân rã chức năng
   • Mô hình hoạt động chức năng (mô tả các func quan trọng, từng bước)
   • Mô hình Quan hệ thực thể
   •  

• Code mô hình 3 lớp MVC

  • Model (Database) - Tập trung vào Tiền xử lý
  • Viết query trong DB (ko trong code app)
  • Query luôn nhớ sử dụng field nào thì lấy field đó, không dùng all (*)
  • Tối ưu các câu lệnh INDEX
  • Partition Table cho dữ liệu lớn
  • Hạn chế sử dụng các Hàm Func (SUM, COUNT)
  • Hạn chế JOIN bảng
  • Hạn chế sử dụng ORDER
  • Tập trung vào Tiền xử lý dữ liệu (PreLoad)

• Code – Đảm bảo chạy nhanh nhất, tốn ít tài nguyên nhất có thể

  • Tối thiểu truy vấn (query vào CSLD)
  • Cách sử dụng biến/func khởi tạo 1 lần sử dụng nhiều lần với tham số không đổi (lỗi hay gặp trên user control viết độc lập)
  • Cách sử dụng vòng lặp, sử dụng biến/func trong và ngoài vòng lặp khác nhau?
  • Tối ưu HTML, CSS, Javascript (Google pagespeed insight) – tối ưu từng byte
  •  

6. Ai thực hiện việc tối ưu?

• DB Admin
• System Admin
• Team Lead
• Developer (Coder)

Những người này thực hiện những gì?

Tối ưu như thế nào??? 

7. Minh họa Thực tiễn

seothetop.com

• Show CSDL, tables, stored, function
• Tiền xử lý: Stored data in Json, nest object, ưu tiên thực hiện cho first pages bởi 80-90% truy cập vào first pages, load more gọi query động

Ví dụ:

Dữ liệu chuẩn bị tiền xử lý cho chuyên mục: Kiến thức SEO của Seothetop sẽ được xử lý trước và lưu trữ dữ liệu dạng Json vào 1 record của 1 bảng.

Tiền xử lý: Gen trước dữ liệu đóng gói trong chuỗi JSON

Trên code C# sẽ dùng Deserialize để parse chuỗi Json thành List<object> lấy ra để sử dụng. Theo cách này thay vì phải truy cập vào bảng chuyên mục, bảng tin tức để lọc dữ liệu (Filter theo mệnh đề where, order, vv), thì tiền xử lý chỉ cần truy vấn vào bảng lấy 1 record theo ID. 

8. Mô hình Servers

• Load Blancer chia tải nhiều server xử lý
• Server Cache Proxy
• Tạo các bản sao CSDL trên nhiều server, đồng bộ dữ liệu

Tham khảo mô hình cân bằng tải server web và database

9. Tài liệu tham khảo

1. https://www.slideshare.net/rmederer/jax-2011-high-scalability-by-examplemedererbukowskifinalhandout-10521699
2. https://www.techempower.com/blog/2016/02/10/think-about-performance-before-building-a-web-application/
3. http://baiy.cn/doc/byasp/hpWeb_en.htm
4. https://www.nginx.com/blog/10-tips-for-10x-application-performance/ 

Tóm kết

Việc tối ưu tăng tốc độ tải trang phần view code HTML sử dụng những guide line của Google Pagespeed insight giúp bạn rất nhiều từ cách làm minimize HTML, CSS, Javascript, hình ảnh và nhiều thứ khác nhằm giảm dung lượng tối thiểu, còn bài viết này muốn chia sẻ với các bạn cách server phản hồi nhanh nhất yêu cầu của người dùng, dữ liệu lưu trữ động trong cơ sở dữ liệu (database) cần tiền xử lý tất cả những thông tin người dùng cần và lưu nó vào một bảng nhớ tạm, khi có request đến chỉ lấy ra mà không cần phải tính toán.

Trên đây mới là bài viết tổng quan về tối ưu hiệu năng của hệ thống, do vậy không thể truyền tải hết mà chỉ có thể đưa ra gợi ý và cách thức thực hiện tới bạn và doanh nghiệp của bạn, nếu cần tư vấn và đào tạo trực tiếp về tối ưu code ứng dụng, và chiến lược SEO cho doanh nghiệp (tầm trung đến lớn). Bạn có thể liên hệ với chúng tôi qua email seothetop@gmail.com hoặc số 0916883366

Bạn muốn thực hiện SEO toàn diện cho website của mình một cách chuyên nghiệp:

Hãy bắt đầu với tài liệu hướng dẫn SEO toàn tập tại: https://seothetop.com/kien-thuc-seo/huong-dan-lam-seo-web-trong-9-ngay-voi-full-tai-lieu-pdf-t3-277-157116.html

Chúc bạn thành công!

Dũng Hoàng, admin SeoTheTop