seo是什么意思?seo等于搜索引擎优化,它是基于搜索引擎的一种网络营销方式,隶属于sem --- 武汉小明seo教程,专注seo优化技术培训!
当前位置:首页 » SEO建站必备 » 如何优化网站首页代码?

如何优化网站首页代码?

SEO建站必备 1363℃ 26评论

我们对网站首页代码进行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(“sprite.png”) 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进行优化,还有一个重要点就是服务器端的选择,标准应该是快且稳定。

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(26)个小伙伴在吐槽
  1. 如果条件可能,除开首页代码外,整站的代码都需要优化。以免出现这样的问题:网站的流量越来越多,网站其他页面代码臃肿而再次处理,问题多多。一次性整好所有页面,后续问题就没了。

    六盘水SEO2017-10-12 08:45 回复
    • 赞同,一次性设置好,就无后顾之忧了。做seo,切记被琐碎的事情消耗大量的时间与精力。

      小明seo2017-10-12 08:55 回复
  2. 我使用的是wordpress建站程序,在网上面下了一个功能丰富的前端模板,前端代码方面一直都不是问题。

    一站式SEO优化管理平台2017-10-11 09:56 回复
    • 小型企业站,不用为网站代码而劳神费力,简单几步就可处理相应问题。把大量的精力放在内容和外链上,效率更高!

      小明seo2017-10-11 10:12 回复
  3. 重来没有为这个事情劳神费力,可能对于新手来讲,有问题。对于老手来讲,在首页代码中添加必要的权重标签,让代码精简到机制,就够了。

    北京SEO2017-10-10 09:29 回复
    • 新手seo在从事网站的过程中,很多时候会被一些细枝末节的问题所困扰,从而失去了主方向,是很不好的。关键点在于效率不高。

      小明seo2017-10-10 09:38 回复
  4. 对于企业站来讲,选择好一套对搜索引擎友好的建站程序,选择好一套对搜索引擎友好的网站模板,已经足够了。

    干货seo网2017-10-08 10:13 回复
    • 小型企业站很容易搭建,模板也很容易获取到,这样的方法会提高你运营,优化网站的效率。

      小明seo2017-10-08 10:28 回复
      • 小型企业网站,不需要过于折腾,代码优化一类的,不用过于细化。

        武汉SEO2017-10-09 10:42 回复
        • 我也秉承这个观点,小型企业网站,有一套好的建站系统,有一个好的模板,就已经解决了很多问题。

          小明seo2017-10-09 10:55 回复
  5. 我再来补充一下,调整次要网页元素的加载顺序,将一些js代码放置到页面靠后的位置,采用标准的div+css,将div与css分离。

    赣州SEO顾问2017-10-07 10:23 回复
    • 明确对网站首页代码进行优化的目的是什么,通过目的再来寻找相关达成目的的方法与途径,逆向思维,结果导向,是很好的处事方法。

      小明seo2017-10-07 10:45 回复
  6. 就会简单的前端代码方面的div+css,不知道是否够用。

    seo前线2017-10-04 13:38 回复
    • 一般情况下,掌握这些前端技术来对前端代码进行优化,是够用了。另外,一个seoer,不需要自己完全操作,专业人做专业事,效率会更高。

      小明seo2017-10-06 20:20 回复
  7. 仔细看了下这篇文章,发现这些个首页代码优化方法适用于首页,栏目页,内容页等不同类型的页面。

    珍岛SEO臻系统2017-10-03 09:38 回复
    • 有几个点需把控,这几个点全站seo通用,如代码精简,权重标签,DIV+css分离等。

      小明seo2017-10-03 09:55 回复
  8. 一方面精简代码,一方面采用更合理的技术和网页构件,加上一个性能较好的服务器,使用内容分发方式,网站的速度会得到改观。

    广西桂林SEO学院2017-10-01 09:27 回复
    • 这几个点都说得比较到位,无论采用什么方法,假设你的网站加载速度得到阶段性的提高,那么就是追求的最后结果。另外,还需要有一些诸如h1等权重标签的设置。

      小明seo2017-10-01 09:40 回复
  9. 优化网站首页代码的方法有很多,需要时刻积累。

    焦大seo2017-09-30 22:28 回复
  10. 您好,最近网站360收录被删除,400多网页一夜被删除,只有首页被收录,排名都没有了,请问大概是什么问题

    菜鸟2017-09-30 18:31 回复
    • 典型的降权,通过排除法,看看是什么原因造成的。对症下药。

      小明seo2017-09-30 20:18 回复
      • 谢谢

        菜鸟2017-10-01 11:17 回复
  11. 优化首页代码的目的在于提高页面加载速度,作为seoer,不必掌握具体的操作流程,其实很多人也不会,知道这个首页优化的必要工作,其他交给程序员操作,专业人做专业事。

    苏州SEO技术2017-09-30 09:52 回复
    • 赞同,把专业的事交给专业的人。有关网站速度的文档传送门:如何提升网站打开速度

      小明seo2017-09-30 10:23 回复
      • 非常赞同这个观点,专业人的优势是更专业,分工协作最终的工作效率会更高。一个有效率的seo团队,需要有外链专员,编辑,主管,美工,程序等几个职位与相应的人员架构。

        野狼SEO团队2017-10-02 08:44 回复
        • 以优化网站首页的源代码为例,seoer需要指出需要修改哪些地方,才有利于搜索引擎优化,程序员需要根据要求对源代码做部分调整,以达到最终的流量效果。

          小明seo2017-10-02 09:12 回复