昆明java培训学校告诉你web网站优化可以如何实现？

Posted 2023-04-08

参考技术A

随着互联网的不断发展，越来越多的消费者都开始通过移动端来访问网络接收自己需要的信息。而这些信息的传播都是需要通过移动端网页来实现的，所以，昆明北大青鸟http://www.kmbdqn.cn/今天就一起来了解一下关于移动端web网页的优化方法。

WEB服务端优化

有货的WEB端主要使用了nodejs，基于后端服务提供的HTTP接口服务来实现的前后端分离，这里的服务端优化主要是指在nodejs实现的web服务端进行优化。

优化的目的是提升服务端的响应和并发能力，充分发挥nodejs的异步非阻塞的特性，主要从以下几个方面去优化。

接口服务调用的优化

对于一个页面展示的路由，要处理这个路由，可能需要调用多个接口并且进行进行界面逻辑的处理。

接口合并我们对于一个页面调用可以合并的接口，进行接口合并，减少接口调用次数，如：以商品详情页为例，商品的一些特性，可以在一个接口返回，尽可能的减少接口调用的个数，因为每次接口的处理都有网络IO,对象序列化，压缩和解压的过程。

接口异步调用但是并不是所有的接口都可以合并，对于无法合并的接口，我们尽量使用node的异步非阻塞的特性，进行异步调用，同时调取多个接口，而调用耗时取决于较慢的接口。

这里要说明一点：对于接口依赖，如A接口依赖B接口的返回结果，像这种情况，我们最好梳理下接口设计，减少这样的串行调用，因为这样，调用耗时是多个接口耗时的总和。

减少接口交互数据返回的数据较多的情况下，会导致JSON序列化，数据批量对象处理，产生额外的性能损耗。可以做下接口返回数据结构的精简，返回必要的字段(页面会展示用到的数据)以及可以调整返回item个数。从而达到减少数据的返回消息体的大小。此外请求接口时需要gzip压缩，可以大大的减少网络传输的时间，尽管需要解压会消耗一部分CPU的时间，但是对接网络IO的损耗，还是值得的。

业务处理的优化

现在我们主要的服务端业务处理，主要对于页面逻辑的处理，如路由控制，会话处理，视图对象处理，模板渲染。我们在这些处理过程中进行了一些优化。

模板渲染的优化

我们在实际使用过程中，发现模板的渲染是十分消耗性能的，特别的模板的预处理过程，如果预处理过程是在用户访问过程中去处理，会慢不止一个数量级，所以我们把预处理的过程提前了(改造了hbs)，在启动web应用时，已经预编译完成。同时我们发现handlebars的一些默认配置属性，如缩减处理，在字符串拼接过程中会损耗一定的性能，所以可以关闭html片段的缩减。

详情

官方电话在线客服官方服务
官方网站领学习资料计算机培训设计培训编程培训

百度谷歌搜索引擎研究，如何做SEO优化？网站优化实操（程序员必看）

目录

1.搜索引擎原理

1.1百度搜索引擎工作方式

1.2谷歌搜索排名技术

1.3新网站如何应对搜索

2 SEO优化重点

2.1 URL 的三要素

2.2 移动端不能忽视

2.3 速度 / 性能直接影响 SEO

2.4 页面元素有三档

2.5 重要内容最好同步展示

3 网站代码优化实操

3.1 优化重点

3.2 标签优化

---

1.搜索引擎原理

1、基本概念

    来源于中文wiki百科的解释：（网络）搜索引擎指自动从互联网搜集信息，经过一定整理以后，提供给用户进行查询的系统。
     来源于英文wiki百科的解释：Web search engines providean interface to search for information on the World WideWeb.Information may consist of web pages, images and other types offiles.（网络搜索引擎为用户提供接口查找互联网上的信息内容，这些信息内容包括网页、图片以及其他类型的文档）

