網(wǎng)站建設(shè)中網(wǎng)站代碼優(yōu)化
責任編輯:神州華宇 來源:北京網(wǎng)站建設(shè) 點擊:214 發(fā)表時間:2019-03-25
網(wǎng)站建設(shè)過程中,代碼優(yōu)化對于網(wǎng)站加載速度、搜索排名、用戶體驗有著重要的作用,傳統(tǒng)web建站一般都采用table架構(gòu)頁面,大家都知道table不利于加載速度,并且代碼和樣式很難分離,現(xiàn)在網(wǎng)站一般都是div+css架構(gòu),樣式和結(jié)構(gòu)完全分離,大大加快了網(wǎng)站速度及性能,但僅僅采用div+css就可以了嗎?答案肯定不是這樣的。下面神州華宇小編從不同的方面來談?wù)勗诒本┚W(wǎng)站建設(shè)過程中如何做到代碼的優(yōu)化。
導(dǎo)航優(yōu)化
一般來說,網(wǎng)站的導(dǎo)航都是全站通用的,導(dǎo)航的作用也是至關(guān)重要的,推薦大家盡量用文字導(dǎo)航,最好不要使用圖片和flash等,如果一定要用圖片也一定要加 上alt屬性。而Flash就盡量避免,雖然Flash的視覺效果很好,但是加載太慢,搜索引擎也無法讀取Flash文件,這樣就容易給蜘蛛留下不好的印 象。
網(wǎng)頁圖片優(yōu)化
網(wǎng)頁中一般應(yīng)用兩種格式的圖片jpeg和gif,這兩種圖片的應(yīng)用很多人把握的并不是很好,jpeg適用于顏色比較多、構(gòu)成比較復(fù)雜的圖片(比如一些照片、漸變顏色等等),gif適用于顏色比較少、構(gòu)成比較簡單的圖片(比如網(wǎng)站的logo、大的色塊構(gòu)成的圖片等等)。Gif圖片尤其要注意導(dǎo)出的時候選擇顏色數(shù)目這樣也會達到很好的減小尺寸的效果。對于一些比較大的圖片我們還可以將它切割成比較小的圖片進行拼接這樣也可以提高網(wǎng)頁的下載速度。減小網(wǎng)頁size提高網(wǎng)頁下載速度還有一種簡易的方法就是使用一些網(wǎng)頁減肥的小工具,我們可以去下載一些這樣的工具他們可以使你的網(wǎng)頁縮小20%~50%達到事半功倍的效果。
使用DIV+CSS布局網(wǎng)頁
雖然現(xiàn)在div+css已經(jīng)很成熟了,但是很多網(wǎng)頁設(shè)計者可能考慮到網(wǎng)頁的兼容性以及布局的簡易性還是使用老式的table布局,如上圖所示。雖然table布局很方便,但是其弊端也是顯而易見的,那就是會大大增加網(wǎng)頁的大小,尤其是多層表格的嵌套。這種布局不僅會提升體積,同時如果嵌套數(shù)太多的話就會影響到搜索引擎的爬行,影響到站點的收錄。
另外,一些網(wǎng)站會使用外部文件,將css和js放在外部文件中,頁面html中只要放一樣代碼調(diào)用就可以了。有時候我們?nèi)ゲ榭吹囊恍┰次募a,會看到很多css代碼以及javasript代碼,將javascript放置在網(wǎng)站頁面的html文件中的最前面,而真正能用到得一些文字部分這被推倒了html的后面。企贏001認為一般頁面代碼中的這種代碼都需要精簡。
CSS優(yōu)化
如今大部分網(wǎng)站都采用DIV+CSS的形式,可是很多模板的CSS都是外部調(diào)用,而且樣式表的class名稱會有很多重復(fù)性。尤其對于仿制的模板來 說,class名稱基本上不會變,這樣一來就造成了大量代碼重復(fù)度比較高的網(wǎng)站,這對優(yōu)化工作來說是不利的。筆者每做一個新站時,都會把模板代碼里的 class名稱重新修改一下,對應(yīng)的CSS文件里的名稱也要修改,這樣一來就形成了一個與眾不同的網(wǎng)站代碼。
還有一點,CSS里面用不到的樣式表一定要刪除,同時還要把CSS文件盡量壓縮,這樣有利于網(wǎng)頁加載速度。還有一點就是,同一個網(wǎng)頁中最好只調(diào)用一個 CSS樣式表,這對精簡代碼增加搜索引擎友好度還是有一定作用的。如果是仿制的模板,通常不只一個CSS文件,可以手動的去合并一下,同時也不要忘了刪除 冗余和重復(fù)的內(nèi)容。
網(wǎng)站建設(shè)中針對搜索引擎的優(yōu)化
搜索引擎優(yōu)化是很多人都知道的一種優(yōu)化項目,也是完整的優(yōu)化工作必不可少的一個步驟。 “關(guān)鍵字”在搜索引擎這個話題里是一個核心的字眼,幾乎所有的針對搜索引擎優(yōu)化問題都是圍繞著“關(guān)鍵字”展開的。有很多人盲目的追求在網(wǎng)頁中處處體現(xiàn)關(guān)鍵字,覺得這樣就會更容易被搜索引擎搜到,其實這樣做并不一定合適。比如前一陣子流行過的“鬼影秘笈”,方法就是用和網(wǎng)頁背景相同的顏色在頁面中隱藏了很多關(guān)鍵字,很多人現(xiàn)在還在用這個方法,但是隨著搜索引擎功能越來越強大這個方法已經(jīng)不那么好用了,甚至會起到反作用。
降低頁面對于JS的依賴性
神州華宇網(wǎng)站建設(shè)公司認為,JS對于搜索引擎并不不友好,雖然有消息稱搜索引擎不會對JS有厭惡的情緒,但是多一事不如少一事。雖然JS可以制作出很多的效果,但是網(wǎng)頁中大量的JS將影響蜘蛛對頁面的抓取和增加網(wǎng)頁體積。尤其是頁面的關(guān)鍵位置如導(dǎo)航欄,盡量采用DIV+CSS的設(shè)計方法。
H標簽優(yōu)化
h1-h6標簽是很多站長朋友喜歡采用的標簽,用好了的確對seo工作啟到一定的促進作用,但是用不好卻反而容易得不償失。通常h1主要是用來修飾網(wǎng)頁的 主標題,而h2則是一個段落的標題,h3則表示段落的小節(jié)標題,一般搜索引擎沒辦法想訪客那樣可以直接認出哪是標題,所以使用Hr標簽就可以指導(dǎo)搜索引擎 標題在哪里,讓它們迅速掌握文本大意。所以我們做優(yōu)化的時候,可以適當?shù)眉尤胛覀円龅年P(guān)鍵字,但是需要注意的是,適當使用就可以了,千萬不能濫用。
減少鏈接請求數(shù)
1.緩存靜態(tài)資源:變化很少的靜態(tài)資源可以設(shè)置客戶端緩存,如UI圖片,CSS樣式,Javascript腳本等變化很少的靜態(tài)資源,減少更新請求數(shù)。
2.利用CSS Sprite技術(shù)合并圖片,采用CSS Sprite技術(shù)合并UI圖片等小而不變的圖片為一張圖片??梢詭椭鷾p少請求次數(shù),提高頁面打開速度。
3.合并Javascript(也就是JS)腳本文件:相同域名存在多個不同的Javascript腳本文件,應(yīng)盡可能將其予以合并,減少請求次數(shù)。
4.合并CSS樣式文件:相同域名下存在多個CSS樣式文件,應(yīng)盡可能將其予以合并,減少請求次數(shù)。
5.取出錯誤鏈接和無效鏈接:頁面存在無法打開的鏈接,會導(dǎo)致頁面打開緩慢。
啟用GZip
GZip是一種壓縮技術(shù),是通過在網(wǎng)站服務(wù)器安裝GZip功能并開啟,在傳輸頁面到客戶端瀏覽器過程中,先在網(wǎng)站服務(wù)器壓縮并傳至客戶端瀏覽器,開啟GZip壓縮可以減少傳輸字節(jié),提高網(wǎng)頁加載速度。
導(dǎo)航優(yōu)化
一般來說,網(wǎng)站的導(dǎo)航都是全站通用的,導(dǎo)航的作用也是至關(guān)重要的,推薦大家盡量用文字導(dǎo)航,最好不要使用圖片和flash等,如果一定要用圖片也一定要加 上alt屬性。而Flash就盡量避免,雖然Flash的視覺效果很好,但是加載太慢,搜索引擎也無法讀取Flash文件,這樣就容易給蜘蛛留下不好的印 象。
網(wǎng)頁圖片優(yōu)化
網(wǎng)頁中一般應(yīng)用兩種格式的圖片jpeg和gif,這兩種圖片的應(yīng)用很多人把握的并不是很好,jpeg適用于顏色比較多、構(gòu)成比較復(fù)雜的圖片(比如一些照片、漸變顏色等等),gif適用于顏色比較少、構(gòu)成比較簡單的圖片(比如網(wǎng)站的logo、大的色塊構(gòu)成的圖片等等)。Gif圖片尤其要注意導(dǎo)出的時候選擇顏色數(shù)目這樣也會達到很好的減小尺寸的效果。對于一些比較大的圖片我們還可以將它切割成比較小的圖片進行拼接這樣也可以提高網(wǎng)頁的下載速度。減小網(wǎng)頁size提高網(wǎng)頁下載速度還有一種簡易的方法就是使用一些網(wǎng)頁減肥的小工具,我們可以去下載一些這樣的工具他們可以使你的網(wǎng)頁縮小20%~50%達到事半功倍的效果。
使用DIV+CSS布局網(wǎng)頁
雖然現(xiàn)在div+css已經(jīng)很成熟了,但是很多網(wǎng)頁設(shè)計者可能考慮到網(wǎng)頁的兼容性以及布局的簡易性還是使用老式的table布局,如上圖所示。雖然table布局很方便,但是其弊端也是顯而易見的,那就是會大大增加網(wǎng)頁的大小,尤其是多層表格的嵌套。這種布局不僅會提升體積,同時如果嵌套數(shù)太多的話就會影響到搜索引擎的爬行,影響到站點的收錄。
另外,一些網(wǎng)站會使用外部文件,將css和js放在外部文件中,頁面html中只要放一樣代碼調(diào)用就可以了。有時候我們?nèi)ゲ榭吹囊恍┰次募a,會看到很多css代碼以及javasript代碼,將javascript放置在網(wǎng)站頁面的html文件中的最前面,而真正能用到得一些文字部分這被推倒了html的后面。企贏001認為一般頁面代碼中的這種代碼都需要精簡。
CSS優(yōu)化
如今大部分網(wǎng)站都采用DIV+CSS的形式,可是很多模板的CSS都是外部調(diào)用,而且樣式表的class名稱會有很多重復(fù)性。尤其對于仿制的模板來 說,class名稱基本上不會變,這樣一來就造成了大量代碼重復(fù)度比較高的網(wǎng)站,這對優(yōu)化工作來說是不利的。筆者每做一個新站時,都會把模板代碼里的 class名稱重新修改一下,對應(yīng)的CSS文件里的名稱也要修改,這樣一來就形成了一個與眾不同的網(wǎng)站代碼。
還有一點,CSS里面用不到的樣式表一定要刪除,同時還要把CSS文件盡量壓縮,這樣有利于網(wǎng)頁加載速度。還有一點就是,同一個網(wǎng)頁中最好只調(diào)用一個 CSS樣式表,這對精簡代碼增加搜索引擎友好度還是有一定作用的。如果是仿制的模板,通常不只一個CSS文件,可以手動的去合并一下,同時也不要忘了刪除 冗余和重復(fù)的內(nèi)容。
網(wǎng)站建設(shè)中針對搜索引擎的優(yōu)化
搜索引擎優(yōu)化是很多人都知道的一種優(yōu)化項目,也是完整的優(yōu)化工作必不可少的一個步驟。 “關(guān)鍵字”在搜索引擎這個話題里是一個核心的字眼,幾乎所有的針對搜索引擎優(yōu)化問題都是圍繞著“關(guān)鍵字”展開的。有很多人盲目的追求在網(wǎng)頁中處處體現(xiàn)關(guān)鍵字,覺得這樣就會更容易被搜索引擎搜到,其實這樣做并不一定合適。比如前一陣子流行過的“鬼影秘笈”,方法就是用和網(wǎng)頁背景相同的顏色在頁面中隱藏了很多關(guān)鍵字,很多人現(xiàn)在還在用這個方法,但是隨著搜索引擎功能越來越強大這個方法已經(jīng)不那么好用了,甚至會起到反作用。
降低頁面對于JS的依賴性
神州華宇網(wǎng)站建設(shè)公司認為,JS對于搜索引擎并不不友好,雖然有消息稱搜索引擎不會對JS有厭惡的情緒,但是多一事不如少一事。雖然JS可以制作出很多的效果,但是網(wǎng)頁中大量的JS將影響蜘蛛對頁面的抓取和增加網(wǎng)頁體積。尤其是頁面的關(guān)鍵位置如導(dǎo)航欄,盡量采用DIV+CSS的設(shè)計方法。
H標簽優(yōu)化
h1-h6標簽是很多站長朋友喜歡采用的標簽,用好了的確對seo工作啟到一定的促進作用,但是用不好卻反而容易得不償失。通常h1主要是用來修飾網(wǎng)頁的 主標題,而h2則是一個段落的標題,h3則表示段落的小節(jié)標題,一般搜索引擎沒辦法想訪客那樣可以直接認出哪是標題,所以使用Hr標簽就可以指導(dǎo)搜索引擎 標題在哪里,讓它們迅速掌握文本大意。所以我們做優(yōu)化的時候,可以適當?shù)眉尤胛覀円龅年P(guān)鍵字,但是需要注意的是,適當使用就可以了,千萬不能濫用。
減少鏈接請求數(shù)
1.緩存靜態(tài)資源:變化很少的靜態(tài)資源可以設(shè)置客戶端緩存,如UI圖片,CSS樣式,Javascript腳本等變化很少的靜態(tài)資源,減少更新請求數(shù)。
2.利用CSS Sprite技術(shù)合并圖片,采用CSS Sprite技術(shù)合并UI圖片等小而不變的圖片為一張圖片??梢詭椭鷾p少請求次數(shù),提高頁面打開速度。
3.合并Javascript(也就是JS)腳本文件:相同域名存在多個不同的Javascript腳本文件,應(yīng)盡可能將其予以合并,減少請求次數(shù)。
4.合并CSS樣式文件:相同域名下存在多個CSS樣式文件,應(yīng)盡可能將其予以合并,減少請求次數(shù)。
5.取出錯誤鏈接和無效鏈接:頁面存在無法打開的鏈接,會導(dǎo)致頁面打開緩慢。
啟用GZip
GZip是一種壓縮技術(shù),是通過在網(wǎng)站服務(wù)器安裝GZip功能并開啟,在傳輸頁面到客戶端瀏覽器過程中,先在網(wǎng)站服務(wù)器壓縮并傳至客戶端瀏覽器,開啟GZip壓縮可以減少傳輸字節(jié),提高網(wǎng)頁加載速度。
網(wǎng)站設(shè)計科學、高效、UI友好易用,但過慢的頁面加載過程或過長的下載時間也會消弱網(wǎng)站競爭力。更重要的是,性能低下會直接影響網(wǎng)站的業(yè)績。因此,在網(wǎng)站設(shè)計制作中,擁有優(yōu)質(zhì)的頁面加載速度是非常重要,我們一定要重視網(wǎng)站代碼優(yōu)化的重要性。
最新文章
- 1你要建一個網(wǎng)站,到底要花多少錢?定制網(wǎng)站和普通網(wǎng)站的價格差異!
- 2全方位網(wǎng)站建設(shè)與網(wǎng)站制作構(gòu)建數(shù)字時代的堅實基石
- 3電子商務(wù)網(wǎng)站建設(shè)一站式打造高效便捷的在線交易平臺
- 4品質(zhì)網(wǎng)站制作與設(shè)計塑造卓越在線體驗的基石
- 5企業(yè)網(wǎng)站制作與維護構(gòu)建數(shù)字時代的商業(yè)門戶
- 6創(chuàng)意企業(yè)網(wǎng)站建設(shè)與維護激發(fā)數(shù)字時代的無限可能
- 7品質(zhì)網(wǎng)站建設(shè)服務(wù)體驗塑造卓越在線形象的關(guān)鍵
- 8定制網(wǎng)站制作創(chuàng)新服務(wù)重塑企業(yè)數(shù)字形象的新篇章
- 9高效網(wǎng)站制作品質(zhì)服務(wù)驅(qū)動數(shù)字化轉(zhuǎn)型的加速器
人氣排行
- 1北京網(wǎng)站設(shè)計中的收費資費標準和大家分享
- 2制作移動端網(wǎng)站步驟國內(nèi)外網(wǎng)站設(shè)計風格
- 3北京網(wǎng)站建設(shè)的特點和優(yōu)勢具體表現(xiàn)你知道哪些呢
- 4企業(yè)開發(fā)建設(shè)網(wǎng)站作用空間怎么選擇
- 5網(wǎng)站建設(shè)重視哪些問題建設(shè)營銷型網(wǎng)站
- 6建設(shè)網(wǎng)站做SEO優(yōu)化多久可以見效
- 7同同(北京)科技有限公司與神州華宇聯(lián)手打造WAP品牌官網(wǎng)
- 8神州華宇助力湯姆之家,攜手北京“湯迷”全線開進!
- 9網(wǎng)站空間如何選擇企業(yè)做網(wǎng)站的好處