Hướng dẫn cơ bản để tối ưu hóa web (Mẹo & cách thực hành tốt nhất)

Tối ưu hóa web là một phần quan trọng của phát triển và bảo trì web nhưng cũng là thứ thường bị các quản trị web bỏ qua. Chỉ cần nghĩ về số tiền bạn có thể tiết kiệm và làm thế nào nó có khả năng giúp tăng lượng độc giả và lưu lượng truy cập của bạn khi chúng được thực hiện đúng cách.

Nếu bạn chưa thực hiện bất kỳ tối ưu hóa nào cho trang web (hoặc blog) của mình cho đến nay hoặc chỉ tò mò về cách nó có thể giúp tăng tốc trang web của bạn, vui lòng xem danh sách các mẹo tối ưu hóa chúng tôi đã tổng hợp.

Chúng tôi đã chia mọi thứ thành 3 phần riêng biệt để dễ đọc hơn - tương ứng tối ưu hóa phía máy chủ, tối ưu hóa tài sản (bao gồm các thành phần web như CSS, Javascript, hình ảnh, v.v.) và nền tảng, nơi chúng ta sẽ tập trung vào Tối ưu hóa WordPress. Ở phần cuối cùng, chúng tôi đưa ra một vài liên kết mà chúng tôi thấy hữu ích. Danh sách đầy đủ sau khi nhảy.

Tối ưu hóa: Phía máy chủ

1. Chọn một máy chủ web phong nha

   Tài khoản lưu trữ web của bạn không có mối quan hệ trực tiếp với các tối ưu hóa bạn sắp thực hiện nhưng chúng tôi đã tìm ra cách chọn đúng tài khoản lưu trữ web nên chúng tôi quyết định đưa nó đến sự chú ý của bạn trước. Tài khoản lưu trữ là nền tảng của trang web / blog của bạn, nơi bảo mật, khả năng truy cập (cPanel, FTP, SSH), sự ổn định của máy chủ, giá cả và hỗ trợ khách hàng đều đóng vai trò quan trọng. Bạn cần chắc chắn rằng bạn đang ở trong tay tốt.

   Đề nghị đọc: Cách chọn Máy chủ web bởi wikiHow là một bài viết tuyệt vời cung cấp cho bạn các bước và mẹo bạn nên biết trước khi mua bất kỳ tài khoản lưu trữ web nào.

2. Tài sản lưu trữ riêng

   Khi chúng tôi đề cập đến tài sản, chúng tôi có nghĩa là các thành phần web như hình ảnh và kịch bản tĩnh không yêu cầu xử lý phía máy chủ. Chúng bao gồm bất kỳ đồ họa web, hình ảnh, Javascripts, Cascading Style Sheets (CSS), v.v..

   Đề nghị đọc: Tối đa hóa tải xuống song song trong làn xe chung.

3. Nén bằng GZip

   Nói tóm lại, nội dung di chuyển từ phía máy chủ sang phía máy khách (ngược lại) bất cứ khi nào yêu cầu HTTP được thực hiện. Nén nội dung để gửi giúp giảm đáng kể thời gian cần thiết để xử lý từng yêu cầu.

   GZip là một trong những cách tốt nhất để làm điều này và nó khác nhau tùy theo loại máy chủ bạn đang sử dụng. Ví dụ, Apache 1.3 sử dụng mod_zip, Apache 2.x sử dụng mod_deflate và đây là cách bạn thực hiện Nginx. Dưới đây là một số bài viết thực sự hay để bạn làm quen với việc nén phía máy chủ:

   • Tăng tốc một trang web bằng cách cho phép nén tệp Apache
   • Nén đầu ra web bằng mod_gzip và Apache
   • Cách tối ưu hóa trang web của bạn với GZIP nén
   • Nén phía máy chủ cho ASP

4. Giảm thiểu chuyển hướng

   Quản trị viên web thực hiện chuyển hướng URL (cho dù đó là chuyển hướng Javascript hoặc META) mọi lúc. Đôi khi, mục đích của nó là hướng người dùng từ một trang cũ sang trang mới hoặc chỉ hướng dẫn người dùng đến đúng trang. Mỗi chuyển hướng tạo ra một yêu cầu HTTP và RTT bổ sung (khứ hồi). Bạn càng có nhiều chuyển hướng, người dùng sẽ càng chậm đến trang đích.

   Đề nghị đọc: Tránh chuyển hướng bởi Google Code cung cấp cho bạn một cái nhìn tổng quan tốt về vấn đề này. Bài viết cũng đề xuất một số cách thiết thực để giảm thiểu chuyển hướng để tăng tốc độ phục vụ.

