建站
咨詢
售后
建站咨詢
新聞中心
最近更新了我們的網(wǎng)站，它是經(jīng)過了設(shè)計(jì)上的全面驗(yàn)收的。但實(shí)際上，作為軟件開發(fā)者，我們會(huì)注重很多技術(shù)相關(guān)的零碎的東西。我們的目標(biāo)是控制性能，注重性能，未來可伸展，為網(wǎng)站增添內(nèi)容是一種樂趣。接著就來告訴你，為什么我們的網(wǎng)站速度比你們的快吧(抱歉，確實(shí)是這樣的)。
目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、萬柏林網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
性能設(shè)計(jì)
在我們的項(xiàng)目中，我們每天都會(huì)和設(shè)計(jì)師和產(chǎn)品負(fù)責(zé)人討論關(guān)于平衡美觀和性能的問題。對于我們自己的網(wǎng)站，這樣做是很簡單的。簡言之，我們認(rèn)為好的用戶體驗(yàn)從快速的內(nèi)容傳輸開始，也就意味著 性能 > 美觀。
好的內(nèi)容、布局、圖片和交互是吸引用戶的重要因素。這每個(gè)因素都會(huì)影響頁面的加載時(shí)間和終端用戶體驗(yàn)。每一步我們都在探討如何在獲得好的用戶體驗(yàn)和保證設(shè)計(jì)美感的同時(shí)，最小化對性能的影響。
內(nèi)容優(yōu)先
我們想要把核心內(nèi)容盡快地呈現(xiàn)給用戶，意味著我們要處理好基本的 HTML 和 CSS。每個(gè)頁面都應(yīng)該達(dá)到基本的目的：傳遞信息。JS、CSS、網(wǎng)頁字體、圖片、網(wǎng)站分析等優(yōu)化都是位居于核心內(nèi)容之下的。
可控性
給理想網(wǎng)站定義了標(biāo)準(zhǔn)后，我們總結(jié)出：要想達(dá)到預(yù)期效果，就要能對網(wǎng)站各方面的控制都游刃有余。我們選擇構(gòu)建自己的靜態(tài)站點(diǎn)生成器，包括資源傳輸，并且由我們自己操控。
靜態(tài)站點(diǎn)生成器
我們用 Node.js 實(shí)現(xiàn)了靜態(tài)站點(diǎn)生成器。它是采用帶有簡短 JSON 頁面描述標(biāo)簽的 Markdown 文件來生成整個(gè)網(wǎng)站結(jié)構(gòu)和它所有的資源。為了包括特殊的頁面腳本，也可以附帶一個(gè) HTML 文件。以下是一個(gè)簡單化的描述標(biāo)簽和 markdown 文件，用于博客的發(fā)布，用它來生成真正的 HTML。
- JSON 描述標(biāo)簽:
- {
- "keywords": ["performance", "critical rendering path", "static site", "..."],
- "publishDate": "2016-07-13",
- "authors": ["Declan"]
- }
markdown 文件:
- # Why our website is faster than yours
- We've recently updated our site. Yes, it has a complete...
- ## Design for performance
- In our projects we have daily discussions...
圖片傳輸
平均一個(gè) 2406kb 的網(wǎng)頁中 1535kb 是圖片。就因?yàn)閳D片在網(wǎng)站中占據(jù)了這么大的一個(gè)比例，所以它也是性能優(yōu)化的重點(diǎn)之一。
WebP格式
WebP是一種現(xiàn)代圖片格式，為網(wǎng)頁圖片提供了出色的低損耗、有損壓縮。WebP格式的圖片實(shí)質(zhì)上比其它格式的小，有時(shí)可以比同樣的 JPEG 圖片小 25%。 WebP被大多數(shù)人所忽略，也沒被經(jīng)常使用。截止到寫這篇文章的時(shí)候，WebP 僅支持Chrome, Opera 和 Android (仍超過了我們50%的用戶)，但我們可以優(yōu)雅降級為 JPG/PNG。
使用
我們使用Scott Jehl 的 picturefill 來使那些不支持
我們使用 作為那些不支持
生成
盡管圖片傳輸方式已經(jīng)確定了，我們?nèi)孕枰伎荚撛鯓佑行У貓?zhí)行。我喜歡
生成圖片
在構(gòu)建過程中，原圖片的多個(gè)實(shí)例，包括JPG, PNG和WebP格式，我們使用 gulp responsive 來生成。
最小化圖片
在markdown文件中寫[圖片描述](image.jpg).
在構(gòu)建過程中使用自定義Markdown渲染器來為已經(jīng)完全成熟的
SVG動(dòng)畫
我們?yōu)樽约旱木W(wǎng)站選擇了特定的圖標(biāo)類型，其中SVG插圖占了主要地位。這樣做有以下幾個(gè)原因：
- 首先，SVG的圖片比位圖更小;
- 其二，SVG圖片本身就是響應(yīng)式的，有很棒的伸縮性, 所以不需要圖片生成及
元素; - 最后也是很重要的一點(diǎn)，就是我們可以通過CSS來不斷改變它，賦予它新的活力!我們所有的組合頁面都有一個(gè)自定義的動(dòng)態(tài)SVG圖, 可以被概述頁面所復(fù)用。這張圖片作為我們所有組合頁面的一種循環(huán)風(fēng)格，使得頁面設(shè)計(jì)一體化，同時(shí)又幾乎不會(huì)對性能造成影響。請看這張動(dòng)畫，看看我們是如何用CSS來改變它的。
自定義網(wǎng)頁字體
在深入之前，這里有一個(gè)關(guān)于在瀏覽器設(shè)置自定義字體的簡短介紹。當(dāng)瀏覽器發(fā)現(xiàn)CSS里面有@font-face 的定義，但是用戶的電腦并不支持該字體時(shí)，它會(huì)嘗試下載該字體文件。在下載時(shí)，多數(shù)瀏覽器根本不會(huì)用這種字體來展示文本。這種現(xiàn)象稱為“不可見文本的閃現(xiàn)” 或者 FOIT。如果你有留意，你會(huì)發(fā)現(xiàn)網(wǎng)頁上都有這種情況存在。如果你問我，我會(huì)告訴你這會(huì)影響用戶體驗(yàn)。它延遲了用戶讀取他們所需內(nèi)容的時(shí)間。我們可以迫使瀏覽器改變這種行為，變成 “無樣式內(nèi)容閃現(xiàn)” 或者稱為 FOUT。我們告訴瀏覽器先使用普通字體，像 Arial 或者 Georgia。當(dāng)自定義的字體下載完成后，再代替標(biāo)準(zhǔn)字體并且重新渲染。這樣，即使自定義字體下載失敗，仍然不會(huì)影響內(nèi)容的可讀性。然而，有人會(huì)認(rèn)為這是一種妥協(xié)的做法，但我們認(rèn)為自定義字體只是一種優(yōu)化。盡管沒有自定義字體，網(wǎng)頁看起來也完好，也能百分百的正常運(yùn)行。勾選/不勾選復(fù)選框來切換我們的網(wǎng)頁字體，來自己體驗(yàn)一下：
切換下載的字體類
使用自定義網(wǎng)頁字體可以改善我們的用戶體驗(yàn)，只要你能夠優(yōu)化他們，并且負(fù)責(zé)任地為之服務(wù)。
字型子集設(shè)定
到目前為止，子集設(shè)定是改善網(wǎng)頁字體性能最快的方式。我將會(huì)向每個(gè)使用自定義字體的網(wǎng)頁開發(fā)者推薦它。如果你能完全控制網(wǎng)頁內(nèi)容，并且知道它將要展示哪些特性的話，你可以完全使用子集設(shè)定。但是，即使是僅僅把字體設(shè)為西方語言，也會(huì)對文件大小造成很大的影響。例如，我們的 Noto Regular WOFF 字體，默認(rèn)是246KB，將其設(shè)為西方語言后，大小下降到31KB。我們使用 Font squirrel webfont, 這種字體真的很易用。
字體監(jiān)聽器
Bram Stein 推出的字體監(jiān)聽器是一個(gè)很了不起的腳本，可以幫助檢查字體是否已被加載。至于你是如何加載字體的，是通過一個(gè)網(wǎng)頁字體服務(wù)，還是自己上傳就不可知了。在這個(gè)監(jiān)聽器告訴我們所有自定義的字體已經(jīng)下載完畢后，我們就可以在 元素上添加一個(gè)字體加載完畢的類，我們的頁面就會(huì)重新用新的字體：
- html {
- font-family: Georgia, serif;
- }
- html.fonts-loaded {
- font-family: Noto, Georgia, serif;
- }
注意： 為了簡短，我沒有給上面CSS中的 Noto 加上 @font-face 的聲明。
我們可以設(shè)定一個(gè)cookie來記住所有的字體已經(jīng)被加載過，就可以讓他們緩存在瀏覽器里面了。我們使用這個(gè)cookie來做重復(fù)的瀏覽，這個(gè)我后續(xù)會(huì)解釋。
在不久的將來，我們或許不需要 Bram Stein 的腳本來監(jiān)聽這個(gè)行為。CSS開發(fā)團(tuán)隊(duì)已經(jīng)提案一個(gè)新的 @font-face 描述器，也叫font-display。它的屬性值控制著一個(gè)可下載的字體是如何在還沒加載出來時(shí)就渲染頁面的。這是CSS對font-display的描述：它將帶給我們像上面方法一樣的行為效果。你可以讀讀更多關(guān)于 font-display 的屬性。
JS和CSS懶加載
一般來講，我們都是盡可能快的加載需要的資源。我們移除一些堵塞的請求來加快頁面渲染，優(yōu)化首屏，用瀏覽器緩存來處理重復(fù)的頁面。
JS懶加載
設(shè)計(jì)上，我們的網(wǎng)站并沒有很多JS。我們發(fā)展了一個(gè)JavaScript工作流來處理我們目前已有的js, 以及未來會(huì)用到的js資源。
JS在
塊里面渲染，這是我們想要的。JS應(yīng)該只是用來提高用戶體驗(yàn)，不應(yīng)該是訪問者需要的關(guān)鍵。處理JS堵塞渲染的簡單方法就是把腳本放在頁面的尾部。這樣網(wǎng)頁就會(huì)在整個(gè)HTML 渲染完畢后才去加載JS。另一種可以把腳本放在 head 執(zhí)行的方案是在
我們把這小段腳本放在頁面頭部，來檢測瀏覽器是否支持原生JavaScript的 document.querySelector 和 window.addEventListener屬性。如果支持，我們通過
Apache 服務(wù)端邏輯看起來像一行一行的備注，一般以 如果是true的話，我們就假定這是用戶的第一次瀏覽。
第一次瀏覽我們添加了