• 类别：pages
• 日期：2020-05-26
• 浏览：6980
• 评论：4

    首先是测试方法都采用功能全开进行检测的，也就是包括了所有自带插件，然后服务器均已经设置了基本（静态缓存等）优化，其次是开发标准，除程序自带逻辑问题外，主题设计均符合W3C标准。为什么说除程序自带逻辑问题外，先看一下W3C检测结果。

    第一个错误是由于引用了lazyloaded屏外延迟加载技术，导致img标签无法按照W3C标准执行，这里我采用了固定src地址（点击这里）的方式暂时规避W3C检测问题。本来是想采用base64的形式，但是感觉会增加载入时间，因此还是考虑直接使用静态图片，首页载入的时候多一个并发，后面就不会再有。剩下的3个错误都是因为zb自带的日历模块导致..这里建议，非必要的情况下，别启用日历模块。

    接下来看下其他平台的检测结果，由于谷歌的PageSpeed Insights也是基于Lighthouse的检测结果为准，因此我们直接用Lighthouse来检测。

    基本都是满分，我们来看一下Performance的扣分项

#Eliminate render-blocking resources 0.8 s
#Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.
…style/style.css(www.onx8.com)    46.2 KB    780 ms    
…script/jquery-2.2.4.min.js(www.onx8.com)    30.4 KB    930 ms    
#Remove unused CSS 0.6 s
#Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity. Learn more.
…style/style.css(www.onx8.com)    46.2 KB    43.5 KB

    这里css是个大问题，由于是移植的思否的主题，而且主题自适应，想精简有一定的难度，需要测试很久，因此，这个历程我排到了最后。至于jquery是必选项，程序默认就必须要支持，因此这个忽略不计。

    接下来看一下Accessibility的扣分项

#Background and foreground colors do not have a sufficient contrast ratio.
#Low-contrast text is difficult or impossible for many users to read. Learn more.
Home <a href="/" draggable="false"><i class="fa fa-home"></i>Home</a>
...

    大致的意思就是，前后颜色对比不够明显，emmmm这个也可以忽略不计，继续看Best Practices的扣分项