图像是网站或a越多参与视觉体验 访问者越多越好
图像也是最大增重者之一, 有可能延缓客户经验或更糟,
好消息是工具像云式帮助易置图像和视频优化, 但重要的是首先了解问题
正因如此我们搭建图像碳化.com.
测试网站后头向下寻产品留步复习
启发工具像那些绿网基金会,网站碳计算器并WebPage测试工具聚焦于确定图片具体如何影响网站
聚焦性能效果 并缩小图像对环境的影响 包括每次请求页时产生多少碳
我们看到图像最大潜在改进领域内容发布网站或a
视频肯定能从尺寸上爬上,但图像比较常见,与众不同。更不用提很多时间 人嵌入视频, 这样做第三方工具像YouTube
取数据99.88%的图像没有以最优格式发送
想象一个场景 一夜之间 全世界每个人都开始优化图像我们正在寻找大量碳存
图像碳工作五大构件
- 从网站抓取所有图像
- 上传并创建优化版本比较
- 收集所有图像元细节,包括估计碳排放
- 全部存储缓存以避免昂贵请求
- 友情UI显示所有这一切
切入这些点
做任何这些工作,我们需要 能够查找页面上所有图像各种选择解决之道
第一次尝试使用laywright游戏ibjective工具测试,但可重定位任务,如无头访问网站收集资讯
问题多半时间传出 和JavaScript世界结果可靠性我们并不想处理服务器复杂性问题, 所以选择免服务器服务, 很多服务超时10s, 即便考虑到这一点, 人等待时间长 并展开其他工作
除此以外,试图确定页面完全建立时可能具有挑战性,JaavaScript包括有许多变量在运行中, 特别是考虑多组网站检查最常用案例有效
垃圾桶可从框外提取图像,包括确保JavaScript用简单复选框制作
抽取规则 :JSON系统.stringify图片制作:{选择器:IMG,类型:链表,输出:{src系统:mg@src,加载:mg@加载, } }}),等待浏览器:'domcontentloaded'代码语言JavaScript高山市javascript)
搭建程序很容易 请求构建程序 完全没有必备知识
这使得图像收集很容易 简单API请求scrapingbee,
获取图像后,我们需要创建一种可控方式,既检查元数据,又交付图像原版和优化版
易决策-通俗处理得相当好
图片整理后上传至云情网站, 以确保能可靠地从网站发送图像(特别是考虑到我们不想垃圾邮件网站原创图片URLs)
上传后,好处是很容易收集元数据,包括维度和文件化,这对计算排放至关重要。
优化版本简单变换f并取文件分量
AVIF用于创建原始图像和优化版本之间的可靠基线f_auti通常是推荐方式,以确保浏览器和设备兼容性,视个人访问的设备而定,可能提供不同格式,扭曲结果
以图片和元数据两种版本, 我们准备取出计算器
计算碳排放复杂题材.诚实组织发布模型并强调估计结果都非常清晰
我们向上看绿网基础并使用可持续Web设计模型通过CO2js获取最佳结果
重现,从实现角度讲,这相当简单,因为CO2jsSDKperVisit方法尝试计算重复访问缓存
从原创图像和优化图像传输字节数据,返回从所服务数据量释放估计量碳
康斯特CO2正文=排放量.perVisit真实性|虚伪//绿色宿主康斯特co2Oprimized = expense.perVisit真实性|虚伪//绿色宿主代码语言JavaScript高山市javascript)用它,我们得到了所有信息 开始显示结果
但首先... 从用户经验角度讲,所有这些请求都长而贵
运行无服务器或边缘函数以抓取网站
时间寄托于热切想看到结果的来访者时间浪费能量(和碳)坦白说 时间计算成本
为了避免每次提出昂贵请求,我们可以使用数据库缓存结果
我们是大影迷夏塔市并不只是因为它存储数据的能力, 而且还因为它高超搜索 和其他API当我们不使用搜索API图像碳时 开通未来可能性的门 在所有网站相联结果
总而言之, Xata很容易实现
搭建了两个表:网站和图像
网站包括所有网站列表并收集日期,以便我们可以设置过期刷新缓存和URL
对网站更重要的图像存储在图像表内,每列一行,包括原图像和优化图像元数据,网站URL回溯网站表
简单搭建让我们很容易做下列工作:
- 检查结果是否存在
- 然非过期返回结果
- 如果非过期或过期,让UI知道再次擦
- 破解后,单列请求中添加新结果
允许我们可靠存储信息 快速检索 并按需刷新
最后,我们需要一种方法来整理所有这一切并显示成程序
从程序开始,UI可使用多种框架处理,但客户端网页路由设置和服务器端帮助为访问者提供丰富经验的方法
输入主页表网站后,立即将访问者推向扫描页
本页静态页面对客户执行异步操作这使得我们几乎即时推访者到此页面获取即时反馈, 在那里我们可以开始传递初始扫描进度
扫描完成后,我们缓存Xata数据,缓存完成后(授权快速操作后),我们推送结果页到实际结果页并加载缓存服务器并显示页面结果
这种方法使我们完全控制加载经验,网站扫描专用登陆页(SEO帮助开图社会图像)使用缓存使服务器快速生成
关于抓取和异步请求问题,他们都乐于混合Vercel服务器无边功能,这是管理服务器逻辑的可靠灵活方式。
多因子遍及全球碳排放中, 优化图像(和视频)很容易控制个人碳脚印
虽重要,但福利并不止于此 快速加载页帮助为访问者提供更好的经验.
优化应该是网络开发流程中的重要一步,头向前图像显示并视频播放优化文档页面学习更多或获取启动免费账号.
深入了解图像碳项目,你可以查看Github源码https://github.com/colbyfayock/imagecarbon