Cải thiện hiệu năng của website để bảo vệ hành tinh

Bài đăng này đã không được cập nhật trong 4 năm

Chúng ta thường không để ý rằng Internet sử dụng một lượng lớn điện năng. Lượng điện này cần được sản xuất ở đâu đó. Tại hầu hết các quốc gia, điều này đồng nghĩa với việc đốt cháy các nhiên liệu hóa thạch. Hệ quả là mức sản sinh carbon do Internet phát triển đến một ngưỡng ngang bằng với độ ô nhiễm của ngành du lịch hàng không toàn cầu. Điều này khiến Internet trở thành cỗ máy đốt than lớn nhất hành tinh.

Theo Mozilla Internet Health Report 2018 có tuyên bố rằng - đặc biệt khi Internet mở rộng thành một lĩnh vực mới - "khả năng duy trì bền vững sẽ có độ ưu tiên lớn hơn". Nhưng hiện tại, các websites lại đang trở nên cồng kềnh hơn, đồng nghĩa với việc tiêu thụ điện năng của Internet tiếp tục phát triển theo cấp số nhân.

Trong khi đó, những ảnh hưởng của thay đổi khí hậu ngày càng nhiều và tiêu cực hơn mỗi năm. Đại đa số các nhà khoa học đều cho rằng chính hoạt động của con người đã làm gia tăng độ thảm khốc và tần suất các thiên tai trên toàn thế giới. Dù vẫn có hoài nghi nào đó về khoa học, những công ty dầu mỏ lớn nhất thế giới cũng phải chấp thuận việc này và thừa nhận rằng các mô hình khinh doanh của họ cần phải thay đổi.

Mọi quốc gia trên thế giới (ngoại trừ Mỹ), đều đã đăng ký cam kết vào Hiệp định thay đổi khí hậu Paris. Mặc dù, trường hợp của Hoa Kỳ gây tranh cãi, nhưng nhiều cá nhân, thành phố, tiểu bang và công ty có ảnh hưởng nhất nước Mỹ - đại diện cho hơn một nửa dân số và kinh tế Hoa Kỳ, vẫn duy trì cam kết với thỏa thuận này bằng sáng kiến America's Pledge

Với vị trí là những nhà phát triển web, dễ hiểu khi cảm thấy đây không phải là vấn đề mà chúng ta có ảnh hưởng tới. Tuy nhiên điều này là chưa đúng. Nhiều nỗ lực đang tiến triển để cải thiện tình trạng này trên web. The Green Web Foundation đang duy trì một cơ sở dữ liệu về những quản trị web được tài trợ hoàn toàn bằng năng lượng tái tạo hoặc ít nhất thỏa thuận không sử dụng carbon. Năm 2013, A List Apart xuất bản cuốn Sustainable Web Design (Thiết kế web một cách bền vững) bởi James Chrisite. Trong suốt ba năm qua, ở hội nghị SustainableUX đã chứng kiến những chuyên gia về tính bền vững của web chia sẻ các kiến thức qua một loạt quy tắc dựa trên web.

Kể từ năm 2009, Greenpeace đã gây áp lực nên các công ty Internet lớn giải quyết vấn đề năng lượng bằng chiến dịch Clicking Clean. Nằm trong một phần kết quả của chiến dịch này, Google đã tuyên bố năm ngoái, lần đầu tiên họ đã mua đủ năng lượng tái tạo cho toàn bộ các hoạt động điều hành của công ty trên toàn cầu.

Vậy, ngoài việc cung cấp điện năng cho các server bằng năng lượng tái tạo, những nhà phát triển web còn có thể làm gì khác đối với vấn đề thay đổi khí hậu?

"Bạn không thể kiểm soát những thứ bạn không đo đếm được"

Có lẽ thành công lớn nhất khi khiến các website bền vững hơn là hiệu năng, trải nghiệm người dùng và tính bền vững được cân đối hài hòa nhất. Số liệu chính để đo lường tính bền vững của một sản phẩm số là mức tiêu thụ năng lượng của nó. Điều này bao gồm các xử lý được thực hiện ở máy chủ, máy khánh và các mạng truyền thông trung gian truyền dữ liệu giữa hai bên.

