Cách xây dựng các trang web nhanh hơn

Sep 11, 2025

Cách

Trước cuộc nói chuyện của anh ấy tại Tạo ra London. Vào ngày 21 tháng 9, chúng tôi đã bắt kịp với Patrick hamann. , một kỹ sư hiệu suất web tại Nhanh chóng , những người đang trong một nhiệm vụ để xây dựng một trang web nhanh hơn cho tất cả mọi người.

Vai trò của bạn liên quan nhanh như thế nào?
Patrick Hamann: Fastly là một nền tảng Cloud Edge củng cố một số thương hiệu lớn nhất thế giới. Vai trò của tôi chủ yếu tập trung vào R & AMP; D; Làm việc với các nhóm trong thời gian sử dụng nhanh các công nghệ và tiêu chuẩn Web của khách hàng để cải thiện hiệu suất và giao sản phẩm của chúng tôi và - quan trọng nhất - dịch vụ của khách hàng. Một số dự án hiện tại bao gồm các sáng kiến xung quanh giám sát hiệu suất trình duyệt, số liệu và lao động dịch vụ.

Trước khi bạn tham gia nhanh chóng, bạn đã dành thời gian tại cả người bảo vệ và thời điểm tài chính. Làm thế nào họ tiếp cận hiệu suất web?
PH: Hiệu suất không còn là một mục bổ sung hoặc danh sách kiểm tra sau triển khai. Nó cần phải là một nỗ lực liên tục mà mọi người trong tổ chức xem xét, từ thiết kế đến giao hàng. Đây là một cái gì đó các tổ chức tin tức này đã nhận ra rất sớm, giới thiệu các thực hành như xây dựng cơ sở hạ tầng giám sát để đo lường và so sánh biểu diễn đối với các đối thủ cạnh tranh, ưu tiên cung cấp nội dung so với các tính năng khác và sử dụng các công nghệ như lao động dịch vụ.

Trở ngại lớn nhất đối với một trải nghiệm nhanh chóng trực tuyến là gì?
PH: Một từ: javascript. Tôi đoán tôi nên giải thích về điều này một chút: Web nằm ở đỉnh cao của cuộc khủng hoảng béo phì JavaScript. Trang web trung bình hiện mang lại khoảng 500kb kịch bản. Kịch bản mất nhiều hơn một giây để chỉ phân tích cú pháp - hãy để một mình thực hiện - trên một thiết bị được cấp nguồn thấp và lớn hơn năm giây để đến trạng thái mà người dùng có thể tương tác với trang. Do đó, cách duy nhất để cải thiện trải nghiệm người dùng về các trang web của chúng tôi là đo lường, tối ưu hóa và giảm JavaScript của chúng tôi - trên hết.

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds — WebPagetest chạy thử nghiệm tốc độ trang web miễn phí từ nhiều địa điểm trên toàn cầu bằng trình duyệt thực và tốc độ kết nối của người tiêu dùng thực

Các công cụ yêu thích của bạn để tối ưu hóa hiệu suất web là gì?
PH: Tôi là một người tin tưởng mạnh mẽ rằng bạn không thể tối ưu hóa những gì bạn chưa được đo. Vì vậy, hộp công cụ của tôi có trọng lượng nặng nề để đo lường và các công cụ định hình. Để đo tổng hợp, tôi sẽ luôn luôn đạt được WebPagetest. và Công cụ phát triển trình duyệt (Mạng và Performance Panes) trước. Tuy nhiên, không có gì nhịp đập cũng đo lường trải nghiệm người dùng thực sự (r.u.m), vì vậy một kiến thức tốt về các API thời gian hiệu suất của trình duyệt cũng giúp.

Bạn đã làm việc trên một số codebase rất lớn. Những thách thức của việc làm việc ở quy mô là gì?
PH: Trước và lớn, tôi nên lập luận rằng một cơ sở mã lớn chia sẻ hầu hết các sự cố bạn sẽ tìm thấy trong một số nhỏ hơn: Loại bỏ CSS không sử dụng (một vấn đề tôi nghĩ là chưa được giải quyết), bộ nhớ cache, tài sản xây dựng đường ống và phiên bản, v.v. Bạn cũng nhận được nhiều "thối rữa '- thực hành tốt nhất trở thành các mẫu chống lại theo thời gian. Nhưng cá nhân tôi đã tìm thấy hầu hết các thử thách ở quy mô là những vấn đề của mọi người, không phải là kỹ thuật. Tôi vẫn chưa làm việc trong một tổ chức lớn không bị ảnh hưởng bởi luật của Conway.

