网站一般分为前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。
我们网站建设的目的不就是为了让目标人群来访问吗？
所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。
举个例子：就好像，好多人问，男人在找女朋友的时候是不是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。
不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。所以说，网站和女人一样，都要内外兼修呀”。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？
1、减少http请求，合理设置 HTTP缓存
http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。
减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。
缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据。 (这里需要说明的是，如果直接 F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body ，可以节省带宽 )
怎样才算合理设置 ?
原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。
2、使用浏览器缓存
对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。
在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。
使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器忽然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。
3、启用压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑
4、Lazy Load Images
这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
5、CSS放在页面最上部，javascript放在页面最下面
浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。
Javascript则相反，浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript，这时放到底部就不合适了。
6、合理的ajax请求
对于返回内容相同的请求，没必要每次都直接从服务端拉取，合理使用 AJAX 缓存能加快 AJAX 响应速度并减轻服务器压力。
7、缩小 favicon.ico 并缓存
有利于 favicon.ico 的重复加载，因为一般一个 Web 应用的 favicon.ico 是很少改变的。
8、减少DOM数量和层级数量
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和扁平化的层级。
9、HTML标签转换
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
HTML标签的转换主要是指使用短标签替换在网页中有相同效果的长标签，比如b与strong标签两者都是对字体加粗可是strong却比b多了5个字符。假设一个页面出现上百个加粗标签，就会产生不少的冗余代码。
与，如果只是单纯加粗或斜体则用b、i标签；
如果想对seo产生影响则用strong、em，可自行调节样式，在制作html页面的时候。进行优化的选择使用的标签。
头部标签
1.
标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。</p>
<p style="text-indent: 2em">2.标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。</p>
<p style="text-indent: 2em">3.标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。</p>
<p style="text-indent: 2em">表格，ur 等容器形式的标签</p>
<p style="text-indent: 2em">浏览器编译器遇到一个标签时，就开始寻找它的结束标签，直到它匹配上,才干显示它的内容，所以当表，ur等容器形式的标签嵌套非常多时,打开页面就会特别慢,这样就减少用户体验了。</p>
<p style="text-indent: 2em">解决方法：在编写html的时候：尽量使每一个容器独立。假设要嵌套的时候，一定要使其清楚、简单介绍。</p>
<p style="text-indent: 2em"><strong>图片img标签</strong></p>
<p style="text-indent: 2em"><img decoding="async" src="http://www.cjzzc.com/article/图片地址" /> alt属性一定要写</p>
<p style="text-indent: 2em"><strong>合理 target=\”_blank\”</strong></p>
<p style="text-indent: 2em">合理而不频繁使用target=\”_blank\” 是可以在一定程度上位站点带来回旋流量和点击的。同一时候。在细节上使用 target=\”_blank\” ，可以增强站点总体用户体验。</p>
<p style="text-indent: 2em"><strong>head头部标签部分</strong></p>
<p style="text-indent: 2em"><title> 标题: 只强调重点，不要重复出现关键词，各个页面的title不要设置相同的</p>
<p style="text-indent: 2em"> 关键词： 列举出关键词，不要过分堆砌</p>
<p style="text-indent: 2em"> 描述： 同2，不要太长，各个页面的description不要设置相同的</p>
<p style="text-indent: 2em"><strong>body代码正文</strong></p>
<p style="text-indent: 2em">标签语义化，比较以下两部分代码做头部导航：</p>
<pre><p style="text-indent: 2em"><br /><span>课程1</span><br /><span>|</span><br /><span>课程2</span><br /><span>|</span><br /><span>课程3</span><br /><span>我的课程</span><br /><br /></p></pre>
<p style="text-indent: 2em"><strong>以上代码没有一点语义化，可以优化成如下：</strong></p>
<pre><p style="text-indent: 2em"><ul><br /><li>课程1</li><br /><li>课程2</li><br /><li>课程3</li><br /><span>我的课程</span><br /></ul><br />……<br />li {<br />border-right: 1px solid #000;<br />}<br /></p></pre>
<p style="text-indent: 0em"><strong> 对于a标签，要加title，同时加属性rel=‘nofollow’</strong></p>
<p style="text-indent: 0em">nofollow: 告诉爬虫不要去该链接去爬了，因为爬过去可能爬不回来了，不利于seo优化</p>
<p style="text-indent: 0em"><strong> 对于标题尽量用h标签，而且是h1标签，因为爬虫认为h1标签是本文最重要的标题，副标题用h2，其他不重要的标题就不要用h标签了</strong></p>
<p style="text-indent: 0em">h1、h2 标题太大的话，自行用css去修饰</p>
<p style="text-indent: 0em"><strong><br />\\ 表示换行，如果内容是纯文本内容，可以br换行，示例如下，如果是<span>之间换行则不用，利用盒模型来调整</strong></p>
<pre><p style="text-indent: 2em"><p> //正确示例，注意p表示 文本段落,不用div<br />这是文本内容啊<br><br />这是文本内容啊<br><br />这是文本内容啊<br /></p><br /> //错误示例<br /><span>这是文本内容啊</span><br><br /><span>这是文本内容啊</span><br><br /><span>这是文本内容啊</span><br /><br /></p></pre>
<p style="text-indent: 0em"><strong>table，定义table标题，以下为正确示例</strong></p>
<pre><p style="text-indent: 2em"><table><br /><caption>表格标题</caption><br />……<br /></table><br /></p></pre>
<p style="text-indent: 2em"><strong>注意</strong></p>
<p style="text-indent: 2em">重要的html代码放在文件最前边，爬虫是由上之下抓取html代码的</p>
<p style="text-indent: 2em">重要的内容不要用js输出，爬虫是看不懂js的，所以我们常用的vue框架是不利于seo优化的。</p>
<p style="text-indent: 2em">尽量少用iframe标签，爬虫是不会读取iframe的内容的</p>
<p style="text-indent: 2em">谨慎使用display：none ，理由同3</p>
<p style="text-indent: 2em">精简代码，若用一个标签完成的布局，不要用两个</p>
<p style="text-indent: 2em;line-height: 2em">
</article>
<div class="post-actions">
<a href="javascript:;" etap="like" class="post-like action action-like" data-pid="12683"><i class="tbfa"></i>赞(<span>0</span>)</a> </div>
<div class="post-copyright">未经允许不得转载：<a href="https://www.kvidc.com">康维主机测评-网站SEO优化</a> » <a href="https://www.kvidc.com/zhizhu/12683.html">WEB前端HTML页面性能优化的9个方法</a></div>
<div class="shares"><dfn>分享到</dfn><a etap="share" data-share="qq" class="share-sqq" title="分享到QQ好友"><i class="tbfa"></i></a><a etap="share" data-share="qzone" class="share-qzone" title="分享到QQ空间"><i class="tbfa"></i></a><a etap="share" data-share="telegram" class="share-telegram" title="分享到Telegram"><i class="tbfa"></i></a></div>
<div class="article-tags"><a href="https://www.kvidc.com/tag/html" rel="tag">HTML</a><a href="https://www.kvidc.com/tag/%e5%89%8d%e7%ab%af%e4%bc%98%e5%8c%96" rel="tag">前端优化</a><a href="https://www.kvidc.com/tag/%e7%bd%91%e9%a1%b5%e4%bc%98%e5%8c%96" rel="tag">网页优化</a></div>
<nav class="article-nav">
<span class="article-nav-prev">上一篇<br><a href="https://www.kvidc.com/zhizhu/13859.html" rel="prev">掌握这十种营销心理学，让用户心甘情愿的购买？</a></span>
<span class="article-nav-next">下一篇<br><a href="https://www.kvidc.com/seooptimize/14813.html" rel="next">产品经理提升执行力的方法，团队执行力提升的五大要素</a></span>
</nav>
<div class="relates relates-imagetext"><div class="title"><h3>相关推荐</h3></div><ul><li><a target="_blank" href="https://www.kvidc.com/zhizhu/13073.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001164347-6519a1c32c4c2-220x150.jpg" alt="网站SEO代码优化与标签优化，SEO网页减肥-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/zhizhu/13073.html">网站SEO代码优化与标签优化，SEO网页减肥</a></li><li><a target="_blank" href="https://www.kvidc.com/zhizhu/13405.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001165443-6519a453abc46-220x144.jpg" alt="网站加隐藏链接隐藏文本方法汇总-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/zhizhu/13405.html">网站加隐藏链接隐藏文本方法汇总</a></li><li><a target="_blank" href="https://www.kvidc.com/seooptimize/14411.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001173024-6519acb01606b-220x150.jpg" alt="nofollow标签的作用有重大变化-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/seooptimize/14411.html">nofollow标签的作用有重大变化</a></li><li><a target="_blank" href="https://www.kvidc.com/seooptimize/15257.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001180307-6519b45b3b4cd-220x150.jpg" alt="网站前端设计的5种网页布局方式？-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/seooptimize/15257.html">网站前端设计的5种网页布局方式？</a></li><li><a target="_blank" href="https://www.kvidc.com/seooptimize/14423.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001173039-6519acbf9df7a-220x138.jpg" alt="合理运用html中的meta标签-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/seooptimize/14423.html">合理运用html中的meta标签</a></li><li><a target="_blank" href="https://www.kvidc.com/seooptimize/15277.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001180401-6519b491962cf-220x150.jpg" alt="网站从浏览器输入URL到页面展现的六个步骤-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/seooptimize/15277.html">网站从浏览器输入URL到页面展现的六个步骤</a></li><li><a target="_blank" href="https://www.kvidc.com/seooptimize/14633.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001173352-6519ad8096cdc-220x150.png" alt="做SEO必须要懂得基础的前端代码知识-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/seooptimize/14633.html">做SEO必须要懂得基础的前端代码知识</a></li><li><a target="_blank" href="https://www.kvidc.com/seooptimize/14585.html"><img data-src="https://www.kvidc.com/wp-content/uploads/2023/10/20231001173259-6519ad4b00757-220x150.png" alt="想要学好SEO，代码优化你不能忽略-康维主机测评-网站SEO优化" src="https://www.kvidc.com/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.kvidc.com/seooptimize/14585.html">想要学好SEO，代码优化你不能忽略</a></li></ul></div> </div>
</div>
<div class="sidebar">
<div class="widget widget_block"><li><span style="color: #ff00ff;"><strong> 承接主机商投稿、广告合作！</strong></span></li>
<p></p>
<li><span style="color: #ff00ff;"><strong> TG电报联系</strong></span>：<a href="https://t.me/kvidcadmin" target="_blank" rel="nofollow noopener noreferrer">https://t.me/kvidcadmin</a></li>
<p></p>
<li><span style="color: #ff00ff;"><strong> TG电报群</strong></span>：<a href="https://t.me/kvidc" target="_blank" rel="nofollow noopener noreferrer">https://t.me/kvidc</a></li>
<p></p>
<li><strong><span style="color: #ff00ff;"> 联系Q Q</span>：</strong><a href="https://wpa.qq.com/msgrd?v=3&uin=1031020920&site=qq&menu=yes" target="_blank" rel="nofollow noopener noreferrer">点击此处对话</a></li>
<p></p>
<li><span style="color: #ff00ff;"><strong> QQ交流群</strong></span>：<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=kFocug_SvY5UBpVzkNdkfenq2FeJCplh&authKey=s%2FvA1I%2Fl7iptBANdk05zPhy6qkG6TxwlsRdM4WL%2F3lCkR1kHr3eCxbWx5JYJI9wx&noverify=0&group_code=694362408" target="_blank" rel="nofollow noopener noreferrer">点击进入Q群 694362408</a></li>
<p></p>
<li><span style="color: #ff00ff;"><strong> 支付方式</strong></span>：<a>支持alipay、wechat、Usdt</a></li>
<p></p>
<li><strong><span style="color: #ff00ff;">本站投稿方式</span>：</strong>100元一篇，置顶三天！</li></div></div></section>
<div class="branding">
<div class="container">
<h2>康维主机测评网 方便 全面 快速 找到你的需求</h2>
<h4>专注IDC行业国内外服务器资源共享发布</h4>
</div>
</div><footer class="footer">
<div class="container">
<div class="flinks">
<strong>友情链接</strong>
<ul class='xoxo blogroll'>
<li><a href="http://www.msxindl.com/web/" rel="noopener" target="_blank">网址收录</a></li>
<li><a href="https://www.rxyunji.com" rel="noopener" target="_blank">融兴云机</a></li>
<li><a href="http://www.sh991.cn" rel="noopener" target="_blank">sh991网址导航</a></li>
<li><a href="https://www.zhansanjie.com/" rel="noopener" target="_blank">站三界导航</a></li>
<li><a href="https://renwai.cn" rel="noopener" target="_blank">人外导航网</a></li>
</ul>
</div>
<div class="fcode">
<h3><a href="https://beian.miit.gov.cn/" target="_blank"/>赣ICP备2022005120号-2</a>
<a href="https://ipw.cn/ipv6webcheck/?site=www.kvidc.com" title="本站支持IPv6访问" target='_blank'><img style='display:inline-block;vertical-align:middle' alt="本站支持IPv6访问" src="https://static.ipw.cn/icon/ipv6-s1.svg"></a></h3> </div>
<p>© 2021-2024 <a href="https://www.kvidc.com">康维主机测评-网站SEO优化</a> <a href="https://www.kvidc.com/sitemap.xml">网站地图</a>
</p>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?db5611c81ac7ff02e1102b617fea6a4c59973d991bfe4a8f2defc30fb942ff7d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?90e23c48b35f9372b73c12a0a391d6d7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script> </div>
</footer>
<div class="karbar karbar-rm"><ul><li><a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1031020920&site=qq&menu=yes"><i class="tbfa"></i><span>QQ咨询</span></a><span class="karbar-qrcode-wrap karbar-qrcode-mini">1031020920</span></li><li><a rel="nofollow" target="_blank" href="https://t.me/kvidcadmin"><i class="tbfa"></i><span>飞机咨询</span></a></li><li class="karbar-qrcode"><a rel="nofollow" href="javascript:;"><i class="tbfa"></i><span>QQ群交流</span></a><span class="karbar-qrcode-wrap">QQ群号：694362408<br><span data-id="QQ群号：694362408" class="copy-wechat-number">复制微信号</span><img src="https://www.kvidc.com/wp-content/uploads/2023/09/20230930180037-1.png"></span></li><li class="karbar-totop"><a rel="nofollow" href="javascript:(TBUI.scrollTo());"><i class="tbfa"></i><span>回顶部</span></a></li></ul></div>
<script>window.TBUI={"www":"https:\/\/www.kvidc.com","uri":"https:\/\/www.kvidc.com\/wp-content\/themes\/dux","ajaxurl":"https:\/\/www.kvidc.com\/wp-admin\/admin-ajax.php","ver":"8.7","roll":"1 2","copyoff":0,"ajaxpager":"0","fullimage":"1","captcha":0,"captcha_comment":1,"captcha_login":0,"captcha_register":0,"table_scroll_m":1,"table_scroll_w":"800","pre_color":0,"pre_copy":0,"turnstile_key":""}</script>
<!--FOOTER_CODE_START-->
<script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<!--FOOTER_CODE_END-->
<script type="text/javascript" src="https://www.kvidc.com/wp-content/themes/dux/assets/js/libs/jquery.min.js?ver=8.7" id="jquery-js"></script>
<script type="text/javascript" src="https://www.kvidc.com/wp-content/themes/dux/assets/js/loader.js?ver=8.7" id="loader-js"></script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?db5611c81ac7ff02e1102b617fea6a4c59973d991bfe4a8f2defc30fb942ff7d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></body>
</html>
<!-- Dynamic page generated in 0.211 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2024-11-23 18:11:37 -->
<!-- Compression = gzip -->
康维主机测评-网站SEO优化