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