JS SEO: Cách tối ưu hóa JavaScript để có thứ hạng cao trong kết quả tìm kiếm

JavaScript là một ngôn ngữ kịch bản được phát triển bởi Sun Microsystems. JavaScript hiện là một ngôn ngữ lập trình tiêu chuẩn được sử dụng trong các trình duyệt web để tạo các trang web tương tác. JavaScript được sử dụng phổ biến nhất để thêm tính tương tác cho các trang web. Nó thường được nhúng trong các tài liệu HTML để cung cấp hành vi động, chẳng hạn như thay đổi nội dung (ví dụ: văn bản) hiển thị trên trang web dựa trên hành động của người dùng.

Phiên bản đầu tiên của JavaScript được phát hành vào năm 1995 và được đặt tên là LiveScript. Năm 1997 Netscape đã giới thiệu việc triển khai JavaScript của riêng mình được gọi là JavaScript 1.0. Kể từ đó, JavaScript đã được chấp nhận rộng rãi và hiện là một tiêu chuẩn thực tế cho kịch bản phía máy khách.

SEO là một phần quan trọng của bất kỳ trang web nào và bạn nên tối ưu hóa JavaScript của mình để có thứ hạng cao trong kết quả tìm kiếm. Bạn có thể làm điều này bằng cách giảm thiểu JavaScript của mình, trì hoãn việc tải nó, giảm số lượng yêu cầu HTTP, xóa các thẻ script không cần thiết khỏi trang (và khỏi các tệp riêng lẻ) và hợp nhất các tệp thành một tệp nếu chúng đủ nhỏ để làm như vậy, và nhiều hơn nữa.

Giảm thiểu JS và CSS.

Giảm thiểu JS và CSS của bạn là một cách tốt để loại bỏ những byte thừa đó. Điều này có thể được thực hiện với một trình thu nhỏ, sẽ loại bỏ các ký tự không cần thiết khỏi mã nguồn của bạn mà không ảnh hưởng đến chức năng của nó.

Quá trình thu nhỏ hoạt động bằng cách loại bỏ khoảng trắng và chú thích, cũng như rút ngắn tên biến nếu có thể. Ví dụ:

 var $div = document.getElementById("myDiv");

 var v_d__e___ = document .getElementById( "m_i_d" );

Điều quan trọng cần lưu ý là quá trình này không thay đổi chức năng của mã của bạn; trên thực tế, bạn vẫn có thể chạy phiên bản này thông qua một trình thông dịch nếu nó cần thiết (mặc dù chúng tôi không khuyến khích nó).

Trì hoãn tải JavaScript

Trong mã HTML, bạn có thể sử dụng thuộc tính trì hoãn của thẻ để yêu cầu trình duyệt tải tập lệnh của bạn một cách không đồng bộ. Điều này hữu ích cho các tập lệnh không quan trọng đối với việc hiển thị ban đầu của một trang, nhưng thay vì nâng cao nó với các chức năng và tính năng bổ sung.

Việc trì hoãn các tập lệnh này cho phép chúng được tải ngoài mức ưu tiên tải xuống thông thường, vì vậy chúng không chặn nội dung hiển thị ngay lập tức. Tuy nhiên, nếu bạn thử sử dụng phương pháp này cho các tập lệnh chính cần tất cả chức năng của chúng ngay lập tức — chẳng hạn như menu điều hướng chính của trang web — thì nó sẽ không hoạt động bình thường vì những tập lệnh đó yêu cầu thời gian tải nhanh.

Nhược điểm của việc trì hoãn triển khai là nó không được hỗ trợ bởi tất cả các trình duyệt; nó chỉ hoạt động trong Firefox 3+ (và mới hơn), Internet Explorer 10+ (và mới hơn), Safari 5+ và Chrome 14+.

Giảm số lượng yêu cầu HTTP

Một cách để giảm số lượng yêu cầu HTTP là kết hợp tất cả các tệp CSS và JavaScript của bạn thành một tệp. Nếu bạn có nhiều hơn một vài dòng mã, điều này có thể giúp ích rất nhiều trong việc giảm trọng lượng trang của bạn. Tuy nhiên, nếu bạn có nhiều tệp nhỏ, việc kết hợp chúng thành một tệp lớn có thể không phải là một lựa chọn cho bạn vì sẽ cần thêm thời gian để trình duyệt của người dùng tải xuống tất cả cùng một lúc.

Loại bỏ JavaScript, CSS và HTML không cần thiết

May mắn thay, bạn không cần phải là một lập trình viên bậc thầy để tối ưu hóa JavaScript của mình cho tìm kiếm. Bạn chỉ cần tuân theo một số quy tắc đơn giản:

