Hướng dẫn dành cho người mới bắt đầu để tối ưu hóa trang web

Hình ảnh lịch sự của Pexels.

Tôi là người mới bắt đầu và tôi đã có thể đạt được 99/100 trong bảng xếp hạng tối ưu hóa Google Google. Nếu tôi có thể làm điều đó, bạn cũng có thể.

Nếu bạn giống như tôi, bạn thích bằng chứng. Vì vậy, đây là kết quả Google Insights PageSpeed ​​Insights cho rắc rối, một trang web mà tôi duy trì và gần đây đã dành thời gian để tối ưu hóa:

Ảnh chụp màn hình điểm số PageSpeed ​​Insights của tôi.

Tôi khá tự hào về những kết quả này, nhưng tôi muốn nhấn mạnh rằng tôi đã có một gợi ý về cách tối ưu hóa một trang web chỉ một vài tuần trước đây. Những gì tôi phải chia sẻ với bạn ngày hôm nay chỉ đơn giản là kết quả của rất nhiều sự cố và khắc phục sự cố, tôi muốn tha cho bạn.

Bài viết này được chia thành các phần phụ cho mỗi tối ưu hóa, trong trường hợp bạn muốn nhảy xung quanh.

Tôi không có nghĩa là một chuyên gia, nhưng tôi tự tin rằng nếu bạn thực hiện các kỹ thuật dưới đây, bạn sẽ thấy kết quả!

Hình ảnh

Hình ảnh lịch sự của Pexels (và chắc chắn được tối ưu hóa bởi Trung bình).

Là một nhà phát triển web mới bắt đầu, hình ảnh không phải là thứ tôi từng quan tâm. Tôi biết rằng việc thêm hình ảnh chất lượng cao vào trang web của mình sẽ khiến nó trông chuyên nghiệp hơn, nhưng tôi chưa bao giờ dừng lại để xem xét các hiệu ứng mà chúng sẽ có trong thời gian tải trang của tôi.

Điều chính tôi đã làm để tối ưu hóa hình ảnh của mình là nén chúng.

Nhìn lại, điều này đáng ra phải khá trực quan ngay từ đầu, nhưng nó không phải là đối với tôi, vì vậy có lẽ nó cũng không phải là đối với bạn.

Dịch vụ mà tôi đã sử dụng để nén hình ảnh của mình là Optimizilla, một trang web dễ sử dụng nơi bạn tải lên hình ảnh của mình, chọn mức độ nén bạn muốn và sau đó tải xuống hình ảnh nén. Tôi thấy kích thước giảm xuống 70% đối với một số tài nguyên của mình, điều này đi theo hướng DÀI để hướng tới thời gian tải nhanh hơn.

Optimizilla hầu như không phải là lựa chọn duy nhất cho nhu cầu nén hình ảnh của bạn. Một số phần mềm mã nguồn mở độc lập mà bạn có thể sử dụng là ImageOptim cho Mac hoặc FileOptimizer cho Windows. Nếu bạn muốn nén bằng các công cụ xây dựng, có các plugin Gulp và WebPack nên thực hiện thủ thuật. Nó không quan trọng lắm về cách bạn làm, miễn là bạn làm. Hiệu suất đạt được rất xứng đáng với nỗ lực tối thiểu.

Tùy thuộc vào trường hợp sử dụng của bạn, nó cũng có thể đáng xem tập tin định dạng của bạn. Nói chung, jpg sẽ nhỏ hơn png. Sự khác biệt chính trong việc tôi sử dụng cái này hay cái khác là liệu tôi có cần độ trong suốt đằng sau hình ảnh không: Nếu tôi cần độ trong suốt, tôi sử dụng png, nếu không tôi sử dụng jpg. Bạn có thể đi sâu hơn vào những ưu và nhược điểm của cả hai ở đây.

Ngoài ra, Google đã đưa ra một định dạng webp khá ngọt ngào, nhưng vì nó không được hỗ trợ trên tất cả các trình duyệt, nên tôi đã ngần ngại sử dụng nó. Hãy theo dõi để được hỗ trợ thêm trong tương lai!

Tôi đã làm nhiều hơn là nén hình ảnh của mình để có kết quả như tôi đã trình bày ở trên, nhưng nếu bạn muốn tối ưu hóa hơn nữa thì đây là một bài viết tuyệt vời.

Video

Ảnh của Terje Sollie từ Pexels.

Tôi đã sử dụng video trong bất kỳ dự án hiện tại nào của mình, vì vậy tôi sẽ chỉ đề cập ngắn gọn về điều này vì tôi không cảm thấy mình là tài nguyên tốt nhất cho việc này, cụ thể.

