Chúng tôi đang có kế hoạch phát triển một trang web mới. Mục tiêu của chúng tôi là tải các trang web một cách nhanh chóng. Tất cả các kỹ thuật chúng ta cần làm theo là gì.Tải nhanh các trang web
Có ai cho tôi đề xuất hay, liên kết diễn đàn hoặc bài viết hay không.
Nền tảng của chúng tôi là PHP, MySQL, Javascript và AJAX.
Một trong những hướng dẫn tốt nhất để tăng tốc thời gian tải trang web của bạn:
http://developer.yahoo.com/performance/rules.html
Cập nhật: Google hiện nay có một hướng dẫn tuyệt vời cũng
http://code.google.com/speed/page-speed/docs/rules_intro.html
Cùng với thậm chí còn tốt hơn addon for Firefox. Trong thử nghiệm của tôi cho đến nay, Google Addon tốc độ trang cao hơn nhiều so với YSlow. Nó cung cấp phân tích chi tiết hơn và tư vấn thông minh hơn (thay vì giới thiệu CDN cho các trang web nhỏ như YSlow)
Caching caching caching.
Chọn một, sử dụng nó. Không phải lấy tất cả mọi thứ từ cơ sở dữ liệu tốc độ những thứ lên rất nhiều.
Lưu ý rằng memcached & APC không loại trừ lẫn nhau - sử dụng APC làm bộ nhớ cache opcode không loại trừ sử dụng memcached. –
Vâng, APC chắc chắn nên được sử dụng làm opcode, nhưng nó thực sự cũng hỗ trợ dữ liệu lưu vào bộ nhớ đệm, rất nhiều người không nhận ra. http://php.net/apc_add http://php.net/apc_fetch –
Một công cụ hữu ích là YSlow là công cụ của Yahoo giúp xác định các vấn đề về hiệu suất trang web. Ngoài ra, Best Practices for Speeding Up Your Web Site của Yahoo là một danh sách tốt.
Tuy nhiên, hãy xem mục blog của Jeff Yahoo's problems are not your problems để biết một số quan điểm về vấn đề này.
+1 cho vấn đề của Yahoo không phải là vấn đề của bạn. –
ditto cam kết của Sean. –
+1 cho liên kết tới blog của Jeff. – altermativ
Viết mã nhỏ nếu cần nhưng không quá ít.
Ít mã hơn, ít để biên dịch, ít gửi, ít nhận, ít xử lý hơn, ít hiển thị hơn.
+1 bố cục rõ ràng hơn/ít tiếng ồn hơn vào cuối – Niteriter
Sử dụng trình lược tả cho PHP để đảm bảo mã của bạn đang hoạt động ở tốc độ khá. Refactor (nếu có thể) nếu hiệu suất có thể được cải thiện.
Một số điểm ngẫu nhiên.
Hiển thị dần dần thay vì tạo bộ nhớ trong bộ nhớ và gửi ở cuối cho một tốc độ rõ ràng hiển thị tốc độ.
Có một số thủ thuật lưu bộ nhớ đệm nâng cao mà bạn có thể thực hiện, như bộ đệm chuyển tiếp (đây là những gì Akamai thực hiện trên quy mô lớn) và tách nội dung tĩnh và động.
Với PHP đặc biệt, hãy cẩn thận khi sao chép một lượng lớn dữ liệu xung quanh. PHP 4 đã nổi tiếng với điều này do nó là "sao chép theo mặc định", nhưng nó vẫn còn một chút quá dễ dàng để có một lượng lớn dữ liệu để tay trong PHP 5. Nói cách khác: không sao chép (hoặc tạo!) Chuỗi, mảng và các đối tượng không cần thiết; thay vào đó hãy làm việc với chúng và thay vào đó tham khảo.
ngoài những gì đã được nói:
javascript nén phải được giải nén một thời gian. Trong thời gian chạy javascript của trình duyệt, điều này nhanh hơn rất nhiều. Sử dụng nén cấp http thay thế. – troelskn
Huh? Javascript nén không thể đọc được bởi trình thông dịch. Nó chỉ đưa ra tất cả các dấu cách, các tab, vv và thay thế các biến cục bộ để thay vì "myVariable" bạn có "a". Nén HTTP mặt khác DOES phải được giải nén bởi trình duyệt và là một (rất nhỏ) thuế đối với tài nguyên. –
Phụ thuộc. Tôi thề tôi đã nhìn thấy một số "javascript nén" mà có JS của bạn, không "thực sự" nén, Base64 mã hóa nó và lưu trữ các mess như là một biến javascript. Điều đó hoặc tôi là hạt. –
Nén tất cả các tệp của bạn, tệp css và js cũng nén các tệp php của bạn. Làm như các cuộc gọi cơ sở dữ liệu ít nhất có thể và như đã nêu trước bộ nhớ cache tất cả các lợi nhuận.
Tôi đồng ý. Một cuộc gọi cơ sở dữ liệu mà trả về một số resultsets là tốt hơn so với một số cuộc gọi cơ sở dữ liệu riêng biệt. – Kristen
1) mod_gzip/mod_deflate! Đây là một sửa chữa dễ dàng như vậy tôi ngạc nhiên nó không được bật theo mặc định.
2) Phát các thủ thuật với URL của bạn để bạn có thể yêu cầu trình duyệt lưu tạm thời các tệp JS và CSS của bạn. Nói cách khác, xây dựng của URL để trông giống như:
http://www.yourdomain.com/js/mad_scriptz-v123.js
Sau đó sử dụng mod_rewrite và loại bỏ các "-v123":
<IfModule mod_rewrite.c>
# http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
RewriteEngine on
RewriteRule ^/(.*)\-v[0-9.]+\.(css|js|gif|png|jpg|xap)$ /$1.$2 [L]
</IfModule>
Bây giờ apache sẽ đi tìm kiếm "/js/mad_scriptz.js "... Mỗi lần bạn thay đổi nội dung tĩnh của mình, chỉ cần tăng số phiên bản để buộc trình duyệt tải lại nội dung. Tôi thường có một biến mẫu có chứa một số phiên bản toàn cầu mà tất cả mọi thứ được gắn với. Không hiệu quả nhất, nhưng hoạt động cho mục đích của tôi. Nếu bạn có thể buộc số phiên bản vào hệ thống xây dựng của bạn hoặc một băm của tệp, điều đó sẽ trở nên ngọt ngào hơn.
Nhận mod_expires lên vì vậy tất cả những thứ tĩnh của bạn hết hạn năm kể từ bây giờ:
<IfModule mod_expires.c>
ExpiresActive On
# all in seconds...
ExpiresByType image/x-icon A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/css A2592000
ExpiresByType application/rdf+xml A1800
</IfModule>
Cập nhật: Nó đã được lưu ý rằng không phải tất cả các trình duyệt hoặc công cụ tìm kiếm như nội dung gzip'd. Đừng mù quáng bật nó lên như tôi đề nghị ở trên. Hãy chắc chắn rằng bạn không ăn gzip trình duyệt cổ ngay cả khi họ chấp nhận nó (một số người trong số họ sẽ nhận được pissy với javascript nén). Tài liệu cho mod_gzip và mod_deflate đều có các ví dụ sẽ hoạt động tốt (tôi cho rằng chúng có tác dụng hoặc mọi người sẽ gửi email cho họ với các thay đổi :-).
Tôi cũng nên đề cập đến rằng đó là kinh nghiệm của tôi rằng nếu bạn đã có một proxy ngược giữa các máy chủ Apache mod_gzip'd của bạn và thế giới, bạn cần phải xem ra. Mực 2.6 thường sẽ đánh lừa Apache không phải là công cụ gziping khi nó phải tồi tệ hơn, nó sẽ cache các phiên bản không nén và cung cấp chúng cho các trình duyệt có thể xử lý nội dung gzip'd. Dunno nếu 3,0 sửa lỗi này và tôi không biết nếu nó là cái gì sai trong cấu hình của tôi (nghi ngờ nó). Chỉ cần xem :-)
Điều đó nói. Bật nó lên. Nghiêm túc :-)
mod_gzip/mod_deflate không được bật theo mặc định vì một lý do rất tốt: không phải tất cả các trình duyệt chính đều hỗ trợ nó hoàn hảo. Sử dụng cẩn thận. Nếu bạn bắt đầu nhận được khiếu nại hoặc (nhiều khả năng) giảm lưu lượng truy cập mà không có một từ từ người dùng, hãy tắt nó đi. Nếu không, vui lòng người dùng của bạn sử dụng trình duyệt thông minh. –
Điều này rất đúng. –
Yahoo: "Đặt biểu định kiểu ở đầu", "Đặt tập lệnh ở cuối".
Điều này đã tăng tốc trang web gần đây của tôi lên nhiều hơn bất kỳ tối ưu hóa nào khác.
Dưới đây là một mẹo tôi luôn thấy hữu ích: Nếu bạn có nhiều hình ảnh nhỏ, hãy đặt tất cả chúng vào một hình ảnh xếp kề. Trong tờ khai CSS của bạn, kiểm soát cửa quan sát của các yếu tố html bằng cách thao tác x và y tọa độ của nền:
.icon {
background-image:url(static/images/icons.png);
height:36px;
width:36px;
}
.food {
background-position:-52px -8px;
}
.icon_default {
background-position:-184px -96px;
}
Các ốp lát có thể được thực hiện bằng Python kịch bản, hoặc bằng tay nếu bạn có một bộ quản lý được.
Gmail cũng thực hiện việc này. Xem: http://mail.google.com/mail/images/2/5/greensky/icons7.png
Một dự án giúp với một vài trong số các điểm trong hướng dẫn của Yahoo (http://developer.yahoo.com/performance/rules.html) là Minify mà sử dụng việc rút gọn, gói bó và HTTP có điều kiện phục vụ trong cùng một không gian, được sử dụng với thông lệ thiết kế tốt có thể đáng kể giảm tải trang, đặc biệt là trải nghiệm người dùng (khác với thời gian tải trang thực tế).
Tốc độ 'nhanh' nhanh như thế nào? Những loại tải nào bạn thực sự mong đợi? Ứng dụng sẽ được lưu trữ như thế nào? Bạn thực sự sẽ làm gì? Có một sự khác biệt trên thế giới giữa việc viết một cái gì đó 'đủ nhanh' và cái gì đó có thể xử lý tải trên quy mô Facebook. –