Demo web: https://lovemama.vn (web mvc5) 1. Rel=preload fonts fontawesome và fonts website Web của bạn gặp lỗi yêu cầu tải fonts trước 'preload'. Khắp phục lỗi này bạn lên header web chèn code sau vào. HTML: <link rel="preload" as="font" href="/fonts/fontawesome-webfont.woff?v=4.2.0" type="font/woff2" crossorigin="anonymous"> <link rel="preload" as="font" href="/fonts/roboto/Roboto-Regular.woff" type="font/woff" crossorigin="anonymous"> <link rel="preload" as="font" href="/fonts/roboto/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous"> Truy cập tới file .css nơi gọi @font-face của fonts chữ lên chèn code dưới vào trong font-face Mã: font-display: swap; 2. Phân phối bộ nhớ đệm hiệu quả, tăng bộ nhớ đệm hình ảnh images trên web Chèn tại web.config Mã: <system.webServer> <staticContent> <clientCache cacheControlCustom="public" cacheControlMaxAge="365.00:00:00" cacheControlMode="UseMaxAge" /> <remove fileExtension=".woff" /> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> <!--<mimeMap fileExtension=".webp" mimeType="image/webp" />--> </staticContent> <security> <requestFiltering> <requestLimits maxAllowedContentLength="52428800"/> </requestFiltering> </security> <httpProtocol> <customHeaders> <add name="Cache-Control" value="public" /> <remove name="X-Powered-By" /> </customHeaders> </httpProtocol> </system.webServer> 3. Nén gzip, deflate, sdch CSS, JS, Content 3.1 Gzip css, js Bật nén Compression gzip bạn truy cập vào web.config chèn code sau vào. Mã: <system.webServer> <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files" minFileSizeForComp="1024"> <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"/> <dynamicTypes> <add mimeType="text/*" enabled="true"/> <add mimeType="message/*" enabled="true"/> <add mimeType="image/*" enabled="true"/> <add mimeType="video/*" enabled="true"/> <add mimeType="application/javascript" enabled="true" /> <add mimeType="application/x-javascript" enabled="true" /> <add mimeType="application/json" enabled="true" /> <add mimeType="*/*" enabled="false"/> </dynamicTypes> <staticTypes> <add mimeType="text/*" enabled="true"/> <add mimeType="message/*" enabled="true"/> <add mimeType="image/*" enabled="true"/> <add mimeType="video/*" enabled="true"/> <add mimeType="application/javascript" enabled="true" /> <add mimeType="application/x-javascript" enabled="true" /> <add mimeType="application/json" enabled="true" /> <add mimeType="*/*" enabled="false"/> </staticTypes> </httpCompression> <urlCompression doStaticCompression="true" doDynamicCompression="true"/> </system.webServer> Nếu bạn kiểm tra js và css của bạn vẫn chưa được gzip bạn tham khảo tiếp bài sau để khắc phục sự cố ở phía server chưa được kích hoạt gzip nhé. https://docs.microsoft.com/en-us/iis/configuration/system.webServer/httpCompression/ 3.2 Min nén toàn bộ HTML, min HTML web. Mặc định html của bạn sẽ có rất nhiều khoảng trắng và xuống dòng, tạo thành 1 file html khá nặng khi dữ liệu được tải tới máy người dùng, để nén hết toàn bộ html loại bỏ các khoảng trắng lại bạn sử dụng Nuget sau: Sử dung: WebMarkupMin để min html toàn web: https://www.nuget.org/packages/WebMarkupMin.Core https://www.nuget.org/packages/WebMarkupMin.AspNet4.Mvc/ Sau đó vào: FilterConfig.cs add code sau vào: Mã: filters.Add(new MinifyHtmlAttribute()); filters.Add(new CompressContentAttribute()); filters.Add(new MinifyXmlAttribute()); 3.3 Nén min css và js CSS và JS nặng tạo dữ liệu rất cồng kềnh khi duyệt web, việc nén min js và css có rất nhiều cách khác nhau và có nhiều Nuget hỗ trợ, ITSEOVN hiện tại đang sử dụng nuget sau: Cài để BuildBundlerMinifier min css, js https://www.nuget.org/packages/BuildBundlerMinifier/ Hướng dẫn: https://github.com/madskristensen/BundlerMinifier Tạo file: bundleconfig.json ngang với root cầu hính cho nó và build mỗi khi cần sinh dữ liệu 3.4 Inline css styles CSS thường bị lỗi Loại bỏ các tài nguyên chặn hiển thị khi chấm điểm. Để khắc phục lỗi này bạn đọc bài sau nhé: https://itseovn.com/threads/cach-chen-include-inline-file-css-styles-len-tren-razor-view-mvc.321249/ 4. Tối ưu tải đầu cho web. Web MVC sau 30p sẽ khơi động lại miền ứng dụng làm việc truy cập người đầu tiên tải đầu rất lâu, để khắc phục bạn đọc bài sau: https://itseovn.com/threads/tai-dau-bi-cham-asp-net-slow-on-first-access-mvc.320978/ 5. Tạo Cache cho website Quan trọng nhất của 1 web muốn tải nhanh chính là Cache web. Cache MVC có khá nhiều Nuget hỗ trợ và mặc định web cũng đã có, chỉ là việc sử dụng sao cho hiệu quả là điều quan trọng nhất. ITSEOVN hiện đang sử dụng 2 cache tăng tốc web là: OutputCache (mặc định đã có sẵn), Memory Cache (cài Nuget) Theo kinh nghiệm của mình. OutputCache: sử dụng cho các Actionresult PartialView như header, footer, các sidebar (vì việc quản lý xóa OutputCache thủ công không được, cache tự xóa theo thời gian). Memory Cache: sử dụng cho lưu cache database cho các view kết quả danh sách sản phẩm, chi tiết sản phẩm (vì Memory Cache bạn có thể quản lý xóa khi có dữ liệu mới cập nhật vào). Cài Memory Cache: Bạn xem ở link sau: https://www.nuget.org/packages/system.runtime.caching/ Code mình tham khảo tạo theo cũng khá ok và đơn giản để cache database: https://drive.google.com/file/d/1e0UUY1p_pmCjGf9YNuBNhzC6YfxGLOTV/view?usp=sharing Lưu ý: một số lập trình viên thường tạo js riêng cho mobi và latop thành 2 file khác nhau. Việc tạo 2 file riêng biệt này thường gây lỗi gzip trên các phiên bản iis 8 trở lên. Nên theo ITSEOVN nên tối ưu js xài chung cho mobi và latop chung với nhau. Còn nếu muốn tách thì nên chia ra js inline ở các PartialView khác nhau sẽ tối ưu hơn. (tạo latop 1 PartialView load js inline, và mobi 1 PartialView load js inline riêng)
