新龙网站建设技术标准是什么?

新龙采用谷歌Lighthouse网页审计规则作为网站建设技术标准之一,包含:网站性能、用户可用性、最佳操作实践和网站的SEO能力四大项内容,其主要细则如下:

网站性能包括:

  • 采用响应式网站设计技术以适应不同尺寸上网设备,勿对到达的页面(着陆页)使用重定向: 例如:yourdomain.com 直接指向网站的首页,打开快速。如果采用your domain.com/home到达首页会导致移动设备用户遭遇多次往返;有些企业单独制作移动端网站,采用m.yourdomain.com到达移动网站首页,其结果是移动浏览体验非常缓慢。还有些客户以为网站应该用www.yourdomain.com指向首页,这同样导致移动浏览体验非常缓慢。
  • 启用压缩功能。目前较新的浏览器版本都支持gzip压缩,对网站资源进行压缩能够大大缩减传输响应时间,最大能够缩减90%。
  • 缩短服务器响应时间。服务器响应用时控制在 200 毫秒内。 很多因素可能会影响服务器响应:例如应用逻辑、数据库查询、路由、资源 CPU 不足或内存不足等等。总结:需要选择高性能服务器。
  • 使用浏览器缓存。所有的浏览器都有缓存机制,网页上较大的资源能够通过缓存存储在浏览器从而缩短每次访问网页的响应时间。从这个角度来说一个从未访问过的网站初次打开速度可能感觉较慢,第二次打开时快了不少,这就是使用了浏览器缓存。
  • 缩减HTML、CSS 和 JavaScript。这些都是构成网页外观并与访问者互动的代码。HTML是网页编码,它历经多个版本的发展到现在是HTML 5版本;CSS的最新版本是CSS3,它是网站的样式控制文件,比如网页看起来是否“有质感”“漂亮”“时尚”等等;JavaScript负责网页的交互和动效。有人比喻HTML好像是人的骨架,CSS是皮肤,JavaScript就是动作招式,哈哈,差不多是这么回事。
  • 优化图片。前面新龙写过图片优化策略讨论的内容与此相关。对于网页来说,在所下载的字节数中,图片往往会占很大比例。因此优化图片是能有效减少网页加载时间提升网站性能。请检查网站的每一张图片是否经过最优化处理。优化图片工具链接https://imagemagick.org/index.php
  • 优化CSS发送过程。有时我们会遇到这样情况:访问一个网站,原来的漂亮面孔不见了,只看到错乱的文字和链接。这就是CSS样式表没有加载完成的原因。如果对于较小的CSS文件内嵌入HTML中,可让浏览器顺畅无阻地呈现网页。但不能把属性嵌入HTML文件中。对于较大的CSS文件需要做些分离,把呈现首屏内容的CSS内嵌到HTML,并暂缓加载其余样式,直到首屏内容显示出来为止。
  • 缩减首屏内容。多数网页其内容比较长,需要翻滚屏幕才能够阅读完。首屏是指打开网页没有操作翻滚看到的屏幕显示。如果对于一个较长的网页,我们需要调整HTML结构确保首屏展示内容快速,为了快速还需要缩减首屏数据量。现在比较流行较长首页,整个页面内容大约有3-4个屏长,根据这个要求,首页第一屏的内容(包括图片,动效、代码、调用数据等等)需要精心安排保证数据量最少。
  • 注意检查并移除影响网页内容显示的脚本语言JavaScript。

 

用户可用性包括:

  • 网站按钮是否使用了可访问的名称
  • 文档是否具有标题元素:标题元素不仅关系用户可用性,同时也关系搜索引擎,搜索用户严重依赖文档标题。它通常决定页面是否与查询相关;
  • 每个表单都要有一个标签:标签明确了表单元素的用途。虽然每个元素的用途对于有视力的用户来说都是显而易见的,但对于依赖屏幕阅读器的用户来说,没有标签无法明白这个表单;
  • 每个图像元素都有alt内容:图像信息应具有alt属性,该属性包含该图像内容的文本描述。屏幕阅读器允许视障用户通过将文本内容转换为他们可以使用的格式(如合成语音或盲文)来使用您的网站。屏幕阅读器无法转换图像;
  • 不要有“tabindex”属性大于0的元素