2、分类

     按照工作原理的不同，可以把它们分为两个基本类别：全文搜索引擎（FullTextSearch Engine）和分类目录Directory）。

    分类目录则是通过人工的方式收集整理网站资料形成数据库的，比如雅虎中国以及国内的搜狐、新浪、网易分类目录。另外，在网上的一些导航站点，也可以归属为原始的分类目录，比如“网址之家”（http://www.hao123.com/）。

    全文搜索引擎通过自动的方式分析网页的超链接，依靠超链接和HTML代码分析获取网页信息内容，并按事先设计好的规则分析整理形成索引，供用户查询。

    两者的区分可用一句话概括：分类目录是人工方式建立网站的索引，全文搜索是自动方式建立网页的索引。（有些人经常把搜索引擎和数据库检索相比较，其实是错误的）。

3、全文搜索的工作原理

    全文搜索引擎一般信息采集、索引、搜索三个部分组成，详细的可由搜索器、分析器、索引器、检索器和用户接口等5个部分组成

     （1）信息采集（Webcrawling）：信息采集的工作由搜索器和分析器共同完成，搜索引擎利用称为网络爬虫（crawlers）、网络蜘蛛（spider）或者叫做网络机器人（robots）的自动搜索机器人程序来查询网页上的超链接。

    进一步解释一下："机器人"实际上是一些基于Web的程序，通过请求Web站点上的HTML网页来对采集该HTML网页，它遍历指定范围内的整个Web空间，不断从一个网页转到另一个网页，从一个站点移动到另一个站点，将采集到的网页添加到网页数据库中。"机器人"每遇到一个新的网页，都要搜索它内部的所有链接，所以从理论上讲，如果为"机器人"建立一个适当的初始网页集，从这个初始网页集出发，遍历所有的链接，"机器人"将能够采集到整个Web空间的网页。

     网上后很多开源的爬虫程序，可以到一些开源社区中查找。

    关键点1：核心在于html分析，因此严谨的、结构化的、可读性强、错误少的html代码，更容易被采集机器人所分析和采集。例如，某个页面存在<body这样的标签或者没有</body></html>这样的结尾，在网页显示是没有问题的，但是很有可能会被采集拒绝收录，在例如类似../../***.htm这样的超链接，也有可能造成蜘蛛无法识别。这也是需要推广web标准的原因之一，按照web标准制作的网页更容易被搜索引擎检索和收录。

    关键点2：搜索机器人有专门的搜索链接库，在搜索相同超链接时，会自动比对新旧网页的内容和大小，如果一致，则不采集。因此有人担心修改后的网页是否能被收录，这是多余的。

    （2）索引（Indexing）：搜索引擎整理信息的过程称为“建立索引”。搜索引擎不仅要保存搜集起来的信息，还要将它们按照一定的规则进行编排。索引可以采用通用的大型数据库，如ORACLE、Sybase等，也可以自己定义文件格式进行存放。索引是搜索中较为复杂的部分，涉及到网页结构分析、分词、排序等技术，好的索引能极大的提高检索速度。

    关键点1：虽然现在的搜索引擎都支持增量的索引，但是索引创建依然需要较长的时间，搜索引擎都会定期更新索引，因此即便爬虫来过，到我们能在页面上搜索到，会有一定的时间间隔。

     关键点2：索引是区别好坏搜索的重要标志。

    （3）检索（Searching）：用户向搜索引擎发出查询，搜索引擎接受查询并向用户返回资料。有的系统在返回结果之前对网页的相关度进行了计算和评估，并根据相关度进行排序，将相关度大的放在前面，相关度小的放在后面；也有的系统在用户查询之前已经计算了各个网页的网页等级（PageRank 后文会介绍），返回查询结果时将网页等级大的放在前面，网页等级小的放在后面。

    关键点1：不同搜索引擎有不同的排序规则，因此在不同的搜索引擎中搜索相同关键词，排序是不同的。

1.1百度搜索引擎工作方式

    我所知道的百度搜索：由于工作的关系，小生有幸一直在使用百度的百事通企业搜索引擎（该部门现已被裁员，主要是百度的战略开始向谷歌靠拢，不再单独销售搜索引擎，转向搜索服务），据百度的销售人员称，百事通的搜索核心和大搜索的相同，只有可能版本稍低，因此我有理由相信搜索的工作方式大同小异。下面是一些简单介绍和注意点：

     1、关于网站搜索的更新频率

    百度搜索可以设定网站的更新频率和时间，一般对于大网站更新频度很快，而且会专门开设独立的爬虫进行跟踪，不过百度是比较勤奋的，中小网站一般也会每天更新。因此，如果你希望自己的网站更新得更快，最好是在大型的分类目录（例如yahoosina网易）中有你的链接，或者在百度自己的相关网站中，有你网站的超链接，在或者你的网站就在一些大型网站里面，例如大型网站的blog。

     2、关于采集的深度

    百度搜索可以定义采集的深度，就是说不见得百度会检索你网站的全部内容，有可能只索引你的网站的首页的内容，尤其对小型网站来说。

     3、关于对时常不通网站的采集

    百度对于网站的通断是有专门的判断的，如果一旦发现某个网站不通，尤其是一些中小网站，百度的自动停止往这些网站派出爬虫，所以选择好的服务器，保持网站24小时畅通非常重要。

     4、关于更换IP的网站

    百度搜索能够基于域名或者ip地址，如果是域名，会自动解析为对应的ip地址，因此就会出现2个问题，第一就是如果你的网站和别人使用相同的IP地址，如果别人的网站被百度惩罚了，你的网站会受到牵连，第二就是如果你更换了ip地址，百度会发现你的域名和先前的ip地址没有对应，也会拒绝往你的网站派出爬虫。因此建议，不要随意更换ip地址，如果有可能尽量独享ip，保持网站的稳定很重要。

     5、关于静态和动态网站的采集

    很多人担心是不是类似asp?id=之类的页面很难被收集，html这样的页面容易被收集，事实上情况并没有想的这么糟，现在的搜索引擎大部分都支持动态网站的采集和检索，包括需要登陆的网站都可以检索到，因此大可不必担心自己的动态网站搜索引擎无法识别，百度搜索中对于动态的支持可以自定义。但是，如果有可能，还是尽量生成静态页面。同时，对于大部分搜索引擎，依然对脚本跳转（JS）、框架（frame）、

Flash超链接，动态页面中含有非法字符的页面无可奈何。

     6、关于索引的消失

    前面讲过，搜索的索引需要创建，一般好的搜索，索引都是文本文件，而不是数据库，因此索引中需要删除一条记录，并不是一件方便的事情。例如百度，需要使用专门的工具，人工删除某条索引记录。据百度员工称，百度专门有一群人负责这件事情——接到投诉，删除记录，手工。当然还能直接删除某个规则下的所有索引，也就是可以删除某个网站下的所有索引。还有一个机制（未经验证），就是对于过期的网页和作弊的网页（主要是网页标题、关键词和内容不匹配），在重建索引的过程中也会被删除。

     7、关于去重

    百度搜索的去重不如谷歌的理想，主要还是判别文章的标题和来源地址，只要不相同，就不会自动去重，因此不必担心采集的内容雷同而很快被搜索惩罚，谷歌的有所不同，标题相同的被同时收录的不多。

    补充一句，不要把搜索引擎想得这么智能，基本上都是按照一定的规则和公式，想不被搜索引擎惩罚，避开这些规则即可。

1.2谷歌搜索排名技术

    对于搜索来说，谷歌强于百度，主要的原因就是谷歌更加公正，而百度有很多人为的因素（这也符合我国的国情），google之所以公正，源于他的排名技术PageRank。

     很多人知道PageRank，是网站的质量等级，越小表示网站越优秀。其实PageRank是依靠一个专门的公式计算出来的，当我们在google搜索关键词的时候，页面等级小的网页排序会越靠前，这个公式并没有人工干预，因此公正。

     PageRank的最初想法来自于论文档案的管理，我们知道每篇论文结尾都有参考文献，假如某篇文章被不同论文引用了多次，就可以认为这篇文章是篇优秀的文章。

     同理，简单的说，PageRank能够对网页的重要性做出客观的评价。PageRank 并不计算直接链接的数量，而是将从网页 A 指向网页 B 的链接解释为由网页 A对网页 B 所投的一票。这样，PageRank 会根据网页 B 所收到的投票数量来评估该页的重要性。此外，PageRank还会评估每个投票网页的重要性，因为某些网页的投票被认为具有较高的价值，这样，它所链接的网页就能获得较高的价值。

     Page Rank的公式这里省略，说说影响Page Rank的主要因素

    1、指向你的网站的超链接数量（你的网站被别人引用），这个数值越大，表示你的网站越重要，通俗的说，就是其它网站是否友情链接，或者推荐链接到你的网站；

    2、超链接你的网站的重要程度，意思就是一个质量好的网站有你的网站的超链接，说明你的网站也很优秀。

    3、网页特定性因素：包括网页的内容、标题及URL等，也就是网页的关键词及位置。

1.3新网站如何应对搜索

     以下内容是对上面分析的总结：

1、搜索引擎为什么不收录你的网站，存在以下可能（不绝对，根据各自情况不同）

    （1）没有任何指向链接的孤岛网页，没有被收录的网站指向你的超链接，搜索引擎就无法发现你；
    （2）网站中的网页性质及文件类型（如flash、JS跳转、某些动态网页、frame等）搜索引擎无法识别；
     （3）你的网站所在服务器曾被搜索引擎惩罚，而不收录相同IP的内容；
     （4）近期更换过服务器的IP地址，搜索引擎需要一定时间重新采集；
     （5）服务器不稳定、频繁宕机，或者经不起爬虫采集的压力；
     （6）网页代码劣质，搜索无法正确分析页面内容，请至少学习一下HTML的基本语法，建议使用XHTML；
     （7）网站用robots（robots.txt）协议拒绝搜索引擎抓取的网页；
     （8）使用关键词作弊的网页，网页的关键词和内容严重不匹配，或者某些关键词密度太大；
     （9）非法内容的网页；
     （10）相同网站内存在大量相同标题的网页，或者网页的标题没有实际含义；

2、新站如何做才正确（仅供参考）

     （1）和优秀的网站交换链接；
     （2）广泛登录各种大网站的网站目录列表；
     （3）多去质量好的论坛发言，发言要有质量，最好不要回复，发言中留下自己网站地址；
     （4）申请大网站的博客（新浪、网易、CSDN），并在博客中推广自己的网站；
     （5）使用好的建站程序，最好能生成静态页面和自动生成关键词；
     （6）重视每个网页的标题，以及<head>区域，尽量把符合的关键词放在这些容易被搜索索引的位置，重视文章的开头部分，尽可能在文章的开始部分使用类似摘要的功能（可以学学网易的文章样式）。

    例如“基于开源jabber(XMPP)架设内部即时通讯服务的解决方案”；

     标题部分：<title>基于开源jabber(XMPP)架设内部即时通讯服务的解决方案- 肥龙龙（expendable）的专栏 -CSDNBlog</title>
     关键词部分：<meta name="keywords"cCOLOR:#c00000">安装,">
     文章描述部分：<metaname="description" cCOLOR:#c00000">是著名的即时通讯服务服务器，它是一个自由开源软件，能让用户自己架即时通讯服务器，可以在Internet上应用，也可以在局域网中应用。

    XMPP（可扩展消息处理现场协议）是基于可扩展标记语言（XML）的协议，它用于即时消息（IM）以及在线现场探测。它在促进服务器之

间的准即时操作。这个协议可能最终允许因特网用户向因特网上的其他任何人发送即时消息，即使其操作系统和浏览器不同。XMPP的技术来自

于Jabber，其实它是Jabber的核心协定，所以XMPP有时被误称为Jabber协议。Jabber是一个基于XMPP协议的IM应用，除Jabber之外，XMPP还支持很多应用。

2 SEO优化重点

从业务的角度去看，前端工程师涉及的 SEO 建议，最重点的有 5 个方面，分别是：URL、移动友好性、性能、页面元素、内容展现。

2.1 URL 的三要素

URL 是 SEO 工作的基础，也是容易被忽视的一个因素。URL 一定要注意以下三个方面：

• 不同的页面内容要有不同的 URL，而不是用 TAB 来呈现
• URL 要保证唯一性
• URL 要简短，有可读性

首先说第一点，不同内容用不同的 URL 来承接。我们的前端工程师在做一些专题的时候，就经常用 JS 来呈现网页内容，而没有用单独的 URL 来承接。比如下面这个页面：

当用户点击某个类目，前端工程师会用新获取到的内容去更新原有页面，而没有生成新的 URL。这就造成了这个频道只有一个URL。

而 SEO 在投放的时候，其实是按照页面纬度投放。如果这个专题页只有一个 URL，也就是只能投放一个网页，而类目的那些页面因为没有生成单独的 URL 而无法投放（一般来说，投放的网页越多，产生的 SEO 流量越多）。

其次，URL 的唯一性。正常情况下， URL 和网页是一一对应的，一个网页只有一个 URL，一个 URL 也只承载一个主题的网页。（注：如果一个网页有多个 URL，可以用 canonical 来指定规范网址）。

最后，URL 要简短，有可读性。Google 会利用 URL 来判断网页在整个网站内的层级，所以不要用过长的 URL。而且，简短和可读的 URL 对用户会有更好的体验，吸引用户点击（英文 URL 更是如此）。

注：Google 并不排斥动态 URL，比如 WordPress 的标准 URL （?p=）就是动态的。但要解决好参数过多、参数顺序不一致的问题。

参考文档：《保持简单的网址结构》https://support.google.com/webmasters/answer/76329?hl=zh-Hans&ref_topic=9460495

2.2 移动端不能忽视

有一些前端的朋友还是之前的思维方式，认为把 PC 网页做好就行了。而且产品和老板都是用电脑浏览，没什么问题。但其实目前在大多数国家和地区，移动端流量已经超过 PC端。

根据 statcounter 的数据，移动端流量在 2016 年 11 月就已经超过了 PC 端。所以，移动端网页一定不可忽视。

Google 已经推出了移动网页索引，也就是以移动端网页作为主权重页面（之前是 PC 为主）。

对于 移动端网页，Google 有 3 种配置方式，分别是：自适应设计、动态提供内容、单独的网址。另外，Google 也推出了 AMP 框架，可以对内容和静态文件做缓存，并有更快的性能（国内的百度和搜狗也兼容）。

参考文档：

• 《移动版网站搜索引擎优化 (SEO) 概述》https://developers.google.com/search/mobile-sites/mobile-seo/
• 《AMP》 https://amp.dev/zh_cn/

2.3 速度 / 性能直接影响 SEO

有两个速度指标会对 SEO 有直接影响，一个是 TTFB，一个是网页打开时间。

TTFB 是直接影响爬虫的抓取。首先，大多数爬虫仍是对网页源码进行抓取，并不做渲染；其次，每个网站的抓取配额是有限的，爬虫更高效的访问，会带来更多的收录量，从而产生流量。

（注：爬虫技术也在发展，目前已经可以对一部分 JS 内容进行识别，但因为效率较低，这部分比例还比较小。）

网页打开时间，会影响用户的搜索体验，也是 Google 公开的排名因素之一。网页打开速度越慢，用户跳出率越高，会被认定为 Bad Click，从而降低排名。以下是 Webmaster 官方博客关于速度影响排名的文章：

Google 继 PageSpeed 之后，又推出了 Lighthouse 项目，帮助站长优化网页性能。从我实际测试来看，Lighthouse 有更强大的功能，更符合现在的网页技术，远超之前的 YSlow 和 PageSpeed。

参考文档：

• 《Lighthouse 介绍》 https://developers.google.com/web/tools/lighthouse/
• 《Using page speed in mobile search ranking》 https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

2.4 页面元素有三档

页面元素对 SEO 也有影响，按照重要程度可分为三档：

• 第一档：TDK
• 第二档：面包屑导航、结构化数据
• 第三档：H 标签、ALT 标签

TDK 是 Title, Description, Keywords 这 3 个标签的简称，其中 Title、Description 最关键，直接影响 SEO 的搜索词和搜索结果展现（简称 SERP ）。面包屑导航和结构化数据，也直接影响 SERP。

而 H 标签、ALT标签则是帮助搜索引擎理解网页的重点内容和图片。

参考文档：《在搜索结果中创建良好的标题和摘要》https://support.google.com/webmasters/answer/35624?hl=zh-Hans

2.5 重要内容最好同步展示

Google 官方文档曾说过：

大部分“蜘蛛”程序查看网站的方式与Lynx一样。如果因应用了JavaScript、Cookie、会话ID、DHTML或Macromedia Flash等技术，而造成在文本浏览器中无法看到整个网站，则“蜘蛛”程序在抓取此网站时可能也会遇到麻烦。

我之前参加 Google 会议时了解到，Googlebot 已经能抓取解析简单的 JS，并能通过 CSS 识别重要的内容。但从成本来看，对 JS 和 CSS 的解析和识别，效率还是偏低（相比于只抓源码）。所以 Google 仍建议重要内容用同步展示，而不是异步。

Google 也在今年推出了动态呈现技术，作为一种临时解决方。下面是动态呈现技术的原型图：

参考文档：

• 《打造方便Google处理的网站的步骤》https://support.google.com/webmasters/answer/40349?hl=zh-Hans
• 《实现动态呈现》https://developers.google.com/search/docs/guides/dynamic-rendering?hl=zh-cn

3 网站代码优化实操

3.1 优化重点

1.<title>标题： 
标题要强调重点，把重要的关键词放在前面不要重复出现，每个页面的title不要设置相同的；

2.<meta keywords>关键词： 
列举出几个关键词即可，不要过分堆砌；

3.<meta description> 网页描述： 
这里要高度概括网页的内容，不可太长，每个页面的description也要不同。

4.对于网页<body>中的代码，我们要遵循 语义化代码 （html标签都有其特定的意义，适当的标签要用在适当的地方，要让人和搜索引擎程序都一目了然）

如何做到语义化?
   （1）h1~h6标签多用于标题
   （2）ul标签多用于无序列表
   （3）ol标签用于有序列表
   （4）dl标签用于定义数据列表
   （5）em,strong表示强调
   （6）span标签是html里面最没有语义的

3.2 标签优化

1/<a>标签：加上链接说明title，另外对于指向其他网站的链接要加上"rel=nofollow",是其不要爬取这个链接。

2/<h1>标签：网站的标题不仅要用h还要用<h1>，因为对爬虫来说<h1>是最重要的，<h1>样式太大可以用css修饰。正文标题用<h1> ,副标题用 <h2>，其他不重要的地方就不要滥用h标签了。

3/<p>标签与<br>标签： 
爬虫读到<p>标签就知道这是一个段落，二对于<br>标签，<br>标签只用于文本内的换行。

<div>
<span>xxxx</span><br>
<span>xxxxx</span><br>
//这样换行是不对的，可以通过调整间距到达效果
</div>

4/<table>标签：

<table border="1">
  <caption>表格标题</caption>
  //caption标签是必须的
  <tr>
     <th>m</th>
     <th>m</th>
  </tr>
 </table>

5/<img>标签应使用alt说明，爬虫对图片的读取有限。

6/<strong><em>与<b><i>标签：

<srong> 标签突出主体内容，权重NO.1，在搜索引擎中能得到高度的重视，它能突出关键词表示内容。<b>标签在页面中的显示和<srong> 标签一样，但在搜索引擎方面却起不到很好的效果，<em>斜体，也是为了突出主体内容，权重方面只低于<srong>。 
所以，如果只是为了效果则使用<b><i>标签,如果是为了SEO则使用<strong><em>。

7/其他：

1~要利用css布局，把重要内容的html代码放在最前面。爬虫是从上到下读取的。 
2~重要内容不要用js输出。 
3~尽少使用iframe框架。一般，爬虫是不会读取里面的内容的。 
4~慎重使用display:none; 
对于暂时不想显示的内容应设置z-index或者将其放置在浏览器显示范围外。而不是使用使用display:none; 因为爬虫会把display:none;里的内容过滤掉。 
5~不断的精简代码，能用一个标签完成的就不要用两个！

写到手软，看完的朋友们，欢迎一键三连。