5. Giảm tra cứu DNS

   Theo Yahoo! Blog nhà phát triển, phải mất khoảng 20-120 mili giây cho DNS (Hệ thống tên miền) để phân giải địa chỉ IP cho một tên máy chủ hoặc tên miền nhất định và trình duyệt không thể làm gì cho đến khi quá trình hoàn tất đúng.

   Tác giả Steve Souder đề xuất rằng việc chia các thành phần này qua ít nhất hai nhưng không quá bốn tên máy chủ giúp giảm tra cứu DNS và cho phép tải xuống song song mức độ cao. Đọc thêm trên bài báo.

Tối ưu hóa: Tài sản (CSS, Javascripts, Hình ảnh)

1. Hợp nhất nhiều Javascripts thành một

   Mọi người tại rakaz.nl chia sẻ cách bạn có thể kết hợp nhiều Javascripts như:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Vào một tệp bằng cách thay đổi URL thành:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   bằng cách thao tác .htaccess và sử dụng PHP. Bấm vào đây để đọc thêm.

2. Nén Javascript & CSS

   Giảm thiểu là một ứng dụng PHP5 có thể kết hợp nhiều tệp CSS và Javascript, nén nội dung của chúng (tức là loại bỏ khoảng trắng / bình luận không cần thiết) và phục vụ kết quả với mã hóa HTTP (gzip / deflate) và các tiêu đề cho phép lưu trữ phía máy khách tối ưu.

   

   Nén chúng trực tuyến!Ngoài ra còn có một số dịch vụ web cho phép bạn nén thủ công các tệp Javascripts và CSS trực tuyến. Dưới đây là một vài điều chúng ta biết:

   • máy nén.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • Trình tối ưu hóa CSS (CSS)

3. Tùy chỉnh hết hạn tiêu đề / bộ nhớ đệm

   Tín dụng: httpwatch

   Bằng cách sử dụng tiêu đề Hết hạn tùy chỉnh, các thành phần web của bạn như hình ảnh, tệp tĩnh, CSS, Javascript đã bỏ qua yêu cầu HTTP không cần thiết khi cùng một người dùng tải lại trang lần thứ hai. Nó giảm băng thông cần thiết và chắc chắn giúp phục vụ trang nhanh hơn.

   Đề nghị đọc:

   • Yahoo! Blog của nhà phát triển - Thêm một tiêu đề hết hạn
   • Cách thêm tiêu đề hết hạn tốt vào hình ảnh trong Apache 1.3
   • Bộ nhớ đệm HTTP
   • Hướng dẫn lưu trữ cho tác giả web và quản trị trang web

4. Giảm tải Tài sản

   Bằng cách tải xuống, chúng tôi có nghĩa là tách các tệp Javascripts, hình ảnh, CSS và tệp tĩnh khỏi máy chủ chính nơi trang web được lưu trữ và đặt chúng trên một máy chủ khác hoặc dựa vào các dịch vụ web khác. Chúng tôi đã thấy sự cải thiện đáng kể ở đây trong Hồng Kông bằng cách tải tài sản sang các dịch vụ web khác có sẵn, khiến máy chủ chủ yếu thực hiện xử lý PHP. Dưới đây là một số gợi ý về các dịch vụ trực tuyến để giảm tải:

   • Hình ảnh: Flickr, Smugmug, lưu trữ trả phí *
   • Javascripts: Thư viện Google Ajax, Google App Engine, lưu trữ trả phí *
   • Hình thức webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Khảo sát và thăm dò ý kiến: SurveyMonkey, PollDaddy

   * Lưu trữ trả tiền - Dịch vụ trả phí luôn có độ tin cậy và ổn định tốt hơn. Nếu trang web của bạn liên tục yêu cầu tài sản, bạn sẽ cần đảm bảo rằng chúng nằm trong tay tốt. Chúng tôi khuyên dùng Amazon S3 và Cloud Front.