最佳操作实践包含:

  • 不使用应用程式缓存(AppCache)
  • 避免在自己的脚本中使用console.time()
  • 不使用date.now()来度量时间,请改用performance.now();
  • 避免使用不推荐的API
  • 避免使用document.write():对于连接速度慢的用户,如2G、3G或Wi-Fi速度慢的用户,通过document.write() 动态注入的外部脚本将使网站主页内容的显示延迟数十秒。;
  • 避免在自己的脚本中发生突变事件
  • 避免使用旧的CSS FlexBox,它比最新规范慢2.3倍;
  • 避免在页面加载时请求地理位置权限:用户对页面加载时自动请求其位置的页面感到困惑并产生不信任。与其在页面加载时自动请求用户的位置,不如将请求与用户的操作联系起来,比如设置“查找我附近的商店”按钮。确保网页明确地表达了对用户位置的需求。
  • 避免在页面加载时请求通知权限:好的通知是及时、相关和精确的。如果您的页面请求在页面加载时发送通知的权限,那么这些通知可能与您的用户无关,或者与他们的需求不完全相关。更好的用户体验是向用户发送特定类型的通知,并在用户选择加入后显示权限请求。
  • 显示具有不正确纵横比的图像:如果渲染图像的纵横比与源文件中的纵横比(“自然”纵横比)有显著不同,则渲染图像可能看起来失真,可能会造成不愉快的用户体验;
  • 包含具有已知安全漏洞的前端javascript库:入侵者拥有自动的网络爬虫,它扫描您的网站来查找安全漏洞。因此您的网站遭受到攻击的危险性很大
  • 防止用户粘贴到密码字段:一些网站声称阻止用户粘贴密码可以提高安全性。国家网络安全中心(NationalCyberSecurityCentre)认为此说法没有根据。密码粘贴提高了安全性,因为它允许用户使用密码管理器。密码管理器通常为用户生成强密码,安全地存储它们,然后在用户需要登录时自动将它们粘贴到密码字段中。
  • 将不安全的资源升级到https:当安全(https)站点请求不安全(http)资源时,称为混合内容错误。默认情况下,某些浏览器会阻止不安全的资源请求。如果您的网页依赖于这些不安全的资源,那么当它们被阻塞时,您的页面可能无法正常工作。
  • 使用HTTPS:所有网站都应该使用https进行保护,即便是那些不处理敏感数据的网站。HTTPS防止入侵者篡改或监听站点和用户之间的通信,还有更多作用。
  • 使用HTTP/2传输资源:HTTP/2 可更快地提供页面的资源,并且可减少通过网络传输的数据。
  • 网站使用 rel=”noopener” 打开外部锚:以前使用target=”_blank”指向另一个网站时,外部网页将与您的页面在同一个进程上运行。如果这个指向的网站有庞大的JavaScrip运行,将影响您的网站运行;
  • 网站使用被动事件侦听器以提升滚动性能

 

网站SEO性能包括:

 

  • 每一篇内容没有元描述:描述可以显示在谷歌的搜索结果中。高质量,独特的描述可以使您的网页更贴合相关的用户搜索,并增加您的搜索流量;
  • 文章没有标题元素:文章标题概述了页面的用途。对于依赖屏幕阅读器的用户来说,标题尤其重要,因为他们对页面上下文的了解较少;
  • 文档没有有效的hreflang:如果网站是根据用户的语言或区域提供不同的内容,请使用hreflang链接确保搜索引擎为该语言或区域提供正确的内容;
  • 文章没有有效的rel=canonical:当多个页面具有相似的内容时,搜索引擎会认为它们是同一页面的重复版本。例如,产品页面的桌面和移动版本会被认为是重复的。搜索引擎会选择其中一个页面作为规范版本,对其进行一次爬行,但对其他页面的较少爬行。规范链接允许您指定要爬网的版本。告诉爬虫应该在搜索结果中显示哪个URL;
  • 文章没有使用清晰的文字大小:在移动设备上,小于12px的文字通常很难读取,用户需要做放大才能够舒适的阅读文本;
  • 文章使用了插件:搜索引擎无法索引插件内容。插件内容不会显示在搜索结果中。许多移动设备不支持插件,这给移动用户带来令人沮丧的体验,将会增加您网站的跳出率并向搜索引擎表明页面对移动用户没有帮助的信号;
  • 链接没有说明性文本:链接描述是链接中的可点击词,帮助用户和搜索引擎更好地理解您的内容;
  • 页面的HTTP状态代码不成功:搜索引擎可能无法正确索引返回不成功HTTP状态代码的页面;
  • 页面被阻止索引:搜索引擎会对您的页面进行爬行,以便了解网站内容。如果您没有授予它对您的页面进行爬网的权限,将无法知道您的页面包含什么,因此无法在搜索结果中列出您的网页;
  • 无效的robots.txt文件:robots.txt文件是告诉搜索引擎您网站的哪些页面可以爬行;
  • 屏目上可点击的元素尺寸不合适:用户经常点击的交互元素,如按钮或链接。适当大小的点击目标使页面更易于使用。