Đây là một trong những tình huống mà tôi có thể sẽ để cho các chuyên gia thực hiện công việc nặng nhọc. Vimeo cung cấp một nền tảng tuyệt vời để lưu trữ video, nơi chúng sẽ làm giảm chất lượng video để kết nối chậm hơn và nén video của bạn để tối ưu hóa hiệu suất.

Bạn cũng có thể lưu trữ video của mình trên Youtube và sau đó sử dụng công cụ youtube-dl này để tải chúng từ Youtube trong khi định cấu hình các video theo nhu cầu của trang web của bạn.

Đối với các giải pháp có thể khác, hãy kiểm tra Brightcove, Sprout hoặc Wistia.

Gzip

Hiểu rồi? Zip? Hình ảnh lịch sự của Pexels.

Tôi không có ý tưởng gì khi tôi triển khai trang web của mình.

Tóm lại, gzip là một định dạng nén tệp mà hầu hết các trình duyệt đều hiểu và có thể chạy phía sau hậu trường mà không yêu cầu người dùng phải biết nó xảy ra.

Tùy thuộc vào nơi bạn đang lưu trữ ứng dụng của mình, gzipping có thể đơn giản như lật một công tắc cấu hình để xác định rằng bạn muốn máy chủ của mình tải tệp gzip khi gửi chúng đi. Trong trường hợp của tôi, trang web của tôi được lưu trữ trên Heroku, không cung cấp tùy chọn này.

Hóa ra, có các gói để thêm nén rõ ràng vào mã máy chủ của bạn, cho phép bạn gặt hái những lợi ích của việc gzipping để đổi lấy chỉ một vài dòng mã. Sử dụng phần mềm trung gian nén này, tôi có thể giảm 75% kích thước của các gói Javascript và CSS.

Rất đáng để kiểm tra xem dịch vụ lưu trữ của bạn có cung cấp tùy chọn gzip không. Nếu không, hãy xem cách thêm gzipping vào mã phía máy chủ của bạn.

Giảm thiểu

Dứa tối thiểu lịch sự của Pexels.

Giảm thiểu là quá trình loại bỏ các ký tự không cần thiết khỏi mã mà không ảnh hưởng đến chức năng của nó (khoảng trắng, ký tự dòng mới, v.v.). Điều này cho phép bạn giảm kích thước tệp bạn đang vận chuyển qua internet. Nó cũng hữu ích trong việc làm xáo trộn mã của bạn, điều này khiến các tin tặc lén lút khó phát hiện các điểm yếu bảo mật hơn.

Ngày nay, việc thu nhỏ thường được thực hiện như một phần của quy trình xây dựng với Webpack hoặc Gulp hoặc một số thay thế. Tuy nhiên, các công cụ xây dựng này có thể có một chút đường cong học tập, vì vậy, nếu bạn đang tìm kiếm các lựa chọn thay thế dễ dàng hơn, Google khuyên dùng Công cụ khai thác HTML cho HTML, CSSNano cho CSS và UglifyJS cho Javascript.

Bộ nhớ đệm trình duyệt

Không hoàn toàn làm thế nào trình duyệt lưu trữ dữ liệu, nhưng nó gần như tôi có thể nhận được. Lịch sự của Pexels.

Lưu trữ các tệp tĩnh trong trình duyệt Bộ nhớ cache là một cách rất hiệu quả để tăng tốc độ trang web của bạn, đặc biệt là các lượt truy cập trở lại từ cùng một máy khách. Tôi đã không nhận thức được, cho đến khi Google nói với tôi rằng một số tài nguyên của tôi không được lưu vào bộ nhớ cache một cách thích hợp vì thiếu tiêu đề trên phản hồi HTTP mà tôi đang gửi từ máy chủ của mình.

Ngay sau khi trang chủ của tôi được tải, một yêu cầu được gửi đến máy chủ của tôi để lấy dữ liệu về một loạt các bài hát sau đó được hiển thị trong trình phát nhạc. Tôi không thường xuyên cập nhật các bài hát trên trang web này, vì vậy tôi không phiền nếu người dùng đến trang web của tôi và xem các bài hát tương tự từ lần cuối họ truy cập, nếu điều đó sẽ khiến trang của tôi tải nhanh hơn một chút cho họ.

Để tăng hiệu suất, tôi đã thêm đoạn mã sau vào đối tượng phản hồi máy chủ của tôi (máy chủ Express / Node):

