Tối ưu kỹ thuật website

Các kỹ thuật để tối ưu lại website về mặt kỹ thuật góp phần tăng tốc độ và hiệu suất tải trang, phục vụ SEO website

Số lần chuyển hướng trình duyệt (AVOID LANDING PAGE REDIRECTS)

Mỗi lần bạn chuyển hướng url là một lần tốn rất nhiều thời gian để trình duyệt tải được nội dung mong muốn. Do đó, trừ khi bắt buộc thì bạn không nên sử dụng cách chuyển hướng đến url mới.
- Tuy nhiên trong một số trường hợp bạn nên sử dụng chuyển hướng 301 duy trì SEO cho website như sau:
+ Chuyển đổi tên miền, trong trường hợp này chuyển hướng 301, để duy trì phần nào thứ hạng website và giữ khách hàng thân thiết.
+ Các công cụ tìm kiếm sắp xếp thứ hạng theo trang chứ không theo website, và có quy định chặt chẽ trong tên miền; vì vậy, cùng một tên miền khi bạn truy cập trình duyệt và website giữa có www và không có www hoặc ngược lại, các công cụ tìm kiếm xác định đó là 2 trang khác nhau nên chuyển hướng 301 giúp bạn tập trung traffic SEO cho trang.
- Thông thường có 4 cách mà bạn có thể chuyển hướng về trang gốc cần SEO của mình:

Cách 1: Sử dụng mã nguồn web

- Sử dụng mã nguồn kịch bản phía máy chủ. Tùy thuộc theo công nghệ PHP, .NET, Java mà sử dụng câu lệnh thích hợp.
Ví dụ, trong PHP:
Chuyển hướng 301 sử dụng ngôn ngữ kịch bản PHP
- Sử dụng mã nguồn kịch bản phía máy khách Javascript:
Chuyển hướng sang trang mới sử dụng Javascript

Cách 2: Thông qua cấu hình máy chủ server

Dựa vào công nghệ máy chủ web để cấu hình điều hướng chuyển hướng 301. Ví dụ, trên máy chủ Apache chạy mã nguồn PHP có thể cấu hình tập tin .htaccess như sau:
- Chuyển từ không có www sang có www:
Chuyển hướng từ không có www sang có www
- Chuyển hướng vĩnh viễn sang tên miền mới:
Chuyển hướng vĩnh viễn sang tên miền mới

Cách 3: Thông qua cấu hình Cpanel hosting

Trên một số CPanel các đơn vị cung cấp hosting cho phép chuyển hướng trang:
Cấu hình chuyển hướng tên miền trên Cpanel Hosting
 

Cách 4: Thông qua cấu hình domain

Thông qua việc cấu hình URL Redirect trong trang quản lý tên miền cũng giúp bạn chuyển hướng từ tên miền này sang tên miền khác.
 

Nén nội dung trước khi gửi đến trình duyệt (ENABLE GZIP COMPRESSION)

Sử dụng Gzip Compression sẽ giúp bạn giảm kích cỡ nội dung bằng thuật toán nén của Gzip. Việc này hết sức quan trọng và hữu ích vì nó có những lợi ích sau :
- Giúp website của bạn nhanh hơn vì giảm dung lượng truyền tải giữa browser và server
- Giúp bạn tiết kiệm băng thông của hệ thống Internet nói chung và server + người dùng nói riêng
Gzip hoạt động hiệu quả với những nội dung text như mã HTML, Javascript, CSS, JSON, XML,… và có thể giúp bạn giảm đến 90% kích cỡ của nội dung.
Đối với các kiểu nội dung như video, hình ảnh, audio,… thì bạn không nên sử dụng Gzip vì bạn sẽ tốn nhiều tài nguyên CPU + RAM của Server chỉ để giảm 1% đến 2% kích cỡ của nội dung (không hiệu quả).
- Dưới đây mã nén GZIP được viết trong tập tin .htaccess mã nguồn PHP:
Cách 1:
Cách nén GZIP 1
Cách 2:
Cách nén GZIP 2

Sử dụng bộ nhớ đệm trên trình duyệt (LEVERAGE BROWSER CACHING)

Hầu hết các trình duyệt đều hỗ trợ cache để lưu trữ những nội dung ít thay đổi như hình ảnh (image), javascript (.js), CSS (.css), Video + Audio,….
Theo cách này, nếu Server gửi 1 chỉ thị đến trình duyệt trong phần header để nói trình duyệt biết là nội dung này sẽ không thay đổi trong 1 khoảng thời gian nào đó, thì trình duyệt sẽ không cần phải gửi truy vấn đến Server để lấy các nội dung này mà sẽ sử dụng luôn dữ liệu đã lưu trong bộ nhớ đệm của trình duyệt (cache).
- Dưới đây là mã khai báo sử dụng cache trình duyệt trong tập tin .htaccess mã nguồn PHP:
Nén cache trình duyệt

Rút gọn mã nguồn HTML, CSS, JS (MINIFY HTML, MINIFY CSS, MINIFY JAVASCRIPT)

