Hexo站点建设之——基于Lighthouse查看网站性能

发表于 分类于 ， 阅读时长 ≈ 1 分钟

一 概述

查看网站相关信息常用的网站有：

站长之家-ping：ping检测，国内测速，国际测速，网站速度对比等
PageSpeed Insights：网站在移动设备和桌面设备的网页响应速度(墙)
爱测速:PageSpeed Insights国内版

本文介绍的是：基于Chrome浏览器查看网站性能(Lighthouse)

二 Lighthouse

2.1 Chrome自带Lighthouse

  • 打开要测试的网站

  • 按下F12键，打开开发者工具(或者右上角—>更多工具—>开发者工具)

    1
    2
    3
    4
    5
    Performance：性能
    Progressive Web App:Web App中的表现
    Best practices:最佳性能
    Accessibility:可访问性能
    SEO:搜索引擎优化

  • 点击Generate report，等待报告生成

2.2 Chrome插件Lighthouse

  • 安装chrome插件Lighthouse

  • 打开网站，点击lighthouse插件进行分析，结果如下

三 Lighthouse报告分析及网站优化

3.1 实验报告

  • 实验的结果为绿色—>橙色—>红色，颜色越浅
  • 性能表现越良好，颜色越深，表现越差

3.2 网站优化

  • Performance、Accessbility、Best Practices、SEO每项都有对应的报告和优化建议
  • 根据建议进行相应的优化(资源压缩，移除未使用资源，移除阻塞渲染的资源)