Với tư tưởng này, có lẽ điều đầu tiên cần xem xét là làm thế nào để chúng ta đô lường được mức độ sử dụng năng lượng của trang web? Đây thực sự là một công việc khó khăn hơn bạn tưởng và rất khó để có được dữ liệu chính xác ở đây. Tuy nhiên, có một số dự phòng ổn để mô tả việc sử dụng năng lượng. Chúng bao gồm việc truyền tải dữ liệu (nghĩa là trang web cần tải xuống bao nhiêu dữ liệu để hiển thị trang web) và mức độ sử dụng tài nguyên phần cứng phục vụ cho việc cung cấp và nhận trang web. Một số liệu rõ ràng ở đây là mức độ sử dụng CPU, nhưng việc sử dụng bộ nhớ và các hình thức lưu trữ khác cũng đóng vai trò nhất định.

Việc truyền tải dữ liệu là một điều mà chúng ta có thể đo lường khá dễ dàng. Tất cả các trình duyệt phổ biến hiện nay đều cung cấp cá công cụ dành cho lập trình viên đo lường hoạt động về mạng. Ví dụ, trong ảnh chụp bên dưới, chúng ta có thể thấy rằng việc tải trang Smashing Magazine ở lần đầu tiên phát sinh chỉ dưới một megabyte truyền tải dữ liệu. Firefox's developer tools thực ra cung cấp hai số liệu: đầu tiên là kích thước chưa nén của files được truyền tải và sau là kích thước đã được nén.

Công cụ phổ biến nhất cho việc nén tài nguyên khi truyền tải qua mạng là gzip, vì vậy sự khác nhau giữa hai số liệu trên thường là kết quả của gzip. Số liệu thứ hai biểu thị dữ liệu thực sự được truyền đi và là số liệu cần quan tâm.

Note: Có rất nhiều công cụ khác cung cấp số liệu truyền tải dữ liệu, bao gồm cả công cụ tin cậy hơn cả WebPagetest

Để đo mức độ sử dụng CPU, Chrome cung cấp một trình quản lý tác vụ chi tiết, hiển thị dung lượng bộ nhớ, mức độ sử dụng CPU và hoạt động mạng của các tab riêng lẻ. Đối với những người thích khám phá/kỹ thuật hơn, lệnh top cung cấp các số liệu tương tự trên hầu hết các hệ điều hành nhân Unix như MacOS hay Ubuntu. Nói chung, chúng ta có thể chạy lệnh top trên bất cứ server nào mà chúng ta có quyền truy cập.

May mắn thay, có những nỗ lực như WebsiteCarbon và Ecograder tìm cách dịch các số liệu này thành một con số sản sinh CO2 cụ thể (trong trường hợp của WebsiteCarbon) hay một điểm số (đối với Ecograder)

Thiết kế web bền vững

Chúng ta đã biết cách để đo mức độ ảnh hưởng của website, giờ là lúc để nghĩ về việc làm thế nào để tối ưu hóa site trở nên bền vững hơn, hiệu quả hơn, và nói chung là trải nghiệm sử dụng tốt hơn.

Có một vài tư liệu có thể được dùng trong trường hợp này. Năm 2016, O'Reilly phát hành Designing For Sustainability bởi Tim Frick. Trong cuốn sách này, Tim đã đưa người đọc vào một cuộc hành trình về việc tại sao và như thế nào khi thiết kế bền vững. Nhưng chúng ta cũng có thể rút ra nhiều ý tưởng, các cuộc thảo luận và bài viết - mặc dù không tập trung rõ ràng vào tính bền vững - có sự trùng hợp rất lớn tới triết lý thiế kế web bền vững. Những ví dụ điển hình có thể kể đến là dự án phụ của Brad Frost, Death To BullShit, những bài viết và thảo luận về việc giảm thiểu những đoạn code dở tệ (https://vimeo.com/190834530) của Heydon Pickering và bài blog của Adam Silver, Designing For Actual Performance

