SEO是什麽意思?SEO等于搜索引擎優化,它是基于搜索引擎的一種網絡營銷方式,隸屬于SEM!!

如何優化網站首頁代碼?

11245℃ 26評論

我们对网站首页代码进行seo优化的目的在于提高网站首页打开速度,而加快网站打开速度则有利于用户体验度的提升和对搜索引擎的友好,因此,掌握如何優化網站首页代码方法和原则就显得尤为重要。 很多网站,为了吸引访客的注意,添加很 […]

我们对网站首页代码进行seo优化的目的在于提高网站首页打开速度,而加快网站打开速度则有利于用户体验度的提升和对搜索引擎的友好,因此,掌握如何優化網站首页代码方法和原则就显得尤为重要。

如何提升網站打開速度?

很多網站,爲了吸引訪客的注意,添加很多組件,殊不知這樣的組件越多,會越加延遲網站的打開速度;另外一方面,如果你的網站是圖片站,那麽更要合理的優化首頁代碼,有數據顯示,通過代碼瘦身可以讓頁面最高縮減百分之三十。在此,seo教程自學網推薦閱讀網站頁面速度優化原則,衍生知識點。

作爲seo人員,需要懂得如何精簡代碼,如何加快網站打開速度,即使不是技術流,也因知曉原理。在此,seo教程自學網總結了一部分網站首頁代碼優化方法與原則,詳細如下:

1:刪除多余的社交類組件。

如何優化網站首页代码:社交组件

這裏需要指出,我們在網站中放入恰當的社交組件是建議的,但我們應該刪除多余的社交類組件以提升網站加載打開速度。舉個例子:某第三方網站提供的分享按鈕代碼體積大約爲1/2M,另外平台的分享代碼更小,我們就可以選擇更小的;在舉個例子,網站上遍布各種組件,留言板,在線溝通工具,分享按鈕等,站長的初衷是好的,但更多的組件意味著很多網絡連接或強制在加載頁面之前進行,拉低了網站的打開速度,另外一方面也不利于用戶體驗。在這種情況下,我們就要優化首頁代碼,選擇更小體積的代碼,刪除多余的組件代碼。

2:采用用戶點擊加載技術。

如何優化網站首页代码:响应式

如果你的網站是視頻站點或圖片站點,是不應該一次性加載網站的所有內容的,自動加載視頻,圖片等內容會加載API,這會直接拉低整站的速度,建議的做法是根據用戶的需要,讓他們自由點擊,通過點擊行爲加載應該呈現的資源;舉個例子,如果首頁有大量圖片內容,就可以采取滾動式頁面,通過用戶的下拉行爲加載新的頁面,這樣做有利于用戶體驗,也有利于首頁打開速度的提升。

3:使用矢量技術處理圖片。

如何優化網站首页代码:矢量技术处理图片

可縮放矢量圖形是基于可擴展標記語言(標准通用標記語言的子集),用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定,是一個開放標准。

矢量技術處理圖片具備很多優點,如:

用戶可以任意縮放圖像顯示,而不會破壞圖像的清晰度、細節等;

SVG圖像中的文字獨立于圖像,文字保留可編輯和可搜尋的狀態。也不會再有字體的限制,用戶系統即使沒有安裝某一字體,也會看到和他們制作時完全相同的畫面。

總體來講,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下載也很快。

SVG 图像可被搜索、索引、脚本化或压缩。

也就是說,使用矢量技術處理的圖片,可被搜索引擎識別,且相同情況下其文件會更小。

在此,推荐的工具有SVG edit,它可以将普通格式的文件转换为矢量图。

4:巧用css3代替圖片效果。

如何優化網站首页代码:css3

基于css3的進化,其已經可以生成陰影,圓角邊框,按鈕,背景等效果,幾乎可以取代傳統的切片技術。在這樣的前提條件下,完全可以通過css代碼代替某些圖片效果,其優點顯而易見,代碼比圖片要小得多,也會提升網站首頁打開速度。

另外一方面,如果使用大量圖片布局網站,在不同的浏覽器下,就會形成某些視覺問題,但css3技術就不存在這些問題,它們可以完美的支持各浏覽器的兼容問題,而又不至于犧牲網站前端效果。

再次,seo教程自學網提醒:使用css3制作陰影等效果,其難度不小,需要更專業的前端技術人員才能實現。

5:javascript簡稱js代碼優化。

如何優化網站首页代码:js代码优化

衆所周知,javascript特效的使用是阻礙網站打開速度的一個重要因素,對于這個點,需要著重把握和注意。前面講了css3可以取代很多圖片效果,其還有別的功能,如可以取代部分js特效效果,效果強大。

使用css3,取代部分js特效,有一些優勢:

很多情況下css3代碼的特效可以直接取代js代碼。

css3代碼體諒更小,也更容易編寫。

6:用图标字体(icon fonts)代替首页图片。

如何優化網站首页代码:图标字体(icon fonts)

利用字体工具把我们平时 Web 上用的图形图标(icons)转换成 web fonts,就成了 icon fonts,它可以借助 CSS 的 @font-face 嵌入到网页里,用以显示 icons。因为字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率和PPI下面,都可以做到完美缩放,不会像传统位图,如:png,jpeg,放大后有锯齿或模糊现象。

由于圖標字體的靈活性和易用性使得圖標字體使用越來越廣泛了,我們經常可以看到不同的UI框架都整合了各種的圖標字體。

