Tối ưu JavaScript

Cách loại trừ ảnh hưởng xấu của mã CSS & JS dư thừa do Contact Form 7 chèn vào trên các trang không liên quan

Bởi

Contact Form 7 (CF7) là plugin form rất phổ biến, chắc nhiều anh chị em đang dùng, tuy nhiên nó có nhược điểm về mặt hiệu suất, tốc độ đó là chèn CSS và JS trên tất cả các post, page dù trang đó có nhúng form hay không! Nếu trang web của bạn có cài CF7 thì để kiểm tra vấn đề này bạn làm như sau. Bạn tạm thời vô hiệu hóa tính năng gộp (combine) và minify JS và CSS (ví dụ của các plugin cache như LiteSpeed, WP-Rocket hoặc Autoptimize), việc này giúp bạn nhận diện …

Đọc thêm

Tuyến hiển thị quan trọng trong tăng tốc độ website

Bởi

Tuyến hiển thị quan trọng là gì? Tuyến hiển thị quan trọng (critical rendering path) là một chuỗi các sự kiện phải diễn ra để render (hiển thị) giao diện thấy đầu tiên (initial view/nội dung thuộc màn hình đầu tiên) của trang web. Ví dụ: tải HTML > tải các tài nguyên về > phân tích cú pháp (parse) > hiển thị trang web (xem thêm: Cách trang web tải về và hiển thị) Tối ưu những sự kiện này đem lại kết quả tăng tốc website đáng kể. Tuyến hiển thị quan trọng có thể làm được điều …

Đọc thêm

Plugin Perfmatters và Gonzales: không nổi tiếng nhưng xắt ra miếng

Bởi

Tôi biết đến 2 plugin tối ưu hóa này khá muộn, cỡ năm năm sau khi dùng WordPress và hai năm chú ý đến tốc độ và hiệu suất website. Về cơ bản thì hai plugin có chức năng chính tương tự nhau: loại bỏ CSS và JS dư thừa trên trang. Chỉ là Perfmatters hay được biết đến và có nhiều chức năng râu ria hơn mà thôi, tôi nghe nói Gonzales mới là plugin triển khai ý tưởng này đầu tiên. Nếu kiểm tra bằng Google PageSpeed Insights một lỗi mà rất nhiều trang WordPress mắc phải là …

Đọc thêm

Giới thiệu plugin Gonzales để tăng tốc WordPress

Bởi

Một cách thức tăng tốc WordPress khác biệt nhưng có thể rất thú vị. Tại sao bạn lại cần Gonzales? Gonzales cho phép bạn vô hiệu hóa (có điều kiện) các file CSS, JS và thậm chí là cả các plugin dựa trên trang mà bạn ghé thăm. Nó là công cụ đơn giản và nhẹ giúp bạn thoát khỏi các trang web nặng nề bằng cách loại bỏ các file JS, CSS không dùng đã được đăng ký bởi theme và plugin. Cách tăng tốc WordPress? Tôi đã viết chi tiết một bài dành riêng cho tăng tốc WordPress. …

Đọc thêm

Chi tiết kỹ thuật của instant.page

Bởi

Phần này giúp bạn tùy chỉnh sâu hơn instant.page: công cụ giúp tăng tốc website dù các tùy chọn mặc định của nó cũng đủ tốt rồi. Quá trình tải trước được thực hiện với <link rel=”prefetch” href=”url”>. Bạn có thể tìm hiểu thêm prefetch là gì ở đây. Mã nguồn là 200 dòng có thể đọc được. Trình duyệt hỗ trợ Instant.page được tôi (Alexandre Dieulot) liên tục cải tiến – không có tác động nào đối với các trình duyệt không hỗ trợ nó. Các trình duyệt dựa trên Chrome và Chromium có hỗ trợ đầy đủ kể từ …

Đọc thêm

Các trang không được tải trước trong instant.page

Bởi

