整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
今的網(wǎng)絡(luò)中，頁面加載速度是最重要的網(wǎng)站指標(biāo)之一。即使是毫秒也會(huì)對(duì)用戶體驗(yàn)、產(chǎn)品產(chǎn)生巨大影響，而緩慢的頁面加載會(huì)輕易的的降低轉(zhuǎn)化率。您可以采用許多工具和技術(shù)來加快網(wǎng)站速度。在本文中，我們將介紹可用于改善前端性能的最佳CSS優(yōu)化技巧。
1.查找性能瓶頸
所有優(yōu)化中最重要的事情是從全面診斷開始。幸運(yùn)的是，有許多CSS診斷工具可以幫助您發(fā)現(xiàn)任何性能瓶頸。首先，您可以使用網(wǎng)絡(luò)瀏覽器的DevTools檢查資產(chǎn)加載的速度。在大多數(shù)瀏覽器中，您可以通過按F12按鈕打開DevTools 。
例如，在Firefox DevTools中，可以使用“ 網(wǎng)絡(luò)”選項(xiàng)卡檢查頁面加載的所有CSS文件的大小和加載時(shí)間。您還可以測試使用和不使用緩存時(shí)CSS加載的速度。由于DevTools還顯示了外部CSS，例如Google字體文件和從第三方CDN提取的CSS資源，因此您可以找到許多您以前都不知道的資源。
Pingdom Tools和Google提供的Lighthouse是開發(fā)人員經(jīng)常用來分析網(wǎng)站速度和前端性能的另外兩個(gè)免費(fèi)工具。例如，如果您運(yùn)行簡單的網(wǎng)站速度測試，則Pingdom Tools會(huì)為您提供一些有用的CSS優(yōu)化技巧。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
2.縮小和壓縮CSS文件
大多數(shù)網(wǎng)站都依賴多個(gè)CSS文件。盡管在大多數(shù)情況下，模塊化CSS被認(rèn)為是最佳實(shí)踐，但是加載所有文件可能需要一段時(shí)間。但是，這正是CSS縮小和壓縮工具存在的原因。如果您適當(dāng)?shù)厥褂盟鼈儯瑒t可以大大縮短頁面加載時(shí)間。
有一些在線工具，例如CSS Minify，可讓您通過將其復(fù)制粘貼為簡單形式來縮小CSS文件的大小。這種類型的工具可以與較小的項(xiàng)目很好地配合。但是，對(duì)于帶有多個(gè)CSS文件的大型項(xiàng)目，使用它們會(huì)變得很麻煩且耗時(shí)。在這種情況下，最好選擇自動(dòng)化解決方案。
如今，大多數(shù)構(gòu)建工具可讓您在代碼庫上自動(dòng)執(zhí)行壓縮。例如，默認(rèn)情況下，Webpack將所有文件作為縮小的包返回。PostCSS還具有諸如CSS Nano之類的智能插件，它們不僅可以縮小文件的大小，還可以通過許多有針對(duì)性的優(yōu)化來運(yùn)行它。
3.使用Flexbox和CSS網(wǎng)格
如果在編寫CSS時(shí)仍僅依靠傳統(tǒng)的框模型，并使用邊距，填充和浮點(diǎn)在屏幕上對(duì)齊項(xiàng)目，則應(yīng)考慮采用更現(xiàn)代的布局模塊，即flexbox和CSS Grid。這些新模型使您可以用更少的代碼來實(shí)現(xiàn)復(fù)雜的布局。
使用較舊的技術(shù)，您甚至需要進(jìn)行許多技巧和調(diào)整，即使是比較簡單的事情，例如將項(xiàng)目垂直居中。但是，flexbox和CSS Grid并非如此。盡管拾取新的布局模塊可能要花費(fèi)一些時(shí)間，但還是值得的，因?yàn)镃SS文件要小得多。flexbox尤其如此，到目前為止，flexbox具有相當(dāng)不錯(cuò)的瀏覽器支持（目前全球支持 98.3％）。
盡管瀏覽器對(duì)CSS Grid的支持還不夠完善（目前占全球的92.03％），但如果不必支持舊版瀏覽器或愿意提供后備功能，則仍然可以使用它。
4.使用<link>標(biāo)記代替@import規(guī)則**
您可以使用兩種主要技術(shù)來使網(wǎng)頁加載CSS文件：
使用<link>標(biāo)記將它們添加到HTML頁面的<head>部分，
使用*@import *CSS規(guī)則從其他樣式表導(dǎo)入它們。
您需要將@import規(guī)則添加到主CSS文件的頂部。在大多數(shù)情況下，它用于加載較小的資源，例如字體和其他設(shè)計(jì)元素。最初，這似乎是一個(gè)不錯(cuò)的解決方案，但是，與HTML頁面使用<link>標(biāo)記直接加載樣式表相比，瀏覽器加載額外的樣式表所花的時(shí)間要長得多。
當(dāng)您在HTML頁面中添加多個(gè)CSS文件時(shí)，請務(wù)必注意CSS特殊性。首先添加最通用的樣式表，然后再選擇更具體的樣式表。您需要這樣做，因?yàn)橐院筇砑拥臉邮奖頃?huì)覆蓋以前的CSS文件的規(guī)則。例如，以下示例以正確的順序添加CSS文件時(shí)：
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">
5.使用漸變和SVG代替圖像
將所有圖像加載到網(wǎng)頁上可能要花費(fèi)大量時(shí)間。開發(fā)人員使用許多圖像優(yōu)化技術(shù)來減輕這種影響，例如從外部CDN加載圖像或使用諸如TinyJPG之類的圖像壓縮工具。這些解決方案可以提供很多幫助，但是很多時(shí)候，您都可以使用原生CSS效果替換大量資源的JPG和PNG圖像。
例如，您可以使用漸變來代替背景圖像，而背景圖像可能會(huì)大大降低用戶瀏覽器的速度。您可以使用CSS的漸變功能來創(chuàng)建線性，徑向和重復(fù)漸變。使用這些CSS原生功能，您不僅可以定義顏色，還可以定義漸變的角度。
例如，以下規(guī)則創(chuàng)建了一個(gè)很好的漸變背景，其加載速度比任何圖像都要快：
div {
background: linear-gradient(45deg, lightgreen, royalblue);
}
對(duì)于更復(fù)雜的漸變和紋理，還可以使用CSSmatic（在下圖顯示）和ColorZilla這樣的生成器。
除漸變外，您還可以使用可縮放矢量圖形（SVG）替換傳統(tǒng)的JPG和PNG圖像。它們不僅加載速度更快，而且您只需要包含該圖像的一個(gè)版本。這是因?yàn)镾VG由于其向量性質(zhì)而可以按比例放大到任何大小而沒有任何質(zhì)量損失。此外，您也可以使用CSS設(shè)置SVG的樣式，就像普通的HTML文件一樣。
6.避免重要規(guī)則
盡管！important規(guī)則在某些情況下可能是天賜之物，但您僅應(yīng)將其作為最后的選擇。此規(guī)則從級(jí)聯(lián)中創(chuàng)建一個(gè)異常。因此，當(dāng)您在CSS聲明中添加！important時(shí)，它將覆蓋所有其他聲明，即使是那些具有更高特異性的聲明。它的語法如下所示：
h1{
margin-bottom: 20px!important;
}
如果CSS中有太多重要規(guī)則，則用戶的瀏覽器將不得不對(duì)代碼進(jìn)行額外的檢查，這可能會(huì)大大降低頁面速度。根據(jù)經(jīng)驗(yàn)，切勿在整個(gè)站點(diǎn)范圍的CSS或創(chuàng)建主題或插件時(shí)使用！important。如果可能，請僅在要覆蓋來自第三方庫的CSS時(shí)使用它。
7.考慮CSS重構(gòu)
盡管CSS重構(gòu)很少是一件容易的事，但在許多情況下，它可以顯著提高網(wǎng)站性能。例如，如果CSS文件太大，或者您繼承了舊版代碼庫，或者頁面加載時(shí)間很差，嚴(yán)重?fù)p害了轉(zhuǎn)換率。CSS重構(gòu)的目標(biāo)是使代碼更整潔，更可維護(hù)并且加載更快。
CSS重構(gòu)是一個(gè)多步驟的過程，在此過程中，您需要分析CSS代碼庫的各個(gè)方面。您需要檢查幾件不同的事情，例如：
無論您有未使用或重復(fù)的CSS規(guī)則或資源，
是否可以利用Flexbox和CSS網(wǎng)格等更現(xiàn)代的技術(shù)，
是否使用過多的特異性（可以使用此視覺特異性計(jì)算器進(jìn)行計(jì)算），
CSS文件的結(jié)構(gòu)是否合理（例如，維護(hù)較小的文件比維護(hù)較大的文件更容易），
是否值得使用自動(dòng)構(gòu)建工具，
還有很多其他
在開始重構(gòu)之前，還應(yīng)設(shè)置可衡量的目標(biāo)并選擇要使用的基準(zhǔn)，例如頁面加載時(shí)間或第一個(gè)有意義的繪制，以便您可以比較它們的前后值。
同樣不要忘記使用版本控制工具，例如Git。這樣，如果出現(xiàn)任何問題，您可以返回到以前的代碼版本。
包起來
您可以使用許多CSS優(yōu)化技巧來改善網(wǎng)站的性能。它們中的大多數(shù)易于實(shí)現(xiàn)，但會(huì)對(duì)頁面加載時(shí)間產(chǎn)生重大影響。更快的加載頁面不僅可以增強(qiáng)用戶體驗(yàn)，還可以幫助您在Google和其他搜索引擎中獲得更好的排名。
除了CSS優(yōu)化最佳實(shí)踐之外，您還可以使用許多其他技術(shù)來提高加載速度，例如緩存，Google AMP和HTTPS協(xié)議。
作者：游X魚
鏈接：https://www.jianshu.com/p/69198ac60e53
何提升Web頁面的性能，很多開發(fā)人員從多個(gè)方面來下手如JavaScript、圖像優(yōu)化、服務(wù)器配置，文件壓縮或是調(diào)整CSS。
很顯然HTML 已經(jīng)達(dá)到了一個(gè)瓶頸，盡管它是開發(fā)Web 界面必備的核心語言。HTML頁面的負(fù)載也是越來越重。大多數(shù)頁面平均需要40K的空間,像一些大型網(wǎng)站會(huì)包含數(shù)以千計(jì)的HTML 元素，頁面Size會(huì)更大。
如何有效的降低HTML 代碼的復(fù)雜度和頁面元素的數(shù)量，本文主要解決了這個(gè)問題，從多個(gè)方面介紹了如何編寫簡練，清晰的HTML 代碼，能夠使得頁面加載更為迅速，且能在多種設(shè)備中運(yùn)行良好。
在設(shè)計(jì)和開發(fā)過程中需要遵循以下原則：
HTML,CSS 和JavaScript三者的關(guān)系
HTML 是用于調(diào)整頁面結(jié)構(gòu)和內(nèi)容的標(biāo)記語言。HTML 不能用于修飾樣式內(nèi)容，也不能在頭標(biāo)簽中輸入文本內(nèi)容，使代碼變得冗長和復(fù)雜，相反使用CSS 來修飾布局元素和外觀比較合適。HTML元素默認(rèn)的外觀是由瀏覽器默認(rèn)的樣式表定義的，如在Chrome中h1標(biāo)簽元素會(huì)渲染成32px的Times 粗體。
三條通用設(shè)計(jì)規(guī)則：
文檔結(jié)構(gòu)方面也可以做優(yōu)化，如下：
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>
使用這兩種方法，瀏覽器會(huì)在解析HTML代碼之前將CSS信息準(zhǔn)備好。因此有助于提升頁面加載性能。
在頁面底部body結(jié)束標(biāo)簽之前輸入JavaScript代碼，這樣有助于提升頁面加載的速度，因?yàn)闉g覽器在解析JavaScript代碼之前將頁面加載完成，使用JavaScript會(huì)對(duì)頁面元素產(chǎn)生積極的影響。
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
使用Defer和async屬性，腳本元素具有async 屬性無法保證會(huì)按順序執(zhí)行。
可在JavaScript代碼中添加Handlers。千萬別加到HTML內(nèi)聯(lián)代碼中，比如下面的代碼則容易導(dǎo)致錯(cuò)誤且不易于維護(hù)：
index.html:
<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
下面的寫法比較好：
index.html:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();
驗(yàn)證
優(yōu)化網(wǎng)頁的一種方法就是瀏覽器可處理非法的HTML 代碼。合法的HTML代碼很容易調(diào)試，且占內(nèi)存少，耗費(fèi)資源少，易于解析和渲染運(yùn)行起來更快。非法的HTML代碼讓實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)變得異常艱難。
當(dāng)使用模板時(shí)，合法的HTML代碼顯得異常重要，經(jīng)常會(huì)發(fā)生模板單獨(dú)運(yùn)行良好，當(dāng)與其他模塊集成時(shí)就報(bào)各種各樣的錯(cuò)誤，因此一定要保證HTML代碼的質(zhì)量，可采取以下措施：
代碼格式
格式一致性使得HTML代碼易于閱讀，理解，優(yōu)化，調(diào)試。
語義標(biāo)記
語義指意義相關(guān)的事物，HTML 可從頁面內(nèi)容中看出語義：元素和屬性的命名一定程度上表達(dá)了內(nèi)容的角色和功能。HTML5 引入了新的語義元素，如<header>，<footer>及<nav>。
選擇合適的元素來編寫代碼可保證代碼的易讀性：
例如：
<div>Name: <input type="text" id="name"></div>
換種寫法會(huì)更好：
1: <div> 2: <label for="name">Name:</label><input type="text" id="name"> 3: </div>
布局
要提高HTML代碼的性能，要遵循HTML 代碼以實(shí)現(xiàn)功能和為目標(biāo)，而不是樣式。
CSS
雖然本文講解的是如何優(yōu)化HTML，下面介紹了一些使用css的基本技能：
以上就是本文介紹的優(yōu)化HTML代碼的技巧，一個(gè)高質(zhì)量高性能的網(wǎng)站，往往取決于對(duì)細(xì)節(jié)的處理，因此我們在日常開發(fā)中，能夠考慮到用戶體驗(yàn)，后期維護(hù)等方面，則會(huì)產(chǎn)生更高效的開發(fā)。
頁加載速度在Shopify獨(dú)立站中扮演著相當(dāng)重要的角色。
你的網(wǎng)站加載速度越快，跳出率就會(huì)越低，轉(zhuǎn)化率也會(huì)更高。相應(yīng)的SEO的排名也會(huì)比速度慢的站點(diǎn)靠前。
Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results. Neil Patel Seo Expert Blog
那么今天我將介紹優(yōu)化shopify加載速度的所有方式。
速度測試工具
以下幾個(gè)工具可以免費(fèi)測試網(wǎng)頁速度。 不要只測試首頁，別忘了產(chǎn)品頁（product page）和類目頁（collection page）
1. Google Speed Insight
2. Gtmetrix
3. Pindom
4. Test My Site
注意：以下步驟需要了解HTML,CSS和Javascript等知識(shí)
在開始優(yōu)化之前，請備份主題！！！
在開始優(yōu)化之前，請備份主題！！！
在開始優(yōu)化之前，請備份主題！！！
1. 壓縮圖片
Shopify允許使用以下圖片格式
1. JPEG或JPG
2. Progressive JPEG
3. PNG
4. GIF
5. webp
圖片壓縮非常重要，可以說是影響網(wǎng)頁速度最重要的因素之一。在進(jìn)行圖像優(yōu)化時(shí)，請確保圖片尺寸正確。不要在單個(gè)頁面添加太多圖片
在壓縮圖片時(shí)，盡量保證圖片質(zhì)量。
要壓縮圖片，有以下兩種選擇
1. 使用Shopiy圖片壓縮插件壓縮圖片
2.使用在線圖片壓縮網(wǎng)站壓縮圖片，然后下載壓縮之后的圖片并上傳。推薦大家使用TinyPng。
2. 減少請求
使用GiftOfSpeed的HTTP請求檢查器工具可以找出您的頁面HTTPS請求總數(shù)。可以通過執(zhí)行以下操作減少HTTP請求
1. 合并內(nèi)聯(lián)CSS
2. 合并所有JavaScript
3. 減少頁面圖片的數(shù)量
4. 雪碧圖
5. 將圖像轉(zhuǎn)換為Base64代碼
6. 限制社交按鈕的數(shù)量
3. 分析shopify插件
shopify插件可以幫助我們提升我們的銷售額。但是需要注意的是，大多數(shù)插件都會(huì)拖慢網(wǎng)頁加載速度。
但是我不建議冒然卸載，而是應(yīng)該通過以下步驟來優(yōu)化：
1. 卸載效果不佳或者完全不需要的插件
你可能安裝過一些看起來很炫酷，或者別人說很好用的插件。但是你一定得進(jìn)行A/B test來檢查它是否真的有用。可以通過GA,插件自帶的分析工具，客戶的反饋，熱圖等工具來進(jìn)行分析
2. 檢查模板代碼中是否有舊的插件代碼
如果你已經(jīng)卸載了插件。那么你的模板代碼中很大概率存在沒有刪除干凈的插件代碼（很多插件單純卸載是刪不干凈的）你可以通過Chrome開發(fā)者工具打開Sources來查看
你可能無法識(shí)別每個(gè)域名，但是如果你發(fā)現(xiàn)了某個(gè)域名屬于你卸載的插件，那么這個(gè)插件就沒有刪除干凈，它依然在加載文件。例如，如果你卸載社交媒體登陸插件social-login.但是查看的時(shí)候依然發(fā)現(xiàn)了它的域名，那么就可以判斷并沒有刪除干凈
通常，你可以在theme.liquid文件中找到這些JS和CSS文件。
3. 根據(jù)條件加載插件
根據(jù)條件加載 = 僅僅在需要的頁面加載資源
這個(gè)操作需要編輯html或者其他代碼并且測試沒有錯(cuò)誤，請謹(jǐn)慎操作。
例如：大多數(shù)插件會(huì)將JS/CSS放在theme.liquid文件中。但是如果只是在產(chǎn)品頁需要這個(gè)插件的效果。那么腳本文件就不需要加載到所有頁面。
為了解決這個(gè)問題，可以限制腳本只加載到需要的地方：
4. 壓縮CSS、JS文件
CSS和JavaScript用于控制網(wǎng)站的樣式和行為。縮小這些文件可通過刪除多余的字符（如空格和注釋），縮短變量名以及組合常用樣式來壓縮它們。
使用該工具來縮小JavaScript：JSCompress。
如果您的模板代碼Assets文件夾中的文件名以.liquid結(jié)尾，則可能將無法使用這些策略，因?yàn)槠渲谢烊肓薼iquid代碼。也可以通過多種方式進(jìn)行操作，但很繁瑣，也可能可能會(huì)導(dǎo)致錯(cuò)誤，因此不太建議冒然修改。
5. 選擇速度更快的主題模板
實(shí)際上，shopify網(wǎng)站的加載速度主要取決于網(wǎng)站模板，因此在選擇模板時(shí)，一定要檢查一下內(nèi)容。
1. 通過速度測試工具測試模板預(yù)覽頁（首頁、產(chǎn)品頁、類目頁）
在安裝模板之后，不斷檢查或者聯(lián)系主題作者是否有更新，請保持在模板的最新狀態(tài)。
6. 刪除Quick Shop功能
Quick Shop也就是產(chǎn)品預(yù)覽/快速購買，可以很好的預(yù)覽產(chǎn)品。不過隨之而來的是更多圖片，JS和DOM的加載,我認(rèn)為這個(gè)功能會(huì)對(duì)轉(zhuǎn)化率造成負(fù)面影響，也會(huì)拖慢加載速度不利于用戶體驗(yàn)。所以這個(gè)功能建議關(guān)閉或刪除。
7. 首頁Banner使用單圖而不是輪播圖
輪播圖之前流行了一段時(shí)間，大家通常在輪播圖中添加3-4張高質(zhì)量的圖片。但是這極大的增加了頁面加載時(shí)間，其實(shí)可以完全使用Hero image代替輪播圖。
下面是一些有意思的統(tǒng)計(jì)，表面為什么不該使用輪播圖
1. 大多數(shù)用戶不會(huì)點(diǎn)擊輪播按鈕，實(shí)際上只有1%的人會(huì)點(diǎn)擊。資料
2. 輪播圖會(huì)影響用戶體驗(yàn)。資料
3. 輪播圖不利于SEO.資料
4. 輪播圖在移動(dòng)端不太友好。資料
建議大家使用Hero image來代替輪播圖。例如以下網(wǎng)站均是單個(gè)Banner
- Shein
- Fashionnova - Colourpop
Hero image具體定義
維基百科：主頁橫幅 (Hero Image) 是網(wǎng)頁設(shè)計(jì)的一個(gè)專業(yè)術(shù)語，一種特殊的網(wǎng)頁廣告。主頁橫幅是一個(gè)較大的橫幅圖片，放置在首頁面的醒目位置。
主頁橫幅往往是針對(duì)網(wǎng)站訪問者遇到的第一視覺頁面，其目的是要提出一個(gè)該網(wǎng)站最重要的內(nèi)容進(jìn)行概述。主頁橫幅往往由圖像和文字構(gòu)成，可以是靜態(tài)或動(dòng)態(tài)的內(nèi)容。
參考文獻(xiàn)：
How to Improve Page Load Speed on Shopify — Razorrank
Suggestions to optimize website loading speed — Google Web Performance
Improving Load Performance — Chrome DevTools 101
Shopify Speed Optimization — Step-by-Step Guide
How to Optimize a Shopify Site: Complete Guide to Faster Load Speed — SpeedBoostr
（來源：shopify fans）
以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。
上雨果網(wǎng)搜索“跨境資料庫”,領(lǐng)取歐美/東南亞各國市場商機(jī)、各大平臺(tái)熱銷品報(bào)告、跨境電商營銷白皮書！
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