除了「分辨率无关」这个最大的优点之外,icon fonts 还具有:

文件小:相比图片几十几百KB的容量,icon fonts 几乎是羽翼级轻量。

加载性能好:因为图标都被打包进一套字体内,http request 减少。这如同我们常用的 css sprites 技术。

支持CSS樣式:和普通字體一樣,你可以利用CSS來定義大小、顔色、陰影、hover狀態、透明度、漸變等等…

兼容性好:web fonts 起源很早,别说主流浏览器,连IE6/7都能良好支持。除了一些老的移动端浏览器,如Android 2.1以下的初代浏览器,Opera mini 这类自限型浏览器。

当然 icon fonts 也有它的不足:

样式单一,无法针对不同分辨率来调整icon 的细节,比如降低大尺寸icon 的线条粗细。

颜色单一,CSS 无法方便的去定义彩色的 icon,倒是有通过叠加组合的方式来达到彩色图标的目的。

移动端浏览器兼容性还不够完善,像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。

有少量的移动设备有可能会和 icon fonts 的字符编码冲突,导致icon 显示不正常(我们自己风车Android 版本就碰到了这个问题)。

所以 icon fonts 也并不是一套完美的响应式图片的解决方案,当它适宜你的应用场景时,比如:

你的網站是扁平化或簡約風格,圖標樣式單一,顔色爲純色。

你的目標用戶使用桌面浏覽器爲主,或者,

你願意爲非兼容設備做兼容hack。

icon fonts 是一个令设计师和前端工程师都心花怒放的方案。

icon fonts 的制作主要有两条思路:

利用字體工具手動制作

利用在線工具自動生成

7. sprite技术优化首页图片体积。

如何優化網站首页代码:sprite(精灵)

Sprite”(精靈)這個詞在計算機圖形學中有它獨特的定義,由于遊戲、視頻等畫質越來越高,必須有一種技術可以智能的處理材質和貼圖,並且要同時保持畫面流暢。“Sprite”就是這樣一種技術,它將許多圖片組合到一個網格上,然後通過程序將每個網格的內容定位到畫面上。

Sprite被定位到一副靜態圖片上,並且通過簡單的程序或硬件即可正確定位到畫面上,一幅幅圖片就像是被“變”出來的,他們並沒有單獨占用內存,所以被取名爲“Sprite精靈”。

时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。

當頁面加載時,不是加載每個單獨圖片,而是一次加載整個組合圖片。這是一個了不起的改進,它大大減少了HTTP請求的次數,減輕服務器壓力,同時縮短了懸停加載圖片所需要的時間延遲,使效果更流暢,不會停頓。

CSS Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。

在网站图片的解决方案中,CSS3应该是首选,其次是SVG和icon font,最后才是Bitmap。经常使用的Bitmap文件应该打包放在一个单独的sprite中,这样一来图片就可以在CSS中访问到了,像这样:

.sprite {

width: 16px;

height: 16px;

background: url(/&) 0 0 no-repeat;

}

.sprite.help { background-position: 0 -16px; }

.sprite.info { background-position: 0 -32px; }

.sprite.user { background-position: 0 -48px; }

8. 使用data URIs减少http请求数。

假設你有一個圖片,把它在網頁上顯示出來的標准方法是:

<img src=”http://gbtags.com/images/A.png”/>

这 种取得资料的方法称为 http URI scheme ,同样的效果使用 data URI scheme 可以写成:

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC” />

换句话说我们把图像档案的内容内置在 HTML 档案中,节省了一个 HTTP 请求。

data uri的主要优点是减少了http请求数,调用起来比css sprite更加灵活,缺点是增加了客户端的资源消耗。

在所有浏览器的非缓存的模式下, CSS sprite 方式比 data URI 方式快了数百微秒。但事实上 CSS Sprite 比 Data URI 方式多发送了一次连接请求,包括 TCP 慢启动招致所有相关的连接开销。

缓存条件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提升,只是 iOS 条件下减少了 220ms 而 Android 减少了 70ms (原生浏览器)。相对来说,Chrome 和 Firefox 的情况平衡得好点,缓存和非缓存情况下只有 50% 到 60ms 左右的性能差异。

在这里我建议将 data URIs 用于非常小的资源,并且不能在 CSS 和 内联 HTML 中多次使用它们。

在利用相關技術對網站首頁代碼,圖片,組件進行瘦身處理後,就需要使用相關檢測工具對網站速度進行測試。一般情況下,網站打開速度應低于4秒。

推荐的网站速度检测工具包括“奇云测 — 测试你的网站速度”,免费提供ping检测,get检测,DNS劫持检测和网站打分等服务,努力打造最干净的网站检测平台。

地址:ce.cloud.360.cn/

另外,百度官方也主推了移动网页加速MIP相关技术,是一套应用于移动网页的开放性技术标准,使用 MIP无需等待加载,页面内容将以更友好的方式瞬时到达用户。

地址:https://www.mipengine.org/

小明seo點評:

掌握如何優化網站首页代码方法的目的在于提升网站速度,推荐的典型做法有删除多余代码与组件,对现有代码利用最新技术如css3进行优化,还有一个重要点就是服务器端的选择,标准应该是快且稳定。

當前位置:seo教程 » SEO建站必備 »
本文地址:/2660.html
喜欢 (10)or分享 (0)
發表我的評論
取消評論
表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址