res.append ("Kiểm soát bộ đệm", "max-age = 604800000");
res.status (200) .json (phản hồi);

Tất cả những gì tôi đang làm ở đây là nối thêm tiêu đề kiểm soát bộ đệm vào phản hồi của mình, thông báo rằng sau một tuần (tính bằng mili giây), tài nguyên sẽ được tải xuống lại. Nếu bạn cập nhật các tệp này thường xuyên hơn, tuổi tối đa ngắn hơn có thể là một ý tưởng hay.

Mạng phân phối nội dung

Hình ảnh thực tế của một CDN, lịch sự của Pexels.

Mạng phân phối nội dung, hoặc CDN, là mạng cho phép người dùng từ khắp nơi trên thế giới gần hơn về mặt địa lý với nội dung của bạn. Nếu người dùng phải tải một hình ảnh lớn từ Nhật Bản, nhưng máy chủ của bạn ở Hoa Kỳ, việc này sẽ mất nhiều thời gian hơn so với khi bạn có máy chủ ở Tokyo.

CDN cho phép bạn tận dụng một loạt các máy chủ proxy có mặt trên khắp thế giới, cho phép nội dung của bạn được tải nhanh hơn bất kể người dùng cuối của bạn đang ở đâu.

Tôi muốn lưu ý rằng tôi đã có thể đạt được kết quả mà bạn đã thấy ở trên trước khi triển khai CDN - Tôi chỉ đơn giản muốn đề cập đến chúng vì không có bài viết nào về tối ưu hóa trang web sẽ được hoàn thành mà không đề cập đến chúng. Có một trong những chàng trai xấu trên trang web của bạn là bắt buộc nếu bạn đang có kế hoạch để có một khán giả trên toàn thế giới.

Một số CDN phổ biến bao gồm CloudFront và CloudFlare.

Linh tinh

Ở đây, một vài lời khuyên nữa để vắt thêm nước trái cây:

  • Trước tiên, hãy tối ưu hóa trang web của bạn để tải nội dung trên màn hình đầu tiên để tăng hiệu suất nhận biết của trang web của bạn. Một cách phổ biến để làm điều này là bằng cách tải hình ảnh lười biếng mà don hiến hiện trên trang đích.
  • Trừ khi ứng dụng của bạn phụ thuộc vào Javascript để hiển thị HTML, chẳng hạn như trang web được xây dựng bằng Angular hoặc React, thì có thể an toàn để tải các thẻ script của bạn ở cuối phần thân của tệp HTML. Điều này có thể ảnh hưởng đến thời gian tương tác của bạn, tuy nhiên, đó KHÔNG phải là một kỹ thuật tôi muốn giới thiệu cho mọi tình huống.

Cuối cùng

Đây chỉ là phần nổi của tảng băng trôi khi nói đến việc tối ưu hóa trang web của bạn. Tùy thuộc vào lượng lưu lượng truy cập bạn đang nhận và dịch vụ bạn đang cung cấp, bạn có thể có các tắc nghẽn về hiệu suất trong nhiều lĩnh vực khác nhau. Có thể bạn cần nhiều máy chủ hơn, có thể bạn cần một máy chủ có nhiều RAM hơn, có thể vòng lặp for lồng nhau của bạn có thể sử dụng một số cấu trúc lại - ai biết?

Không có một kích cỡ phù hợp cho tất cả khi nói đến việc tăng tốc trang web của bạn và cuối cùng bạn sẽ phải đưa ra quyết định tốt nhất cho tình huống của mình dựa trên các phép đo. Don Tiết lãng phí thời gian của bạn để tối ưu hóa một cái gì đó không cần tối ưu hóa. Phân tích hiệu suất của trang web của bạn để tìm ra tắc nghẽn, sau đó tấn công những người cụ thể.

Tôi hy vọng rằng bạn tìm thấy một cái gì đó hữu ích trong bài viết này! Như tôi đã đề cập, tôi vẫn còn nhiều điều phải học trong lĩnh vực này. Nếu bạn có bất kỳ lời khuyên hoặc khuyến nghị bổ sung, xin vui lòng để lại trong các ý kiến ​​dưới đây!

Nếu bạn thích bài viết này, xin vui lòng cho nó một số tiếng vỗ tay và kiểm tra:

  • Các công cụ tôi ước tôi đã biết về khi tôi bắt đầu viết mã
  • Các công cụ tôi ước tôi đã biết về khi tôi bắt đầu viết mã: Xem lại

Ngoài ra, hãy cho tôi theo dõi trên Twitter.