站点优化专题最后一篇啦,前两篇着重于网站性能优化,最后一篇来看看影响一个网站用户体验的因素除了性能表现,还有哪些方面。这里我将使用Lighthouse自动化工具来综合测试一个网站的质量,除了基本的性能表现指标外,专为残疾人士等提出的“可访问性”指标也同样重要。除此之外还有页面安全性、SEO集成等指标。

一个Web应用的体验好坏,第一眼的印象是外观设计。无论是简洁大方、清新自然、梦幻深邃还是萌系可爱等等风格,只要色彩搭配合理、布局结构清晰,能够传达出设计者内心的意愿,就不失为优秀的设计作品。

我虽然是个开发狗,但是也常常混迹各大设计灵感以及素材网站:国外的Pinterest、Unsplash、We Heart It都是不错的去处;国内的有花瓣、堆糖、配色网等。经常去这些网站采集点子对前端的开发设计是很有帮助的,学学色彩原理、构图技巧什么的。不要以为一个前端程序员只会切图写CSS就够了,而对于外观设计完全不关心。我认为这种想法是不对的,对艺术创造的认识应当深埋于每一个开发者的脑中,把代码当成一件艺术品去打造,这样才能挖掘出编程的快乐。

当一个网页有了好的外观,就应该着手考虑性能表现了。关于这一点,前两篇已经写了好多了,这篇里面就不多说了。今天要写的是Lighthouse这款Web应用综合测试工具。

关于Lighthouse,上篇里面简单说了一下:在Chromium系浏览器开发者工具里,有个Audit选项卡,这里面能进行页面审查,而它所用到的工具就是Lighthouse。我做了一个完整的页面分析,生成的报告我上传到本站使用的静态资源服务器上了,本文最后有查看链接。

Lighthouse有五大分析标准:性能表现(Performance)、辅助功能/可访问性(Accessibility)、搜索引擎优化(SEO)、最佳实践(Best Practices)以及渐进式Web应用(Progressive Web App)。上篇中的PageSpeed Insights,就是Performance。

辅助功能(Accessibility)

辅助功能(或者说“可访问性”)这一方面,在以往的Web开发过程中基本上很少提及,我也没怎么去关注。事实上,大部分的前端开发者关注的重点都在实现页面布局和(正常的)用户交互上。

我去年在Font Awesome官网上看例子时发现了aria-hidden这一HTML属性,MDN对它的解释是:把该元素和它的所有子元素从可访问性树上移除。这时候我才开始了解“辅助功能”这一技术:这是一项为无法像正常人那样浏览网页的特殊群体而制作的Web标准,例如语义化的HTML标签(可被屏幕阅读器读取)、语义化的HTML属性(上面的aria-hidden就是)、多媒体内容的文本替代(比如<img>标签的alt属性)。

关于合理使用HTML标签,新一代的HTML5标准提供了大量的语义标签:<button><footer><header>等等更多。使用新的标签一方面可以让HTML结构可读性更强,另一方面也更便于搜索引擎识别页面内容。

使用合理的HTML结构也同样重要:一个使用<h1><h2><p><ul><li>等文本区块标签排版的内容,要远优于单纯用<div>或者<br>标签一把梭的内容。前者可以很方便的让使用屏幕阅读器的用户按区块读取内容,而后者是一次性读取所有内容。

还有在CSS编写中需要注意的地方:CSS样式应当尽可能的不影响视觉障碍者的浏览体验,比如突出文本显示,让文本与背景颜色形成良好对比;使用合理的行高、字符间距、字体大小,提高文本清晰度和阅读的舒适度。

WAI-ARIA,是一组增强浏览器无障碍功能体验的技术,它们可以真实的告诉浏览器指定的HTML标签用作什么用途,从而给屏幕阅读器提供更有价值的信息。上面提及的aria-hidden属性就是其中一种:该属性标记为true的HTML元素不会被浏览器Accessibility API识别,也就不会被屏幕阅读器读取。这一属性常常用在一些纯装饰性的图标文字上,例如Font Awesome。

更多辅助功能最佳实践请参考MDN文档:→传送门

搜索引擎优化(SEO)

这一点呢,大多数经营着自己站点的站长都了解,就是让搜索引擎收录索引自己站点然后提高曝光度和搜索结果排名的解决方案。

我这里就简单说几个方法:

  • <head>标签中有<title>标记,这是必须的,描述页面标题。
  • <head>标签中有meta描述元信息,例如<meta name='description' content='xxxx'>,这个标记用来告诉搜索引擎页面的具体内容是什么,这一描述性内容应该限制在160个字符以内。
  • 可选的meta关键词元信息,例如<meta name='keywords' content='xxxx'>,用来告诉搜索引擎页面内容的关键词是什么,多个关键词用逗号隔开逐一写。
  • 不阻止搜索引擎蜘蛛,在<head>标签中不要出现这种meta元信息:<meta name="robots" content="noindex">,除非是不想被搜索引擎抓取的页面。
  • 正确书写robots.txt文件:这一文件位于站点根目录,用来描述哪些页面或者目录可被搜索引擎蜘蛛爬取,哪些不可以。

WordPress插件市场里有很多优秀的SEO插件,排名第一的Yoast SEO不支持中文,支持中文的里面All in One SEO Pack这款插件很不错,可以帮助生成搜索引擎友好的页面meta标记,还能为每篇文章单独添加meta描述以及标签,单独设置是否允许搜索引擎抓取。

最佳实践(Best Practices)

这一部分里Lighthouse给出了几项需要注意的地方,主要是页面安全方面的。

Lighthouse 报告“最佳实践”建议
Lighthouse 报告“最佳实践”建议

第一个是书写链接的注意事项:指向跨站并且使用了target="_blank"的链接需要给<a>标签加上rel="noopener"以及rel="noreferrer"两个属性,避免新打开的窗口中包含恶意代码,而这些恶意代码可以引用上一个窗口对象,从而操作上一个窗口中的DOM元素。

第二个是避免使用老旧的JavaScript库,这些库常常包含漏洞代码。

还有一些测试点是我已经通过的,Lighthouse就没有单独列举出来,例如避免使用老旧的JavaScript API、避免让浏览器在控制台输出错误信息、图像应按照正常长宽比显示等等,具体内容可以在详细的分析报告中查看。

最后一个方面:渐进式Web应用,这点我没有做,因为这点需要让整个Web应用支持离线访问,来使Web应用具有像本机应用一样的原生体验,更多内容请参考MDN文档:→传送门

最后呢,完整的Lighthouse分析报告在线查看、下载请点这里,无法直接访问Google的朋友可以直接点击链接查看。一开始的GTmetrix分析报告在线查看、下载请点这里

上篇链接:从0开始做网站优化(中)——使用 Google PageSpeed Insights 工具

上上篇链接:从0开始做网站优化(上)——使用 GTmetrix 网页性能评估工具

发表评论

电子邮件地址不会被公开。 必填项已用*标注