Tối ưu hóa tải frontend, làm cách nào để kết hợp và nén JS đúng cách?


8

Trang web của tôi cho một khách hàng doanh nghiệp có khoảng 90 tài sản tải xuống khi tải, 35 hoặc hơn là các tệp JS. Ngay cả các tiện ích mở rộng "tối ưu hóa" được tạo cho Joomla dường như chỉ khiến tôi giảm xuống còn 31 hoặc hơn các tệp JS và chỉ nén các css / js kết hợp chứ không phải các tiện ích dường như chạy lừa đảo.

Tôi đã thử một vài trong số các plugin miễn phí tối ưu hóa và tôi không muốn chi tiền cho những người được trả tiền nếu họ sẽ làm rất ít cho thời gian tải của tôi.

Mẫu của tôi là một cơ sở Rockettheme với rất nhiều tùy chỉnh, do đó, nó có Gantry js, bootstrap js, một vài tiện ích mở rộng như trình phát video của tôi sử dụng tệp js, v.v. một.

Những gì hoạt động và những gì không để cải thiện phần này của tải phía trước?

Câu trả lời:


9

Sẽ không dễ để xử lý tất cả các tệp này. Kết hợp, thu nhỏ và nén tất cả những thứ này lại với nhau có lẽ sẽ mang lại nhiều vấn đề. Sẽ mất nhiều nỗ lực và sự kết hợp của các kỹ thuật để đạt được mức tối ưu hóa thỏa đáng.

Cách tiếp cận tổng thể của tôi để đạt được một trang web tải nhanh.

Một trang web nhanh là điều cần thiết. Việc tối ưu hóa tốc độ của một trang web, mặc dù nó thường diễn ra vào cuối quá trình phát triển, nhưng đó là điều cần được xem xét ngay từ đầu. Nó bắt đầu với các mẫu thích hợp.

Ngoài ra, cài đặt từng phần mở rộng và sử dụng bất kỳ loại mô-đun ưa thích nào, có thể dẫn đến một trang web nặng, sẽ rất khó để làm cho nó nhẹ hơn sau này.

Hãy chiết trung - ở mức tối thiểu

Cá nhân, khi nói đến tối ưu hóa tốc độ, tôi cố gắng rất chiết trung về những phần mở rộng tôi sử dụng. Tôi nghiên cứuthử nghiệm những cái hiệu quả và chất lượng nhất cho từng nhiệm vụ và luôn cố gắng tránh sử dụng bất kỳ tiện ích mở rộng nào, nếu có những thứ có thể đạt được bằng tay trong lõi.

Ngoài ra, nếu tôi phải quyết định sử dụng tính năng front-end ưa thích không thực sự quan trọng, điều đó gây rắc rối cho tôi trong việc tối ưu hóa tốc độ trang web, tôi thường sẽ vứt nó đi hoặc tìm cách khác để thực hiện tính năng ưa thích.

Tôi cũng cố gắng tránh sử dụng các mẫu thương mại, vì chúng thường đi kèm với nhiều tính năng bổ sung để đáp ứng nhiều thị hiếu khác nhau. Tôi thích xây dựng mẫu và chỉ bao gồm những gì tôi cần.

Công việc thủ công của bạn

Tôi sẽ đề nghị xem lại tất cả các tiện ích mở rộng bạn có để xem cách chúng tải các tệp tài sản của chúng và nếu có thể tránh tải chúng trong các trang mà bạn không cần chúng, ví dụ: bạn có thể tạo mẫu ghi đè ở nơi có thể tự kiểm soát việc tải các tập tin tài sản.

Bạn có thể thấy rằng có những tiện ích mở rộng mà bạn không cần , nhưng vẫn được tải hoặc bạn không có cài đặt tối ưu về cách chúng hoạt động.
Ví dụ: JCE Mediabox cung cấp tùy chọn chỉ được tải trong các mục menu cụ thể.

Cũng xem nếu có thể hợp nhất các tập tin trong một. Ví dụ: không để bất kỳ mô-đun nào tải css của nó, hãy thử hợp nhất nó với tệp css của mẫu.

Công cụ tối ưu hóa

KIỂM SOÁT & KIỂM SOÁT CSS / JAVASCRIPT
Đối với các công cụ / plugin tối ưu hóa, tôi khá hài lòng với plugin Tối ưu hóa JCH . Nó miễn phí, nhưng cũng có phiên bản thương mại với sự hỗ trợ cho một vài đô la. Với việc điều chỉnh phù hợp, nó có thể tạo ra kết quả tuyệt vời và nhà phát triển khá hữu ích nếu bạn cần hỗ trợ.

Một công cụ khác có thể được chứng minh là hữu ích, đó là plugin JQuery Easy . Nó có thể giúp tổ chức và kiểm soát tốt hơn việc tải các tệp javascript khác nhau, trong trường hợp chúng xung đột với nhau và giúp tối ưu hóa với Plugin JCH_Optizes dễ dàng hơn.

CACHE
Tôi cũng sử dụng Jot Cache , để kiểm soát Cache tốt hơn, vì nhiều tiện ích mở rộng có vấn đề với bộ đệm lõi.

CDN
Sử dụng CDN để phân phối nội dung tĩnh là công cụ tiếp theo - Tôi sử dụng NoNumber CDN cho Joomla

HTACCESS
Cuối cùng, những lợi ích lớn bạn sẽ đạt được bằng cách sử dụng htaccess để nén và thêm các tiêu đề Hết hạn vào các tệp.


5

Không có giải pháp đơn giản nào cho hơn 30 tệp JS.


Tôi đã nhấp vào đề xuất đầy đủ ở trên dưới dạng "câu trả lời" nhưng tôi cũng phải lưu ý rằng RokBooster làm việc tốt hơn cho tôi so với JCH Optimize vì tôi đang sử dụng mẫu và tiện ích mở rộng dựa trên Gantry. Cảm ơn bạn! Tôi ước tôi có thể nhấp vào cả hai.
Toni Marie

Thật tuyệt, rất vui khi được giúp đỡ
Anibal

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.