Bạn gọi cho mình một người ủng hộ tăng cường tiến bộ. Điều gì về cách tiếp cận đó cộng hưởng với bạn?
PH: Trái với niềm tin phổ biến, người dùng của chúng tôi thực sự sử dụng các sản phẩm chúng tôi xây dựng trong thế giới thực: một trong những điều kiện duyệt web không lý tưởng và thất bại xung quanh mọi góc. Tăng cường tiến bộ cho phép chúng tôi xây dựng những trải nghiệm đã bao gồm tất cả người dùng của chúng tôi và có khả năng phục hồi những thất bại của thế giới thực. Nó khá đơn giản: Chỉ cần bắt đầu với những điều cơ bản, không phải là thư viện JavaScript 300kb mà Barista địa phương của bạn đã nói với bạn về. Chúng ta không nên quên những điều cơ bản.

Bạn có hứng thú với sự phát triển frontend gì tại thời điểm này?
PH: Web đang bị đe dọa. Người dùng đang dành nhiều thời gian hơn trong bản địa - và do đó siled - ứng dụng trải nghiệm cách xa sự cởi mở của Web. Tuy nhiên, chúng tôi vẫn dường như đang xây dựng các trang web mất 20 giây và có giá 1,20 bảng mỗi lần tải vào kết nối chuyển vùng của tôi, cuối cùng lái xe người dùng của chúng tôi đi xa hơn.

May mắn thay, các công nghệ như công nhân dịch vụ và các API liên quan ở đây để giúp đỡ. Tôi không thể đợi một kỷ nguyên mới của các trang web nhanh, đàn hồi vẫn còn hoạt động ngoại tuyến, có thể đồng bộ hóa dữ liệu của tôi trong nền và thông báo cho tôi với các bản cập nhật. Một số người đang gọi sự tiến bộ này 'Ứng dụng web tiến bộ'. Tôi thích thuật ngữ 'web'.

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser — Trong cuộc nói chuyện của mình tại Gener London Patrick Hamann sẽ khám phá các thực tiễn tốt nhất hiện tại, quá khứ và trong tương lai để tải tài sản trong trình duyệt

Mọi người có thể mong đợi những gì để học hỏi từ cuộc nói chuyện của bạn tại Tạo ra London. ?
PH: Đối với người ngoài cuộc, phục vụ một trang web có vẻ khá đơn giản: gửi một số html và css xuống dây sau đó trình duyệt quyết định phải làm gì tiếp theo. Tuy nhiên, rất nhiều việc thực sự đang diễn ra dưới mui xe, tất cả đều đến với chi phí cho người dùng của chúng tôi.

Trình duyệt xác định tài sản nào để yêu cầu tiếp theo như thế nào? Làm thế nào chúng ta có thể đo tốc độ nhận thức của các trang web của chúng tôi? Làm cách nào chúng ta có thể sử dụng các tính năng nền tảng web hiện đại để ảnh hưởng đến ưu tiên và tốc độ của tài sản của chúng tôi? Hy vọng cuộc nói chuyện của tôi sẽ trả lời những câu hỏi này và nhiều hơn nữa. Cung cấp cho khán giả các công cụ để tạo ra những trải nghiệm nhanh hơn, kiên cường hơn cho người dùng của họ.

Tạo ra London. Vào ngày 21/9 tháng 9, tính năng 15 bài thuyết trình khác bao gồm các hoạt hình web, chiến lược UX, tạo mẫu, khả năng truy cập, các thành phần CSS đáp ứng, và nhiều hơn nữa. Ngoài ra còn có bốn xưởng để lựa chọn vào ngày trước hội nghị nhưng vé rất hạn chế. Đặt chỗ ngay bây giờ !

Cách xây dựng các trang web nhanh hơn

Cách - Các bài báo phổ biến nhất

Cách vẽ động vật: 15 mẹo hàng đầu

Bắt đầu với họa sĩ ngọn lửa

Cách tinh chỉnh danh mục đầu tư thiết kế của bạn

Bắt đầu với nền tảng hoạt hình Greensock

Chuẩn bị một bảng để vẽ trong 3 bước đơn giản

mô hình một sinh vật cướp biển ngoài hành tinh trong Zbrush

13 mẹo để thực hiện một thế giới chơi game VR

Cách tạo biểu ngữ web hoạt hình trong Photoshop

Thể loại