Nếu có ý định thiết kế lại website hay bắt đầu một trang mới từ đầu, chúng ta có thể bắt đầu với những câu hỏi thực sự ở mức độ cao. Ví dụ, những gì thực sự xứng đáng hoặc cần được hiển thị trên trang chủ? Và cụ thể hơn, mỗi thành phần trên mang lại giá trị gì cho trang chủ? Như Heydon Pickering có đề cập:

Tính năng hiệu quả, có khả năng truy cập và dễ bảo trì nhất của một website là tính năng không được tạo từ lúc đầu.

Giảm thiểu network requests

Network requests là thứ có thể dễ dàng đo đếm nên đây sẽ là vấn đề phù hợp để bắt đầu. Có những request không cần thiết tại website mà chúng ta có thể loại bỏ bằng cách trả lời những câu hỏi ví dụ sau:

Chúng ta có đang load cả thư viện Jquery cho một vài tác vụ DOM đơn giản?

Chúng ta có thể thực hiện cùng một kết quả với Javascript thuần Could we achieve the same ends with pure JavaScript?. Hoặc nâng cao hơn về việc loại bỏ code chết trong bài post cho Google bởi Jeremy Wagner.
Chúng ta có một chuỗi (carousel) hình ảnh hay không ?

Chúng ta có thực sự cần tất cả những ảnh đó hay không? Chúng có cải thiện trải nghiệm người dùng đáng kể? Hay chúng ta có thể giảm thiểu về một ảnh? Hay hiển thị ngẫu nhiên để đưa đến cảm giác động cho người dùng? Có nghiên cứu còn chỉ ra rằng hầu hết người dùng không thích hoặc không muốn dính líu tới carousels.
Nếu chúng ta sử dụng nhiều ảnh, chúng ta sẽ nhận được lợi ích gì từ việc cung cấp ảnh sử dụng định dạng WebP đối với những trình duyệt có hỗ trợ?

Trong một thời gian, sự hỗ trợ đối với WebP bị giới hạn đáng kể. Nhưng từ tháng 1 năm 2019, Firefox đã bắt đầu hỗ trợ từ phiên bản 65. Chỉ còn là vấn đề thời gian trước khi các trình duyệt khác như Safari cũng hỗ trợ.
Chúng ta có đang load hàng trăm kilobytes web fonts?

Có phải tất cả các fonts đã load đều được sử dụng? Có cần web fonts hay không? Hầu hết các thiết bị ngày nay đề có một số font tích hợp sẵn, chúng ta có thể chỉ xác định một danh sách theo thứ tự mong muốn? Nếu buộc phải sử dụng web fonts, hãy đảm bảo những fonts này được sử dụng hiệu quả
Chúng ta có đang nhúng Youtube videos?

Một video nhúng từ Youtube có thêm hàng megabyte vào việc truyền tải dữ liệu trước khi ai đó có thể tương tác với video. Nếu chỉ có một bộ phận người dùng thực sự ngồi xuống và xem video nhúng ở website, chúng ta có thể chỉ đơn giản tạo đường link đến video đó hay không?

Xem xét mọi thứ

Theo hướng này, chúng ta cũng có thể thẩm định mọi khía cạnh của trang web. Điều gì thực sự xứng đáng để được ở đó? Sidebar có mang lại giá trị thực sự, hay chúng ta chỉ đặt nó ở đó vì quy ước rằng các trang web thì đều có sidebar? Vì vậy, chúng ta đã thêm một sidebar và lấp đầy nó bằng những thứ không cần thiết.

Viết CSS thật cân nhắc và tỉ mỉ

Khi nói đến nâng cao hiệu năng một cách nghiêm túc, chúng ta nên nhớ rằng mọi ký tự trong code đều được tính. Mỗi ký tự đại diện cho một byte và ngay cả sau khi chúng được nén bởi gzip thì vẫn chiếm một trọng lượng nhất định. CSS là một thứ mà chúng ta thường thấy sự cồng kềnh. May thay, ngày càng có nhiều công cụ có độ phức tạp cao, giúp loại bỏ những đoạn CSS không được sử dụng. Bài post bởi Sarah Dayon chỉ ra cách cô ấy đã giảm CSS bundle từ 259KB xuống 9KB.