5. Xử lý ảnh trên web

   Hình ảnh là một phần quan trọng của trang web của bạn. Tuy nhiên, nếu chúng không được tối ưu hóa đúng cách, chúng có thể trở thành gánh nặng và cuối cùng sử dụng lượng băng thông lớn không thể đoán trước trên cơ sở hàng ngày. Đây là một số thực hành tốt nhất để tối ưu hóa hình ảnh của bạn:

   • Tối ưu hóa hình ảnh PNGMọi người tại Tạp chí Smashing mô tả một số kỹ thuật thông minh có thể giúp bạn tối ưu hóa hình ảnh PNG của mình.
   • Tối ưu hóa cho Web - Những điều bạn cần biết (các định dạng) Tìm hiểu thêm về Jpeg, GIF, PNG và cách bạn nên lưu hình ảnh của mình lên web.
   • Không chia tỷ lệ hình ảnhLuôn luôn thực hành chèn chiều rộng và Chiều cao cho mỗi hình ảnh. Ngoài ra, đừng thu nhỏ hình ảnh chỉ vì bạn cần một phiên bản nhỏ hơn trên web. Ví dụ: Không ép tỷ lệ hình ảnh 200 × 200 px thành 50 × 50 px cho trang web của bạn bằng cách thay đổi chiều rộng và Chiều cao. Nhận 50 × 50 px thay thế.

   Tối ưu hóa với các công cụ và dịch vụ web. Tin tốt là, bạn không cần phải là một chuyên gia Photoshop để tối ưu hóa hình ảnh của mình. Có rất nhiều dịch vụ và công cụ web để giúp bạn thực hiện công việc.

   • Mỉm cườiCó lẽ là một trong những công cụ trực tuyến hiệu quả nhất để tối ưu hóa hình ảnh. Thậm chí còn có một plugin WordPress cho nó!
   • Vũ nữ thoát y JPEG & PNGMột công cụ Windows để tước / làm sạch / xóa siêu dữ liệu không cần thiết (rác) khỏi các tệp JPG / JPEG / JFIF & PNG.
   • Trình tối ưu hóa hình ảnh trực tuyếnCho phép bạn dễ dàng tối ưu hóa gifs, gifs hoạt hình, jpg và png của mình, để chúng tải nhanh nhất có thể trên trang web của bạn, bằng Dynamic Drive
   • SuperGIFDễ dàng làm cho tất cả hình ảnh và hoạt hình GIF của bạn nhỏ hơn.
   • Đây là nhiều hơn.

6. Xử lý CSS

   Các trang web hiện đại sử dụng CSS làm nền tảng của phong cách, cũng như giao diện. CSS không chỉ mang lại sự linh hoạt cao cho các thay đổi, nó còn kém hơn về các mã cần thiết. Tuy nhiên, nếu chúng được mã hóa xấu, nó có thể là một phản ứng ngược. Dưới đây là một số danh sách kiểm tra, hoặc đúng hơn là hướng dẫn cho bạn để đảm bảo CSS của bạn được tối ưu hóa đúng cách:

   • Giữ những đứa con của bạn phù hợp với con cháuCách giữ đánh dấu của bạn sạch sẽ với CSS Selector.
   • Giữ CSS ngắnKhi họ đưa ra cùng một phong cách, các mã tốt hơn là ngắn hơn. Đây là một Hướng dẫn viết tắt CSS bạn có thể sẽ cần.
   • Sử dụng CSS SpriteKỹ thuật CSS Sprite giảm yêu cầu HTTP mỗi khi tải trang bằng cách kết hợp một số (hoặc tất cả) hình ảnh lại với nhau trên một tệp hình ảnh và kiểm soát đầu ra của nó với CSS vị trí nền thuộc tính. Dưới đây là một số hướng dẫn và kỹ thuật hữu ích để tạo CSS Sprites:
     • Trình tạo CSS Sprite trực tuyến
     • Trình tạo Sprites CSS trực tuyến và ngoại tuyến tốt nhất
   • Sử dụng mỗi khai báo chỉ một lầnKhi tìm cách tối ưu hóa các tệp CSS của bạn, một trong những biện pháp mạnh nhất bạn có thể sử dụng là sử dụng mọi khai báo chỉ một lần.
   • Giảm số lượng tệp CSSLý do rất đơn giản, càng nhiều tệp CSS bạn có càng nhiều yêu cầu HTTP sẽ phải thực hiện khi trang web được yêu cầu. Ví dụ: thay vì có nhiều tệp CSS như sau:

     Bạn có thể kết hợp chúng thành một CSS duy nhất:

   Đề nghị đọc:

   • Các công cụ hữu ích để kiểm tra, làm sạch và tối ưu hóa tệp CSS của bạnMột số công cụ hữu ích mà bạn có thể sử dụng để tối ưu hóa mã CSS của mình, ngay cả khi bạn hoàn toàn không có kiến ​​thức về mã hóa CSS.
   • 7 nguyên tắc của mã CSS sạch và tối ưu hóaTối ưu hóa không chỉ là giảm thiểu kích thước tệp - đó cũng là về cách tổ chức, không lộn xộn và hiệu quả.
   • Thực tiễn tốt nhất để tối ưu hóa CSSXem xét bài viết này giống như một bài tập học thuật hơn là các mẹo tối ưu hóa thực tế.