Phần này giúp bạn tùy chỉnh sâu hơn instant.page: công cụ giúp tăng tốc website rất đơn giản, miễn phí nhưng hiệu quả. Thông thường các tùy chọn mặc định của Instant Page là đủ tốt rồi, nhưng bạn nào muốn điều chỉnh sâu hơn hãy đọc kỹ tài liệu bên dưới. Các trang có chuỗi truy vấn (“?”) Trong URL của chúng (còn được gọi là query) không được tải trước theo mặc định vì chúng đôi khi kích hoạt một hành động nằm ngoài ý định của người dùng nếu được tải trước (chẳng hạn như đăng xuất …

Đọc thêm

Giới thiệu instant.page: đoạn JS ngắn gọn giúp bạn tăng tốc website & bạn chỉ mất 1 phút để làm điều đó

Bởi

Amazon và các website khác nhận thấy rằng: việc loại bỏ chỉ 100 mili giây độ trễ thôi cũng đã giúp cải thiện doanh số bán hàng thêm 1% rồi. Nhưng độ trễ trên web không dễ gì khắc phục. Video giới thiệu: Mẹo giảm độ trễ Instant.page sử dụng tính năng tải trước ngay trong thời gian (just-in-time preloading) – nó tải trước một trang ngay trước khi người dùng nhấp vào liên kết của trang đó. Trên máy tính để bàn Trước khi người dùng nhấp vào một liên kết, họ sẽ di chuột (hover) qua liên kết đó. Khi người dùng di chuột …

Đọc thêm

Các tùy chọn tối ưu hóa JS trên trang WordPress trong thực tế

Bởi

WordPress là hệ thống mở điều đó giúp CMS này có vô số theme & plugin hỗ trợ thuận lợi cho người dùng. Tuy nhiên nó cũng tạo ra nhược điểm là các thiết kế bên trong có thể chưa tối ưu. Các lời khuyên về tối ưu tốc độ, hiệu suất cho JS trước đây thường khuyên chúng ta gộp các file JS trên toàn trang thành một file duy nhất và minify (giảm thiểu kích cỡ) của nó. Nhưng điều đó sẽ không còn là cách tối ưu nhất hiện nay khi các file JS có khả năng tải song …

Đọc thêm

Những nhà phát triển plugin, theme thân mến, bạn không cần dùng jQuery đâu!

Bởi

Hồi năm 2013 khi tôi bắt đầu viết mã JavaScript, tôi đã nghĩ là jQuery thực sự là “JavaScript” và jQuery nên được đưa vào mọi trang web để thực thi đoạn mã JS của tôi. Nhưng vì sao lại thế? Bởi vì mọi đoạn code tôi copy từ StackOverflow chỉ hoạt động sau khi importing jQuery vào! Vấn đề với jQuery là gì? jQuery nặng khoảng 90KB, khi được nén chỉ còn tầm 32KB. Lượng đó rất nhỏ. Một CDN chất lượng tốt có thể phân phối nó trong vòng chưa đến 50ms! Nhưng vấn đề lại không phải …

Đọc thêm

Plugin LiteSpeed Cache đang làm tốt nhiệm vụ trì hoãn (lazy load) iframe

Bởi

Nếu lazy load ảnh có nhiều plugin hỗ trợ (ví dụ Flying Images, a3 Lazy Load) có chất lượng rất tốt giúp cải thiện tốc độ trang thì không có nhiều plugin như vậy làm tốt việc trì hoãn tải iframe. iframe là thẻ bạn hay dùng khi muốn nhúng video từ YouTube, hoặc hộp likebox cho fanpage. Và tôi trước đây thường sợ các app của bên thứ ba như vậy, vì chúng tải rất nhiều JS về, làm tốc độ trang giảm thảm hại. Nếu bạn muốn biết YouTube tải nặng như thế nào thì bạn đọc bài …

Đọc thêm