Thời gian truy cập trang web càng nhanh, độ thân thiện với người dùng càng tốt. Kích thước tập tin càng nhỏ, số lượng tập tin yêu cầu để hiển thị web site càng thấp càng tốt. Vì vậy, cần phải tối ưu dung lượng các tập tin mã nguồn:
- Số lượng tập tin mã nguồn càng ít càng tốt. Để làm được việc này cần kết hợp các tập tin CSS, JS thành các tập tin duy nhất.
- Dung lượng các tập tin mã nguồn càng thấp càng tốt. Để làm được điều này cần xóa tất cả các khoảng trằng giữa các dòng; loại bỏ các ghi chú trong các tập tin; đưa tất cả các dòng tập tin thành một dòng duy nhất. Dung lượng mỗi tập tin dưới 750KB là tốt.
- Trên mỗi trang web chỉ nên yêu cầu tham chiếu tới 2-3 tập tin CSS khác, 3-4 tập tin JS khác.
- Tránh sử dụng những phần tử từ bên thứ ba nếu không thực sự cần thiết, như các yêu cầu từ bên ngoài trong các nút chia sẻ Google, Facebook, Twitter...

Giảm thời gian phản hồi máy chủ (MAIN RESOURCE SERVER RESPONSIVE TIME)

Theo tiêu chuẩn của Google thì thời gian này của website phải dưới 200 ms (miliseconds), nếu website của bạn trên 200 ms thì cần phải tìm cách tối ưu để dưới 200 ms
Việc tối ưu Server Response Time là một công việc đòi hỏi rất nhiều công sức và chất xám, nó liên quan đến tối ưu Database (MySQL), tối ưu PHP, tối ưu Apache (Nginx), Phần cứng VPS/Server (CPU, RAM, HDD),… .
Tránh sử dụng các hosting  có máy chủ chậm, tránh sử dụng các mã nguồn quản trị nội dung CMS hoặc blog mà không có bộ nhớ đệm.

Tối ưu hóa hình ảnh

Tất cả các hình ảnh sử dụng trên trang web có độ phân giải 72, kích thước phù hợp màn hình. Không sử dụng hình ảnh trong suốt, không sử dụng hình ảnh với kích thước quá nhỉ. Dung lượng mỗi hình ảnh dưới 500KB là tốt. Không sử dụng hình ảnh lấy từ website khác.
Đường dẫn tập tin, đặt dễ hiểu, có ý nghĩa, không dấu, các chữ được ngăn cách bởi dấu (-).

Tập tin chặn

Xóa Javascript chặn hiển thị

     Trước khi trình duyệt hiển thị nội dung cho một trang, nó phân tích các node trên trang HTML theo mô hình DOM. Trong quá trình này, khi gặp phải những kịch bản Javascript nó phải dừng lại để thực hiện sau đó mới phân tích các node phía sau. Đặc biệt nếu sử dụng các tập tin JS từ bên ngoài, thì nó buộc phải mất thêm thời gian chờ tải xong tập tin JS về trước khi xem xét nó. Do đó, nó sẽ trì hoãn thời gian để hiển thị trang. Vì vậy, khi viết một trang web nên hạn chế sử dụng Javascript nếu không thực sự cần thiết.
     Trong trường hợp bắt buộc sử dụng, nên chờ cho trang hiển thị xong mới thực hiện các kịch bản Javascript, nên có 2 cách để gỡ bỏ chặn Javascript:
1. Trong trường hợp đặt trong thẻ head của tài liệu HTML nên đặt thêm thuộc tính async để khởi động cơ chế tải không đồng bộ. Khi đó, khi toàn bộ mã nguồn HTML phân tích xong và hiển thị, thì nội dung các tập tin JS mới bắt đầu được tải và thực thi. Ví dụ:
Tối ưu JS ở phần head
2. Do mã nguồn HTML thực thi theo tuần tự từ trên xuống dưới nên các tập tin và mã nguồn JS đặt ở trước thẻ đóng body của tài liệu HTML.
Ví dụ:
Tối ưu hóa js ở cuối trang HTML
     Lưu ý: trong một số trường hợp, do đòi hỏi mã JS phải thực thi ngay lập tức nên nó đòi hỏi phải tải tập tin JS trước. Vì vậy trong một số trường hợp, một số tập tin JS cần phải yêu cầu đặt đúng vị trí thích hợp.

Tối ưu hóa phân phối CSS

