當(dāng)前位置:首頁 > 觀瀾網(wǎng)頁設(shè)計(jì)觀瀾網(wǎng)頁設(shè)計(jì)
網(wǎng)站頁面精簡的10個(gè)優(yōu)化技巧日期:2020-03-06 人氣:804646
|
導(dǎo)讀:
那么,一個(gè)“頁面超重”的網(wǎng)站有什么影響呢?具體來說,有以下4點(diǎn): ①、網(wǎng)站代碼越多,用戶下載的就越多,加載速度就會越慢。在國內(nèi),并不是每個(gè)人都能享受20M的寬帶,每一個(gè)開發(fā)者心里都很清楚,用戶不愿意等。 ②、眾所周知,移動互聯(lián)網(wǎng)發(fā)展迅速,對于2G網(wǎng)絡(luò)來說,加載1.7M的頁面甚至需要一分鐘時(shí)間。 ③、影響搜索引擎抓取速度將會對網(wǎng)站排名
那么,一個(gè)“頁面超重”的網(wǎng)站有什么影響呢?具體來說,有以下4點(diǎn): ①、網(wǎng)站代碼越多,用戶下載的就越多,加載速度就會越慢。在國內(nèi),并不是每個(gè)人都能享受20M的寬帶,每一個(gè)開發(fā)者心里都很清楚,用戶不愿意等。 ②、眾所周知,移動互聯(lián)網(wǎng)發(fā)展迅速,對于2G網(wǎng)絡(luò)來說,加載1.7M的頁面甚至需要一分鐘時(shí)間。 ③、影響搜索引擎抓取速度將會對網(wǎng)站排名造成很大影響。 ④、對于開發(fā)者來說,代碼量越大,就越不容易更新和維護(hù)。 如今已經(jīng)有很多人開始關(guān)注這個(gè)問題,并出現(xiàn)了很多優(yōu)化的工具,而且這些技術(shù)都非常容易上手,不需要花太多時(shí)間,也不需要重新開發(fā)。 網(wǎng)站頁面精簡的10個(gè)優(yōu)化技巧 在本文中,會給大家一些建議,雖說前三個(gè)建議實(shí)際上不能給“網(wǎng)頁減肥”,但它們?nèi)阅苡行У募涌炀W(wǎng)頁加載速度。 1、用GZIP格式壓縮 gzip是GNUzip的縮寫,它是一個(gè)GNU自由軟件的文件壓縮程序。它是Jean-loupGailly和MarkAdler一起開發(fā)的,第一次公開發(fā)布版本是1992年10月31日發(fā)布的版本0.1,1993年2月發(fā)布了版本1.0。 我們在Linux中經(jīng)常會用到后綴為.gz的文件,它們就是GZIP格式的,現(xiàn)今已經(jīng)成為Internet上使用非常普遍的一種數(shù)據(jù)壓縮格式,或者說一種文件格式。 HTTP協(xié)議上的GZIP編碼是一種用來改進(jìn)WEB應(yīng)用程序性能的技術(shù),大流量的WEB站點(diǎn)常常使用GZIP壓縮技術(shù)來讓用戶感受更快的速度。 這一般是指WWW服務(wù)器中安裝的一個(gè)功能,當(dāng)有人來訪問這個(gè)服務(wù)器中的網(wǎng)站時(shí),服務(wù)器中的這個(gè)功能就將網(wǎng)頁內(nèi)容壓縮后傳輸?shù)絹碓L的電腦瀏覽器中顯示出來。 一般對純文本內(nèi)容可壓縮到原大小的40%,這樣傳輸就快了,效果就是你點(diǎn)擊網(wǎng)址后會很快的顯示出來,當(dāng)然這也會增加服務(wù)器的負(fù)載,一般服務(wù)器中都安裝有這個(gè)功能模塊的。 根據(jù)W3C組織調(diào)查,大部分的網(wǎng)站都沒有啟用壓縮功能。 2、支持瀏覽器緩存 如果瀏覽器支持緩存,我們就不用重復(fù)下載網(wǎng)頁資源,最簡單的設(shè)置緩存方法是在響應(yīng)頭中添加相應(yīng)的內(nèi)容,包括:Expires header,Last-Modified等。 你可以可以通過配置服務(wù)器來自動添加這些屬性,比如你在Apache服務(wù)器中配置緩存所有的照片一個(gè)月: ExpiresActive On ExpiresDefault "access plus 1 month" 3、使用內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) CDN的全稱是Content Delivery Network,即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu),將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡(luò)“邊緣”,使用戶可以就近取得所需的內(nèi)容,提高用戶訪問網(wǎng)站的響應(yīng)速度。 CDN有別于鏡像,因?yàn)樗如R像更智能,或者可以做這樣一個(gè)比喻:CDN=更智能的鏡像+緩存+流量導(dǎo)流。 因而,CDN可以明顯提高Internet網(wǎng)絡(luò)中信息流動的效率,從技術(shù)上全面解決由于網(wǎng)絡(luò)帶寬小、用戶訪問量大、網(wǎng)點(diǎn)分布不均等問題,提高用戶訪問網(wǎng)站的響應(yīng)速度。 為更好地理解CDN,讓我們看一下CDN的工作流程,當(dāng)用戶訪問已經(jīng)加入CDN服務(wù)的網(wǎng)站時(shí),首先通過DNS重定向技術(shù)確定最接近用戶的最佳CDN節(jié)點(diǎn),同時(shí)將用戶的請求指向該節(jié)點(diǎn)。 當(dāng)用戶的請求到達(dá)指定節(jié)點(diǎn)時(shí),CDN的服務(wù)器(節(jié)點(diǎn)上的高速緩存)負(fù)責(zé)將用戶請求的內(nèi)容提供給用戶。 具體流程為: 用戶在自己的瀏覽器中輸入要訪問的網(wǎng)站的域名,瀏覽器向本地DNS請求對該域名的解析,本地DNS將請求發(fā)到網(wǎng)站的主DNS,主DNS根據(jù)一系列的策略確定當(dāng)時(shí)最適當(dāng)?shù)腃DN節(jié)點(diǎn),并將解析的結(jié)果(IP地址)發(fā)給用戶,用戶向給定的CDN節(jié)點(diǎn)請求相——應(yīng)網(wǎng)站的內(nèi)容。 4、刪除不需要的資源 當(dāng)你不再需要一個(gè)組件的時(shí)候,你應(yīng)該刪掉它的CSS和JavaScript代碼,如果這些代碼都單獨(dú)放在一個(gè)文件中,那刪掉它們也不是難事,但如果已經(jīng)沒有用的代碼和其它代碼在一個(gè)文件中,那你肯定要費(fèi)不少精力去刪掉它們。 這個(gè)時(shí)候你就需要使用第三方的工具來幫你一鍵解決,比如JSLint,Dust-Me Selectors,CSS Usage或是像grunt-uncss一樣的構(gòu)建工具。 5、style和font重復(fù)定義的沉余代碼 要充分利用好CSS代碼定義自己的顏色大小等,有些網(wǎng)站既用了CSS代碼定義了之后又去使用style或者是font這樣的代碼進(jìn)行定義,這樣就無形中增加了無用代碼,容易造成代碼冗余,因此我們要對這樣的代碼進(jìn)行壓縮,實(shí)現(xiàn)代碼精簡。 6、通用和最小化CSS 理想情況下,需要一個(gè)單獨(dú)的CSS文件,讓每個(gè)頁面都調(diào)用這一個(gè)布局,當(dāng)然,如果你想要支持老版本的IE,你就得多弄一個(gè)CSS文件。 另外,還要提醒大家一點(diǎn):當(dāng)你把它們構(gòu)建到服務(wù)器上之前,你應(yīng)該把代碼間所有不必要的格式都刪掉。 有很多預(yù)處理工具都可以幫你解決這件麻煩事,比如Sass,LESS和Stylus。 有一些方法可以幫助你直接合并多個(gè)CSS文件,在Windows上: copy file1.css+file2.css file.css 在Mac或Linux上: cat file1.css file2.css > file.css 你可以把得到的CSS文件再經(jīng)過在線的CSS壓縮工具刪除格式化。 最后,在head標(biāo)簽中加載所有的CSS,這樣瀏覽器就知道你的頁面樣式不用多次重繪了。 7、通用和最小化的JavaScript 利用外部文件,我們可以用Javascript代碼和CSS代碼放在外部文件里面,在我們的HTML代碼里面加上調(diào)用代碼進(jìn)行調(diào)用即可,如果打開一個(gè)網(wǎng)站去檢查它的源文件,前面如果有大量的Javascript代碼和CSS代碼就容易使得網(wǎng)站有用的內(nèi)容文字部分推到后面去了,是不利于搜索引擎抓取的。 收集的數(shù)據(jù)顯示:平均每個(gè)頁面加載了18個(gè)javascript文件,雖然把像jQuery這樣的庫文件單獨(dú)分開非常實(shí)用,但是你自己的JavaScript代碼應(yīng)該保持通用和最小化。 同樣很多第三方的工具可以幫你解決這樣事情,比如YUI Compressor,Closure Compiler和我最喜歡用的The JavaScript CompressorRater,簡化的JavaScript代碼會加快網(wǎng)頁的訪問速度,減少HTTP請求次數(shù)。 最后,最好在HTML的body標(biāo)簽后放置JavaScript引用代碼,這樣能保證JavaScript代碼不影響到其它內(nèi)容的加載。 8、減少頁面嵌套的表格 對于表格要盡量少使用,尤其是嵌套的表格部分,雖然CSS排版使得我們編寫代碼更加的精簡容易,但往往也是少不了表格的使用的,我們可以不去避免,但一定要減少使用多層嵌套的表格,不要產(chǎn)生沒有用的代碼。 9、網(wǎng)站圖片的優(yōu)化 對于一些圖片站來說,加載錯(cuò)誤的圖片格式會對你的網(wǎng)頁造成很大影響,所以,馬海祥建議圖片站的站長一定要多對圖片做些優(yōu)化。 (1)、圖片優(yōu)化原則 一般來說選取圖片我們應(yīng)用遵循如下原則: ①、照片使用JPG格式。 ②、其它所有的圖片都使用PNG格式(具體可查看馬海祥博客《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》的相關(guān)介紹)。 (2)、調(diào)整大圖的大小 目前智能機(jī)所拍出的照片越來越大,你不可能把原照片直接展示在頁面中,普通的編輯器都會直接上傳原圖,這樣會讓頁面的加載速度慢到另一個(gè)級別,在正常的照片處理中,一般都沒有必要給用戶高質(zhì)量的圖片展示,所以,你需要一個(gè)自動調(diào)整圖片大小的工具。 需要注意的是,圖片的尺寸是不能超過容量的大小的,這樣一來頁面加載了全圖,卻無法展示出來,現(xiàn)在照片的尺寸基本上都超過電腦顯示屏的尺寸了。 圖片的大小在網(wǎng)頁總大小中占很大的比重,圖片減小50%會導(dǎo)致整體頁面大小減少75%,所以你應(yīng)該認(rèn)真解決一下圖片的加載(具體可查看馬海祥博客《交互設(shè)計(jì)的三大隱形機(jī)制:加載、刷新和緩存》的相關(guān)介紹)。 (3)、進(jìn)一步壓縮圖片 僅僅調(diào)優(yōu)圖片的大小是不夠的,你應(yīng)該通過第三方工具對圖片進(jìn)行分析,進(jìn)一步壓縮圖片。 比較好用的工具有OptiPNG,PNGOUT,jpegtran和jpegoptim,這些工具大都能安裝成獨(dú)立的工具或是整合到開發(fā)過程中,另外像Smush這樣的工具,還可以直接在云端處理。 10、刪除不必要的字體和注釋 Web fonts已經(jīng)徹底改變了字體的設(shè)計(jì),它減少了很多不必要的文本,然而,目前的字體仍然會給你的網(wǎng)頁帶來多余的字節(jié)。 如果你使用超過兩種字體,這就已經(jīng)開始對性能造成影響了。 網(wǎng)頁代碼盡量少用注釋,我們知道一段程序里面加上注釋能夠便于我們快速找到和理解具體代碼對應(yīng)的功能,對于編程人員修改網(wǎng)頁是有幫助的,但是這樣的代碼對于搜索引擎來說是沒有任何的意義的,只能說是噪聲,因此我們要減少網(wǎng)頁代碼里面出現(xiàn)的注釋部分。 文本來自采集文章 http://wzl15.cn/24/595.html 如需轉(zhuǎn)載或刪除,請聯(lián)系管理員。 |
熱點(diǎn)資訊
- 01-23 網(wǎng)站優(yōu)化你要關(guān)注的四個(gè)決定后期排名的關(guān)鍵點(diǎn)
- 01-23 網(wǎng)頁設(shè)計(jì)色彩搭配之清淡柔和的蠟筆色
- 01-23 如何讓寶貝的排名到首頁
- 01-23 怎樣快速提升網(wǎng)站排名
- 01-23 企業(yè)網(wǎng)站建設(shè)的排名如何上百度首頁
- 01-23 企業(yè)網(wǎng)站搜索排名優(yōu)化推廣策略
- 01-23 網(wǎng)站建設(shè)未來趨勢是什么
- 01-23 企業(yè)網(wǎng)站優(yōu)化如何提升網(wǎng)站排名?
- 01-23 提高阿里排名的14條潛規(guī)則,您懂的!
- 01-23 實(shí)戰(zhàn)自己網(wǎng)站排名變化分析百度算法調(diào)整要重點(diǎn)關(guān)注的因素
- 01-23 有一個(gè)自己企業(yè)網(wǎng)站的重要性
- 01-23 想做好網(wǎng)站優(yōu)化 這些基礎(chǔ)的認(rèn)識你真的具備嗎
- 01-23 新企業(yè)如何進(jìn)網(wǎng)站建設(shè)
- 01-23 成立了公司怎么做一個(gè)企業(yè)網(wǎng)站必讀
- 01-23 淺析如何創(chuàng)新使用百度經(jīng)驗(yàn)來進(jìn)行網(wǎng)站推廣
- 01-23 網(wǎng)頁設(shè)計(jì)的套路
- 01-23 阿里巴巴店鋪排名優(yōu)化方案分享
- 01-23 網(wǎng)頁設(shè)計(jì)的套路
- 01-23 我的網(wǎng)站維護(hù)的一點(diǎn)心得體會分享
- 01-23 網(wǎng)頁設(shè)計(jì)的套路
- 01-23 網(wǎng)站排名記錄 如何做好外鏈優(yōu)化
- 01-23 手機(jī)網(wǎng)站建設(shè)相對PC端網(wǎng)站有何優(yōu)勢
- 01-23 阿里推出標(biāo)題優(yōu)化工具助商家提升搜索排名
- 01-23 網(wǎng)頁設(shè)計(jì)色彩搭配之清淡柔和的蠟筆色
【觀瀾本地網(wǎng)絡(luò)公司】——承諾3小時(shí)內(nèi)上門服務(wù)!觀瀾上門全國熱線:400-666-2014 【我要收藏此頁面】 網(wǎng)站地圖 豫ICP備13015228號 網(wǎng)站維護(hù):深一深圳網(wǎng)站建設(shè)
全國觀瀾網(wǎng)站制作-服務(wù)網(wǎng)店
- 孝感
- 咸陽
- 仙桃
- 咸寧
- 湘西
- 湘潭
- 香港
- 襄樊
- 西安
- 廈門
- 梧州
- 吳忠
- 五指山
- 武夷山
- 無錫
- 武威
- 烏魯木齊
- 烏蘭察布
- 五家渠
- 蕪湖
- 武漢
- 烏海
- 溫州
- 文山
- 渭南
- 威海
- 濰坊
- 瓦房店
- 圖木舒克
- 吐魯番
- 銅仁
- 銅陵
- 通遼
- 通化
- 銅川
- 桐城
- 鐵嶺
- 天水
- 天門
- 天津
- 唐山
- 泰州
- 臺州
- 太原
- 臺灣
- 臺山
- 泰安
- 宿州
- 蘇州
- 宿遷
- 隨州
- 遂寧
- 綏化
- 松原
- 四平
- 沭陽
- 朔州
- 順德
- 雙鴨山
- 石嘴山
- 十堰
- 石家莊
- 石河子
- 深圳
- 沈陽
- 神農(nóng)架
- 邵陽
- 紹興
- 韶關(guān)
- 汕尾
- 汕頭
- 山南
- 上饒
- 商丘
- 商洛
- 上海
- 三亞
- 三明
- 三門峽
- 日照
- 日喀則
- 衢州
- 曲靖
- 泉州
- 七臺河
- 其他
- 齊齊哈爾
- 欽州
- 秦皇島
- 清遠(yuǎn)
- 慶陽
- 清徐
- 青島
- 黔西南
- 黔南
- 潛江
- 黔東南
- 濮陽
- 莆田
- 普洱
- 萍鄉(xiāng)
- 平?jīng)?/a>
- 平頂山
- 攀枝花
- 盤錦
- 怒江
- 寧德
- 寧波
- 內(nèi)江
- 那曲
- 南陽
- 南通
- 南山
- 南平
- 南寧
- 南京
- 南充
- 南昌
- 牡丹江
- 明港
- 綿陽
- 梅州
- 眉山
- 茂名
- 馬鞍山
- 呂梁
- 瀘州
- 洛陽
- 漯河
- 婁底
- 龍巖
- 隴南
- 龍崗網(wǎng)頁設(shè)計(jì)
- 柳州
- 六盤水
- 六安
- 麗水
- 林芝
- 臨猗
- 臨沂
- 臨夏
- 臨汾
- 臨滄
- 麗江
- 遼源
- 遼陽
- 聊城
- 連云港
- 涼山
- 樂山
- 拉薩
- 蘭州
- 廊坊
- 萊蕪
- 來賓
- 昆明
- 庫爾勒
- 克孜勒蘇
- 墾利
- 克拉瑪依
- 喀什
- 開封
- 濟(jì)源
- 雞西
- 酒泉
- 九江
- 錦州
- 晉中
- 濟(jì)寧
- 金華
- 荊州
- 荊門
- 景德鎮(zhèn)
- 晉城
- 金昌
- 濟(jì)南
- 吉林
- 揭陽
- 嘉峪關(guān)
- 嘉興
- 焦作
- 江門
- 吉安
- 佳木斯
- 湖州
- 霍邱
- 呼倫貝爾
- 葫蘆島
- 惠州做網(wǎng)站公司
- 呼和浩特
- 黃石
- 黃山
- 黃南
- 黃岡
- 淮南
- 懷化
- 淮北
- 淮安
- 紅河
- 賀州
- 菏澤
- 河源
- 和縣
- 和田
- 衡陽
- 衡水
- 黑河
- 鶴崗
- 合肥
- 河池
- 鶴壁
- 漢中
- 杭州
- 邯鄲
- 哈密
- 海西
- 海南
- 海拉爾
- 海口
- 海東
- 海北
- 哈爾濱
- 固原
- 果洛
- 貴陽
- 茶山網(wǎng)站制作
- 清溪網(wǎng)頁設(shè)計(jì)
- 塘廈做網(wǎng)站公司
- 黃江網(wǎng)站制作
- 鳳崗網(wǎng)頁設(shè)計(jì)
- 石龍做網(wǎng)站公司
- 石碣網(wǎng)站制作
- 長安網(wǎng)頁設(shè)計(jì)
- 常平做網(wǎng)站公司
- 樟木頭網(wǎng)站制作
- 厚街網(wǎng)頁設(shè)計(jì)
- 虎門做網(wǎng)站公司
- 西城網(wǎng)站制作
- 南城網(wǎng)頁設(shè)計(jì)
- 東城做網(wǎng)站公司
- 城區(qū)網(wǎng)站制作
- 羅湖網(wǎng)站制作
- 華強(qiáng)北做網(wǎng)站公司
- 西麗網(wǎng)站制作
- 大浪做網(wǎng)站公司
- 光明網(wǎng)站制作
- 龍華網(wǎng)頁設(shè)計(jì)
- 觀瀾做網(wǎng)站公司
- 觀蘭網(wǎng)站制作
- 公明網(wǎng)頁設(shè)計(jì)
- 松崗做網(wǎng)站公司
- 沙井網(wǎng)站制作
- 西鄉(xiāng)網(wǎng)頁設(shè)計(jì)
- 福永做網(wǎng)站公司
- 石巖網(wǎng)站制作
- 坂田網(wǎng)頁設(shè)計(jì)
- 大芬村做網(wǎng)站公司
- 坪山網(wǎng)站制作
- 坪地網(wǎng)頁設(shè)計(jì)
- 橫崗做網(wǎng)站公司
- 布吉網(wǎng)站制作
- 平湖網(wǎng)頁設(shè)計(jì)
- 桂林
- 貴港
- 館陶
- 廣州
- 廣元
- 廣安
- 甘孜
- 贛州
- 甘南
- 撫州
- 福州
- 阜陽
- 阜新
- 福田
- 撫順
- 佛山
- 防城港
- 鄂州
- 恩施
- 鄂爾多斯
- 東營
- 東莞
- 迪慶
- 定州
- 定西
- 德州
- 德陽
- 德宏
- 達(dá)州
- 大興安嶺
- 防狼噴霧
- 大同
- 大慶
- 丹東
- 大連
- 大理
- 大豐
- 滁州
- 楚雄
- 崇左
- 池州
- 赤峰
- 郴州
- 成都
- 承德
- 潮州
- 朝陽
- 巢湖
- 常州
- 長治
- 長沙
- 昌吉
- 長葛
- 昌都
- 常德
- 長春
- 滄州
- 亳州
- 博爾塔拉
- 濱州
- 畢節(jié)
- 本溪
- 北京
- 北海
- 巴中
- 巴音郭楞
- 巴彥淖爾盟
- 包頭
- 保山
- 寶雞
- 保定
- 寶安網(wǎng)站制作
- 蚌埠
- 白銀
- 白山
- 百色
- 白城
- 澳門
- 安陽
- 安順
- 鞍山
- 安慶
- 安康
- 阿里
- 阿拉善盟
- 阿拉爾
- 阿克蘇
- 阿壩
- 道滘網(wǎng)頁設(shè)計(jì)
- 惠城
- 惠陽做網(wǎng)站公司
- 博羅
- 惠東
- 龍門
- 淡水
- 大埔
- 五華
- 紫金
- 龍川
- 遵義
- 資陽
- 自貢
- 淄博
- 株洲
- 駐馬店
- 珠海
- 諸城
- 舟山
- 周口
- 中衛(wèi)
- 中山
- 重慶
- 鎮(zhèn)江
- 鄭州
- 正定
- 趙縣
- 昭通
- 肇慶
- 湛江
- 漳州
- 張掖
- 浙江
- 云南
- 新疆
- 西藏
- 四川
- 陜西
- 山西
- 山東
- 內(nèi)蒙古
- 遼寧
- 江西
- 江蘇
- 湖南
- 湖北
- 黑龍江
- 河南
- 河北
- 貴州
- 廣西
- 廣東
- 甘肅
- 福建
- 安徽
- 大朗
- 橫瀝
- 東坑
- 寮步
- 謝崗
- 橋頭
- 企石
- 石排
- 章丘
- 張家口
- 張家界
- 張北
- 棗莊
- 禹州
- 玉溪
- 玉樹
- 云浮
- 運(yùn)城
- 玉林
- 榆林
- 岳陽
- 永州
- 永新
- 益陽
- 鷹潭
- 營口
- 銀川
- 伊犁
- 伊春
- 宜春
- 宜昌
- 宜賓
- 鹽田
- 煙臺
- 鄢陵
- 揚(yáng)州
- 陽泉
- 陽江
- 陽春
- 鹽城
- 延邊
- 延安
- 雅安
- 徐州
- 許昌
- 宣城
- 西雙版納
- 忻州
- 新余
- 信陽
- 新鄉(xiāng)
- 西寧
- 邢臺
- 興安盟
- 錫林郭勒盟