javascript - 如何在不影响图像质量或尺寸的情况下优化我的 "html"网站速度?

标签 javascript html css performance optimization

我有一个网站由“5 个 html 页面”组成,使用纯(HTML、CSS、JS),没有服务器端编程语言、框架或数据库。

这些是我网站的速度测试: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.zhtml.aba.ae

https://gtmetrix.com/reports/www.zhtml.aba.ae/N9C8Tp0m

我知道如何缩小 (css , js) 但不知道 (images and caching) ,我想知道是否有一种方法可以在不影响 [quality - dimensions] 的情况下减小图像大小,以及如何启用缓存。 此外,如果除了(图像 - 缓存 - 缩小 css 和 js)之外还有更多优化网站速度的技巧,请告诉我它是什么以及如何实现它。

我的网站是响应式的,所以我使用大尺寸的图片

最佳答案

我发现一个对减小图像文件大小非常有用的工具是 TinyPNG . TinyPNG 可以在不改变图像尺寸或降低质量(明显)的情况下将图像的文件大小减少多达 80%。

TinyPNG 简单地用相同的颜色替换彼此接近的相似颜色,这样占用的存储空间更少。

关于javascript - 如何在不影响图像质量或尺寸的情况下优化我的 "html"网站速度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46977942/

相关文章:

javascript - 登录网站后如何获取当前位置?

javascript - js 新闻 api promise 无法获取某些值

javascript - Protractor - 等待多个元素

jquery - 如何平移/缩放 HTML 内容? (即谷歌地图、WordSquared)

html - 媒体查询问题 - 防止覆盖 CSS 规则

jquery - 使用 CSS 调整可调整大小图像的图像描述栏

php - 无法使用目录路径直接调用文件夹内的 php 文件

javascript - 鼠标悬停和鼠标移出时图像闪烁

javascript - React Virtual Dom 中涉及三棵树,还是只有两棵?

javascript - jQuery 只切换 child