Cũng giống như Javascript, trước khi trình duyệt hiển thị giao diện trang web, nó phải xử lý tất cả các định dạng style và thông tin bố cục cho trang. Do đó, trình duyệt sẽ mất thời gian xử lý trước khi hiển thị trang. Để tránh trường hợp này có thể thực hiện theo 2 cách:
1. Sử dụng CSS viết trong thẻ style. Để dễ quản lý code, việc thực hiện như thế này là hạn chế, nếu số định dạng nhiều; trên thực tế nên hạn chế viết CSS và JS vào trực tiếp tập tin HTML mà nên tách ra tập tin riêng biệt. Ví dụ:
Tối ưu hóa CSS trong HTML
2. Sử dụng Javascript ở cuối thẻ đóng body để viết thêm mã tải tập tin CSS vào. Trường hợp này có hạn chế là khi trang web hiển thị chưa có định dạng làm mất thẩm mỹ website, để lại ấn tượng không tốt cho người xem. Ví dụ:
Tối ưu hóa CSS sử dụng Ajax
8. Tập tin bên ngoài:
Trong một trang web ngoài hình ảnh, để duy trì tốc độ tải và hiển thị trang; nên hạn chế hay tốt nhất là không sử dụng các tập tin bên ngoài tải vào như frame, iframe, flash, canvas... Do đó, trong trang web, không nên sử dụng các phần tử nội dung nhúng sau đây: canvas, math, svg, audio, video, object, embed, frame.
9. Tối ưu phiên bản di động:
Ngày 10/01/2016, Google thông báo bắt đầu giảm thứ hạng những website hiển thị không tốt trên các thiết bị di động. Yêu cầu một trang web tương thích với phiên bản di động
- Thiết kế giao diện website responsive tương thích với mọi kích thước màn hình.
- Không sử dụng Flash, Popup; không sử dụng font chữ quá nhỏ. Sử dụng font chữ cơ sở là 16px; và chiều cao của dòng line-height: 1,2 em.
- Giao diện web nhìn phù hợp màn hình thiết bị; các nút và liên kết phải đủ lớn; ít nhất khoảng 32 – 48 px cả về chiều rộng và chiều cao để người dùng có thể bấm vào.
Ba cách thức để Google Bot trỏ tới phiên bản di động của website:
- Sử dụng thẻ đánh dấu HTML để xác định giao diện thiết kế responsive.
Sử dụng viewport
- Sử dụng thẻ đánh dấu HTML để xác định đường dẫn thay thế hiển thị trên thiết bị di động.
Sử dụng Alternate
- Sử dụng tiêu để HTTP Vary: User-Agent để lựa chọn phiên bản khác nhau cho cùng một đường dẫn trên thiết bị di động.
Trong 3 cách thức trên, chỉ được áp dụng một cách thức; ngoài ra Google cũng đáp ứng cách thức khác phù hợp. Trong trường hợp phiên bản di động và phiên bản desktop sử dụng URL khác nhau, khi đó sử dụng thẻ meta canonical để trỏ về đường dẫn trên phiên bản desktop
Sử dụng canonical

Tối ưu AMP (Accelerated Mobile Pages – Tăng tốc trang trên thiết bị di động)

Được Google công bố ngày 24/02/2016, là một bộ API mới của Google nhằm cho các trang web tải nhanh và có giao diện đẹp trên thiết bị di động, thậm chí khi mạng internet kết nối chậm. Tuy nhiên hình thức tối ưu này hiện nay không được phổ biến do những hạn chế của nó trong việc code hình ảnh, thư viện javascript và css từ tập tin ngoài phạm vi cho phép bởi Google. Google được cấu tạo từ 3 thành phần chính: AMP HTML, AMP CSS, Google AMP Cache dựa trên mã nguồn mở, được tối ưu hóa tốc độ tải trang và hiển thị phù hợp với màn hình di động.

Khai báo thư viện JS trong AMP dùng để sử dụng frame
Cài đặt cơ bản phần head Cài đặt cơ bản phần body
Tối ưu phần head AMP - Tối ưu hóa hình ảnh: thay đổi tất cả các thẻ img html thành thẻ amp-img và phải đặt thuộc tính width và height.
Tối ưu hình ảnh trong amp
- Tối ưu video:
Tối ưu video trong AMP
- Tối ưu bộ định kiểu CSS: trong amp, tất cả những bộ định kiểu từ tập tin bên ngoài là không được phép (ngoại trừ các font chữ tùy chỉnh). Ngoài ra không được sử dụng những phép đo hiệu suất như (!important); thuộc tính style của phần tử cũng không được phép. Tên lớp không sử dụng cụm từ -amp- hoặc i-amp. Vì lý do bảo mật cũng không sử dụng những thuộc tính CSS kiểu như behavior, -moz-, binding. Cho phép sử dụng các thuộc tính transition, @keyframes{…}. Tất cả các bộ định kiểu phải được viết trong phần head của tài liệu HTML và được đặt trong cặp thẻ:
Tối ưu bộ định kiểu CSS trong AMP
- Những font chữ được phép sử dụng trong AMP có nguồn từ các trang:
Typography.com: https://cloud.typography.com
Fonts.com: https://fast.fonts.net
Google Fonts: https://fonts.googleapis.com
Font Awesome: https://maxcdn.bootstrapcdn.com
- Sử dụng frame:
Khai báo thư viện js trong thẻ head. Đặt vị trí frame vào trong thẻ body
Tối ưu frame trong tài liệu HTML trong AMP
:
Để xem trước và xác thực định dạng AMP có hoạt động tốt hay không có thể kiểm tra qua việc mở trình duyệt, điền url trang web cộng thêm #development=1, mở chế độ Console của Chrome, cuối cùng tải trang web để xem kết quả.