Tối ưu hóa cho WordPress

Thỉnh thoảng, chúng tôi theo dõi, đánh giá và phân tích hiệu suất của blog WordPress của chúng tôi. Nếu trang web đang chạy chậm, chúng ta cần biết tại sao. Dưới đây là một số thay đổi cơ bản chúng tôi đã thực hiện và chúng tôi đã tìm ra sẽ tăng đáng kể tốc độ của blog WordPress của bạn.

1. Cache Blog của bạn

   Bộ nhớ cache WP là một hệ thống lưu trữ trang WordPress cực kỳ hiệu quả để làm cho trang web của bạn nhanh hơn và phản hồi nhanh hơn. Chúng tôi cũng đề nghị Bộ nhớ cache siêu WP cải tiến từ plugin đã đề cập trước đó và cũng làm rất tốt.

2. Vô hiệu hóa và xóa các plugin không sử dụng

   Khi bạn nhận thấy blog của bạn đang tải rất chậm, hãy xem bạn đã cài đặt rất nhiều plugin chưa. Họ có thể là thủ phạm.

3. Xóa các thẻ PHP không cần thiết

   Nếu bạn xem mã nguồn của chủ đề, bạn sẽ tìm thấy rất nhiều thẻ như sau:

   Chúng có thể được thay thế khá nhiều bằng nội dung văn bản không gây tải cho máy chủ. Kiểm tra Michael Martin'S 13 Thẻ để xóa khỏi WordPress Blo của bạng

Bài đọc khuyến nghị:

• 3 cách dễ nhất để tăng tốc WordPressJohn Pozadzides chia sẻ làm thế nào blog của anh ấy đi trơn tru thông qua một lưu lượng truy cập Digg.
• 13 mẹo & thủ thuật tốc độ WordPress tuyệt vời cho hiệu suất MAX Dưới đây là một số điều cần thử nếu bạn thấy rằng trang web WordPress của bạn không hoạt động tốt cũng như có thể là do lưu lượng truy cập cao hoặc các vấn đề tiềm ẩn mà bạn không biết về.
• 40 mẹo tối ưu hóa WordPressMẹo tối ưu hóa trong các slide. 40 lời khuyên trong 40 phút.

Cuối cùng nhưng không kém phần quan trọng…

Dưới đây là một số dịch vụ và công cụ web hữu ích mang đến cho bạn góc nhìn rộng hơn và phân tích tốt hơn để giúp bạn tối ưu hóa web.

• Yahoo! YSlow

  YSlow phân tích các trang web và đề xuất các cách để cải thiện hiệu suất của chúng dựa trên một bộ quy tắc cho các trang web hiệu suất cao. Nó cung cấp cho bạn một ý tưởng tốt những gì cần được thực hiện để trang web tải nhanh hơn.

  (Yêu cầu bắt lửa)

  

• Tốc độ trang

  Tương tự như Yahoo! YSlow, Google Tốc độ trang là một tiện ích bổ sung Firebird mã nguồn mở để đánh giá hiệu suất của trang web và cách cải thiện chúng. (Yêu cầu bắt lửa)

  

• Công cụ Pingdom

  Công cụ Pingdom tải toàn bộ trang web của bạn bao gồm tất cả các đối tượng (hình ảnh, CSS, JavaScripts, RSS, Flash và khung / iframes) và hiển thị cho bạn các thống kê chung về trang được tải như tổng số đối tượng, tổng thời gian tải và kích thước bao gồm tất cả các đối tượng.

  

Đề nghị đọc:Dưới đây là nhiều mẹo và công cụ đáng để kiểm tra.

• Trình tối ưu hóa web của Google
• 15 công cụ giúp bạn phát triển các trang web nhanh hơn
• Hơn 15 mẹo để tăng tốc trang web của bạn và tối ưu hóa mã của bạn!