技術(shù)資訊
青島網(wǎng)站建設(shè)之網(wǎng)頁(yè)如何提高加載速度
2011-10-10 22:00:38
雖然現(xiàn)在的網(wǎng)絡(luò)帶寬在逐步提高,但是隨著網(wǎng)頁(yè)上的對(duì)象也越來越多,如何加快網(wǎng)頁(yè)打開速度仍然困擾著網(wǎng)頁(yè)策劃者。其實(shí)加快網(wǎng)頁(yè)的打開速度,有三個(gè)路徑,一是提高網(wǎng)絡(luò)帶寬的速度,二是用戶在本機(jī)做優(yōu)化,三是網(wǎng)站設(shè)計(jì)者對(duì)網(wǎng)頁(yè)做一定的網(wǎng)站優(yōu)化。這篇文章中我們站在青島網(wǎng)站設(shè)計(jì)者的角度,分享一些優(yōu)化網(wǎng)頁(yè)加載速度的小技巧。
一、青島網(wǎng)站制作之優(yōu)化圖片
圖片幾乎是每個(gè)網(wǎng)頁(yè)中必不可少的。如果你經(jīng)歷過56K貓的年代,你一定不會(huì)很喜歡有大量圖片的網(wǎng)站。因?yàn)榧虞d那樣一個(gè)網(wǎng)頁(yè)會(huì)花費(fèi)大量的時(shí)間。
就算到現(xiàn)在,網(wǎng)絡(luò)帶寬速度有了很大的提高,56K貓逐漸被淘汰,優(yōu)化圖片以加快網(wǎng)頁(yè)速度還是很有必要的。
減少圖片數(shù)、降低圖像質(zhì)量、使用恰當(dāng)?shù)母袷健?/p>
1、減少圖片數(shù):去除網(wǎng)站頁(yè)面中不必要的圖片。
2、降低圖像質(zhì)量:如果不是很必要,嘗試降低圖像的質(zhì)量,尤其是jpg格式,降低5%的質(zhì)量看起來變化不是很大,但文件大小的變化是比較大的。
3、使用恰當(dāng)?shù)母袷剑赫?qǐng)參閱下一點(diǎn)。
因此,在上傳圖片之前,你需要對(duì)圖片進(jìn)行編輯,如果你覺得photoshop太麻煩,可以試試一些在線圖片編輯工具。不想編輯而又想圖片有特殊的效果?可以試試用過調(diào)用javascript來實(shí)現(xiàn)圖片特效。
二、青島網(wǎng)站制作之圖像格式的選擇
一般在網(wǎng)頁(yè)上使用的圖片格式有三種,jpg、png、gif.三種格式的具體技術(shù)指標(biāo)不是這篇文章探討的內(nèi)容,我們只需要知道在什么時(shí)候應(yīng)該使用什么格式,以減少網(wǎng)頁(yè)的加載時(shí)間。
1、JPG格式:一般用于展示風(fēng)景、人物、藝術(shù)照的攝影作品,有時(shí)也用在電腦截屏上。
2、GIF:提供的顏色較少,可用在一些對(duì)顏色要求不高的地方,比如網(wǎng)站logo、按鈕、表情等等。當(dāng)然,gif 格式的一個(gè)重要的應(yīng)用是動(dòng)畫圖片。
3、PNG:PNG格式能提供透明背景,是一種專為網(wǎng)頁(yè)展示而發(fā)明的圖片格式。一般用于需要背景透明顯示或?qū)D像質(zhì)量要求較高的網(wǎng)頁(yè)上。
三、青島網(wǎng)站制作之優(yōu)化CSS
CSS疊層樣式表讓網(wǎng)頁(yè)加載起來更高效,瀏覽體驗(yàn)也得到提高。有了CSS,表格布局的方式可以退休了。簡(jiǎn)化CSS能去除冗余的屬性,提高運(yùn)行效率。如果你寫好CSS后懶得去做簡(jiǎn)化,你可以使用一些在線的簡(jiǎn)化CSS工具,比如CleanCSS.
四、青島網(wǎng)站制作之網(wǎng)址后加斜杠
有些網(wǎng)址,比如www.ihaomai.cn/web,當(dāng)服務(wù)器收到這樣一個(gè)地址請(qǐng)求的時(shí)候,它需要花費(fèi)時(shí)間去確定這個(gè)地址的文件類型。如果web是一個(gè)目錄,不妨在網(wǎng)址后多加一個(gè)斜杠,讓其變成www.ihaomai.cn/web/,這樣服務(wù)器就能一目了然地知道要訪問該目錄下的index或default文件,從而節(jié)省了加載時(shí)間。
五、青島網(wǎng)站制作之標(biāo)明高度和寬度
這點(diǎn)很重要,但很多人由于懶惰或其它原因,總是將其忽視。當(dāng)你在網(wǎng)頁(yè)上添加圖片或表格時(shí),你應(yīng)該指定它們的高度和寬度,也就是height和width參數(shù)。如果瀏覽器沒有找到這兩個(gè)參數(shù),它需要一邊下載圖片一邊計(jì)算大小,如果圖片很多,瀏覽器需要不斷地調(diào)整頁(yè)面。這不但影響速度,也影響瀏覽體驗(yàn)。
下面是一個(gè)比較友好的圖片代碼:
<img id="moon" height="200" width="450" src=" />
當(dāng)瀏覽器知道了高度和寬度參數(shù)后,即使圖片暫時(shí)無(wú)法顯示,頁(yè)面上也會(huì)騰出圖片的空位,然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了,瀏覽體驗(yàn)也更好了。
六、青島網(wǎng)站制作之減少http請(qǐng)求
當(dāng)瀏覽者打開某個(gè)網(wǎng)頁(yè),瀏覽器會(huì)發(fā)出很多對(duì)象請(qǐng)求(圖像、腳本等等),視乎網(wǎng)絡(luò)延時(shí)情況,每個(gè)對(duì)象加載都會(huì)有所延遲。如果網(wǎng)頁(yè)上對(duì)象很多,這可以需要花費(fèi)大量的時(shí)間。
因此,要為http請(qǐng)求減負(fù)。如何減負(fù)?
1、去除一些不必要的對(duì)象。
2、將臨近的兩張圖片合成一張。
3、合并CSS
看看下面這段代碼,需要加載三個(gè)CSS:
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />
我們可以將其合成一個(gè):
<link rel="stylesheet" type="text/css" href="/style.css" />
從而減少http請(qǐng)求。
七、其它小技巧
1、去除不必要加載項(xiàng)。
2、如果在網(wǎng)頁(yè)上嵌入了其它網(wǎng)站的widget,如果有選擇余地,一定要選擇速度快的。
3、盡量用圖片代替flash,這對(duì)青島網(wǎng)站SEO也有好處。
4、有些內(nèi)容可以靜態(tài)化就將其靜態(tài)化,以減少服務(wù)器的負(fù)擔(dān)。
5、統(tǒng)計(jì)代碼放在頁(yè)尾。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2014-08-15 23:41:30] table表格在div中的居中
- [2012-02-19 21:01:54] 網(wǎng)頁(yè)設(shè)計(jì)如何傳達(dá)信息
- [2012-03-13 18:07:59] 網(wǎng)頁(yè)的滾動(dòng)條設(shè)計(jì)
- [2015-01-30 09:15:04] 如何使用百度工具追蹤訪客的來源目的?
- [2014-03-03 23:39:38] HTML5能做什么?
- [2012-12-31 13:19:21] 網(wǎng)站banner的設(shè)計(jì)與創(chuàng)意元素
- [2017-03-28 16:37:00] 普及360瀏覽器的極速模式和兼容模式的知識(shí)點(diǎn)
- [2012-08-23 09:07:58] 如何做友情鏈接
- [2012-05-10 22:35:03] dede文章修改加入翻頁(yè)
- [2013-12-09 23:35:57] 圓形效果在界面設(shè)計(jì)上的應(yīng)用與分析
- [2012-02-16 16:49:09] 網(wǎng)站設(shè)計(jì)趨勢(shì)-門戶站的細(xì)分設(shè)計(jì)
- [2019-05-24 09:56:02] 青島網(wǎng)站制作哪家強(qiáng)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
css 響應(yīng)式設(shè)計(jì) 頁(yè)面設(shè)計(jì) 營(yíng)銷型網(wǎng)站建設(shè) 插畫 程序開發(fā) 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 微信開發(fā) html和css H5定制設(shè)計(jì) 集團(tuán)官網(wǎng) 交互設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 青島flash網(wǎng)站 微網(wǎng)站 青島高端網(wǎng)站建設(shè)公司哪家好 建站常識(shí) 搜索引擎 網(wǎng)站優(yōu)化 網(wǎng)站的速度 視覺靈感 青島網(wǎng)站營(yíng)銷 膠南網(wǎng)站建設(shè)公司 青島開發(fā)區(qū)建站公司 網(wǎng)站建設(shè)的步驟有哪些 H5專題頁(yè)面 舒適的界面 青島網(wǎng)站制作 海信網(wǎng)絡(luò)科技 企業(yè)網(wǎng)站為什么要備案