Nếu làm mới từ đầu, có lẽ chúng ta nên nghĩ sâu hơn về cách viết CSS ngay từ đầu. Heydon Pickering đã viết một bài post rất hay về cách viết CSS để phát huy sức mạnh về cú pháp được thiết kế và cách để giúp lập trình viên không bị lặp lại. Heydon cũng chỉ ra sự lãng phí khi sử dụng quá nhiều thẻ div và class không cần thiết, trong cả HTML và CSS.

Chúng ta đang phân tích điều gì?

Dường như mọi người ít nhiều đã biết về các công cụ phân tích lượng người truy cập thông qua các công cụ như Google Analytics,.. Tuy nhiên, liệu tích hợp những bộ phân tích này liệu có cần thiết trên mọi website.

Trừ khi bạn thực sự cần và sẽ phân tích, đối ứng dựa trên dữ liệu đã phần tích, nếu không thì hay bỏ qua các công cụ phân tích và dành thời gian cho việc tốt hơn.

Ngoài việc tăng thêm trọng tải của trang web, việc sử dụng những thứ như Google Analytics cũng đặt ra những câu hỏi về đạo đức xung quanh dữ liệu mà bạn thu thập được từ người dùng thông qua Google, ví dụ: phải có một lý do nào đó mà Google mới cung cấp miễn phí công cụ phân tích này.

Đừng quên những thứ căn bản

Có rất nhiều thông tin xung quanh về những điều dưới đây, nhưng chúng ta không nên bao giờ tự mãn và bỏ quên chúng. Bên cạnh các điều kể trên, chúng ta chắc chắn luôn minify HTML, CSS và Javascript và ghép nối khi thích hợp. Chúng ta cũng nên nén tất cả các hình ảnh để đảm bảo chúng càng nhẹ càng tốt, sử dụng đúng định dạng theo thiết đặt hợp lý và sử dụng progresive rendering

Hiệu năng server-side

Chúng ta mới tập trung hầu hết vào phía front-end, nhưng có rất nhiều thứ sẽ trở nên vô nghĩa nếu chúng ta không tối ưu ở phía server. Như đã đề cập nhiều lần ở trên, đảm bảo luôn kích hoạt tính năng nén gzip mọi lúc.

Chúng ta nên khiến website trở nên dễ dàng cung cấp bởi server. Ví dụ như FastCGI cache khi sử dụng Nginx. Hay WP Super Cache trong Wordpress.

Chúng ta nên sử dụng HTTP2 trên HTTPS. Sử dụng HTTPS mở ra một thế giới công nghệ web mới. Chúng ta có thể tìm hiểu điều này thông qua cuốn Going Offline của Jeremy Keith.

Chú ý: Bạn cũng có thể nghiên cứu về Google’s PageSpeed Module, hỗ trợ cho cả Apache và Nginx.

Cuối cùng, ảnh hưởng lớn nhất mà chúng ta có thể tạo ra là đặt website trên các trung tâm dữ liệu có sử dụng năng lượng tái tạo. Danh sách các host sử dụng năng lượng xanh có thể tham khảo tại The Green Web Foundation

Kết luận

Một phản hồi mà một số người có đối với ý tưởng về thiết kế web bền vững - không phải là không có lý - đó là dường như tác động của web rất nhỏ so với những nguyên nhân gây ô nhiễm môi trường khác. Tất nhiên, mức độ ảnh hưởng sẽ phụ thuộc vào từng website. Nhưng cũng như giúp web trở nên thân thiện với môi trường hơn, thiết kế web bền vững là một cách căn bản nhất.

Tác động tích cực đối với môi trường thường biểu hiện trong một chu kỳ thời gian khá dài. Vì vậy, để giảm thiểu lượng carbon, việc này không thực sự là một giải pháp. Nhưng có vẫn tốt hơn là không làm gì cả.