1. Loại bỏ CSS không sử dụng.
2. Loại bỏ HTML không sử dụng.
3. Loại bỏ JavaScript không sử dụng.
4. Xóa các nhận xét và khoảng trắng không cần thiết khỏi mã (ví dụ: “//” hoặc “/ * * /”).
5. Xóa các dấu ngắt dòng, dấu chấm phẩy, dấu ngoặc đơn, dấu ngoặc nhọn và dấu phẩy không cần thiết trong tệp JavaScript để chúng không phá vỡ bất kỳ thứ gì khác trong dự án của bạn khi nó được thu gọn bằng các công cụ như Google Closure Compiler hoặc UglifyJS 2 trên máy chủ xây dựng như máy chủ Jenkins CI hoặc TravisCI máy chủ / v.v.…

Hợp nhất các tập tin.

Bạn nên hợp nhất các tệp JavaScript của bạn thành một tệp duy nhất. Điều này có thể được thực hiện với một hệ thống xây dựng như Grunt hoặc Gulp, cho phép bạn sử dụng các chức năng như nối và thu nhỏ. Nếu bạn không muốn tìm hiểu về hệ thống xây dựng, có nhiều dịch vụ sẽ tự động làm việc này cho bạn.

Một trong những cách dễ nhất là sử dụng Cloudflare (gói miễn phí có sẵn). Chỉ cần tải lên tất cả các tệp của bạn thông qua giao diện của chúng, sau đó sử dụng tùy chọn "thu nhỏ" trong tab Cài đặt của chúng.

Họ sẽ cung cấp cho bạn một URL tùy chỉnh cho mỗi tệp trên máy chủ của họ, sau đó sẽ thu nhỏ tất cả các tệp đó trước khi gửi chúng trở lại trình duyệt của khách truy cập của bạn. Điều này giúp họ nhanh hơn nhiều vì họ chỉ có một yêu cầu từ Cloudflare thay vì nhiều yêu cầu từ các miền khác nhau trên web.

Một tùy chọn khác là JSPACK (trả phí), tương tự nhưng cung cấp nhiều chức năng hơn và kiểm soát chính xác lượng mã được nén / xóa để đạt được kết quả hiệu suất tối ưu hóa tốt hơn so với các công cụ nén khác sẽ cung cấp theo mặc định do các nhu cầu được nhắm mục tiêu cụ thể trong các tình huống cụ thể. một số ứng dụng có thể yêu cầu quyền truy cập các phần dữ liệu nhất định chứa trong các tệp JavaScript nằm trong cấu trúc thư mục được chỉ định nằm ở một nơi khác hoàn toàn trên internet ...

Ngoài ra, một biểu trưng tùy chỉnh và đồ họa tùy chỉnh có thể được tạo và đặt trong trang web / ứng dụng HTML5 của bạn để mang lại cho nó một chút thú vị đảm bảo mọi người sẽ nhớ đến bạn.

Tiêu đề và Mô tả!

Các trang được viết bằng JavaScript cần có nhiều thẻ meta SEO giống như các trang được viết bằng HTML và CSS. Cả tiêu đề và mô tả đều là những thành phần thiết yếu của chiến lược SEO hiệu quả cho thẻ meta.

Các trình duyệt web sẽ hiển thị phần tử meta SEO tiêu đề và các công cụ tìm kiếm thường sẽ sử dụng thông tin này để tạo tiêu đề cho các trang mà chúng đã lập chỉ mục. Mặc dù nó không được hiển thị trong trình duyệt web, phần tử meta SEO mô tả có thể được sử dụng bởi các công cụ tìm kiếm để tạo các đoạn văn bản hoặc mô tả cho các trang đã được lập chỉ mục.

Không có vấn đề gì với việc xác định tiêu đề và mô tả thẻ meta SEO bằng JavaScript vì nó là một phương pháp hoàn toàn hợp lệ.

Theo Google, thậm chí có thể sử dụng JavaScript để sửa đổi cả hai thẻ meta SEO này. Điểm mấu chốt là meta SEO tiêu đề và mô tả nên được đưa vào mỗi và mọi trang, kể cả những trang được viết chủ yếu bằng JavaScript.

Loại bỏ các kiểu mã hóa đầu tiên bằng dấu phẩy và những thứ tương tự.

Đầu tiên, hãy giải quyết vấn đề này: Vui lòng dừng các kiểu mã hóa đầu tiên bằng dấu phẩy. Chúng là một di tích từ ngày xưa khi bạn có thể sử dụng dấu phẩy trong JavaScript để xếp hàng các khai báo biến và danh sách tham số. Điều này không còn hiệu lực nữa, và lẽ ra nó không bao giờ hợp pháp ngay từ đầu!

Vì vậy, làm thế nào để bạn biết nếu mã của bạn đang sử dụng phong cách này? Rất dễ nhận biết: Chỉ cần tìm nhiều câu lệnh trên cùng một dòng được phân tách bằng dấu phẩy (hoặc khoảng trống). Xem ví dụ bên dưới:

 var x = 1; var y = 2; var z = 3;

Nếu JavaScript của bạn trông giống như thế này — hoặc tệ hơn, nếu nó có các dòng trống ở giữa mỗi câu lệnh — thì nó cần phải làm việc nghiêm túc! May mắn thay, việc khắc phục những vấn đề này không quá khó khi bạn biết chúng là gì và tìm chúng ở đâu.

Tải JavaScript từ cuối nội dung (hoặc chân trang).

Hãy nhớ rằng JavaScript phải được tải từ cuối nội dung (hoặc chân trang) và CSS từ trên cùng.

Điều này là do các công cụ tìm kiếm sẽ thu thập dữ liệu các trang web của bạn bằng cách bắt đầu từ trên cùng và làm việc theo cách của chúng, vì vậy họ có xu hướng bỏ qua bất kỳ thứ gì họ thấy sau khi họ truy cập vào thứ gì đó như tệp JavaScript hoặc CSS.

Bạn không phải lo lắng về điều này nếu bạn đang sử dụng các kỹ thuật tải không đồng bộ như Ajax hoặc các tập lệnh trì hoãn vì các phương pháp này tải các tệp song song nhưng vẫn cho phép lập chỉ mục.

Đặt CSS ở trên cùng và JavaScript ở dưới cùng.

Một trong những cách dễ nhất để tối ưu hóa trang của bạn cho các công cụ tìm kiếm là đặt CSS ở trên cùng và JavaScript ở dưới cùng. Điều này là do các trình duyệt sẽ tải CSS trước JavaScript. Để thực hiện việc này, bạn có thể thêm một thẻ vào tệp chỉ mục trỏ đến biểu định kiểu của bạn và sau đó thêm một thẻ khác tham chiếu đến tệp JavaScript của bạn.

Lý do tại sao điều này quan trọng là nếu ai đó đã tắt JS trên trình duyệt của họ, họ sẽ không thể sử dụng trang web trừ khi nó được mã hóa đúng cách — có nghĩa là đặt CSS lên hàng đầu!

Nén các thành phần bằng gzip.

Gzip là một thuật toán nén làm giảm kích thước của tệp. Nó có thể được sử dụng trong cả JavaScript và CSS, vì vậy bạn có thể sử dụng nó cho tất cả các thành phần bạn đang sử dụng.

Bạn cần nén mã của mình trước khi tải lên CDN hoặc nhà cung cấp dịch vụ lưu trữ. Giảm gzip có nghĩa là bạn sẽ không phải tải xuống nhiều byte hơn những gì cần thiết khi người dùng truy cập trang của bạn.

Hỗ trợ Gzip có sẵn trong tất cả các trình duyệt hiện đại, vì vậy bạn nên thêm gzip ở cả hai đầu: phía trình duyệt và phía máy chủ (NodeJS).

Để nén nội dung của bạn, bạn cần sử dụng tính năng nén dựa trên gzip. Bạn có thể sử dụng công cụ này để kiểm tra xem các tệp đã được nén chính xác hay chưa.

Tránh các biểu thức CSS.

Biểu thức CSS là một tính năng được giới thiệu trong CSS3 cho phép bạn sử dụng JavaScript trong các biểu định kiểu của mình. Bạn có thể sử dụng chúng để thay đổi động giá trị của thuộc tính hoặc thậm chí lặp qua một mảng giá trị.

Nhưng đây là lý do tại sao bạn không nên sử dụng các biểu thức CSS: chúng khó tối ưu hóa và khiến trình duyệt khó lưu trữ biểu định kiểu của bạn hơn (điều này thật tệ). Hơn nữa, chúng có thể gây ra hành vi không mong muốn trên các trình duyệt cũ hơn không hỗ trợ chúng. Vì vậy, hãy tránh sử dụng chúng bằng mọi giá!

Từ cuối cùng

Sử dụng JavaScript theo cách tối ưu hóa tìm kiếm là một cách tuyệt vời để xếp hạng cao trong kết quả tìm kiếm. Tuy nhiên, điều quan trọng cần nhớ là không phải tất cả người dùng đều bật JavaScript hoặc có cùng một lượng băng thông khi duyệt trang web của bạn.

Những hạn chế này có thể ảnh hưởng đến hiệu quả hoạt động của trang web trong xếp hạng tìm kiếm nếu chúng không được tính đến khi tối ưu hóa nội dung JavaScript cho mục đích SEO giống như bất kỳ loại nội dung nào khác trên trang web của bạn sẽ được thuật toán của Google xử lý.