整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
總體來看85分，性能還是蠻不錯的，但還是給出了一些優化建議
一條條從前端的角度分析一下
縮短初始服務器響應時間
這個主要與域名解析與布局，服務器性能，首站資源請求數量相關。前端開發需要注意的是，盡可能將不需要的資源去掉，減少引用庫的數量和大小，即按需引入，或者自己封裝通用的js方法和組件等。
使用視頻格式提供動畫內容
大型 GIF 無法提供動畫內容。通過將大型 GIF 轉換為視頻，您可以節省大量用戶帶寬?？紤]將 MPEG4/WebM 視頻用于動畫，將 PNG/WebP 用于靜態圖像網站優化，盡量不使用 GIF網站優化，以節省網絡字節。但這也可能會增加人力成本，比如視頻的設計，網站是否需要更合理的布局等。
減少未使用的
可能某些js被引入卻并未使用，我們需要將其取消，前端開發應避免引入未使用的方法，組件，文件等，可以通過進行規范。
移除阻塞未渲染的資源
小網站，關鍵css和js進行內聯，會大大加快渲染速度
內聯js
<html>
<head>
<script type="text/javascript">
/* page.js的內容 */
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
內聯css
<html>
<head>
<style tpe="text/css">
.blue {
color: blue;
}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
HTML5允許我們給 標簽添加屬性： “async” 來告訴瀏覽器不必停下來等待該腳本執行，什么時候下載完什么時候執行該腳本就可以了。這樣的話瀏覽器會邊下載page.js邊渲染后面的內容。
<html>
<head>
<script type="text/javascript" src="page.js" async></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
對于那些首屏渲染不需要用到的CSS，我們可以依舊使用文件形式并在頁面內容渲染完成后再加載。
<!doctype html>
<html>
<head>
</head>
<body>
<div>
Hello, world!
</div>
<link href="other.css" rel="stylesheet" />
</body>
</html>
采用新一代格式提供圖片
如果網站圖片較多，較大，WebP 和 AVIF 等圖片格式的壓縮效果通常優于 PNG 或 JPEG，因而下載速度更快，消耗的數據流量更少。
使用標簽，是 H5 中的一個新標簽，類似它也可以指定多個格式的資源，由瀏覽器選擇自己支持的格式進行加載。
<picture class="picture">
<source type="image/webp" srcset="image.webp">
<img class="image" src="image.jpg">
</picture>
更多關于前端使用webp的相關內容，請前往
確保文本在加載字體期間保持可見狀態
避免在加載自定義字體時顯示不可見文本的最簡單方法是臨時顯示系統字體。通過包含font-: swap在您的@font-face風格中，您可以在大多數現代瀏覽器中避免 FOIT
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
圖片沒有給定寬高
我們都知道，圖片在瀏覽器中，如果沒有給定寬高，那圖片自己的分辨率就是其在瀏覽器中的寬高。但這會增大頁面布局所需的計算和速度。請為圖片元素設置明確的寬度值和高度值，以減少布局偏移并改善 CLS。
注冊事件監聽
盡量避免使用事件處理某些邏輯?！笔录粫煽康赜|發，而且監聽該事件可能會妨礙系統實施“往返緩存”之類的瀏覽器優化策略。請改用“”或“”事件。
window.addEventListener('pagehide', (event) => {
if (event.persisted) {
console.log('This page *might* be entering the bfcache.');
} else {
console.log('This page will unload normally and be discarded.');
}
});
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
