解决网站加载图片太慢

这篇具有很好参考价值的文章主要介绍了解决网站加载图片太慢。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.压缩图片

由于网站加载高清无损的照片的是十分耗时的,如果动不动就是几M,甚至10几M的图片,那加载起来可就难受了,所以我们第一个应该想到的是压缩图片来解决图片的大小,推荐两个很好用的压缩图片的网站。链接如下,

https://tinypng.com/:有图片大小限制和每一次上传数量限制为20个

https://www.iloveimg.com/zh-cn/compress-image:无图片大小限制和每一次上传数量限制为30个

2.用nginx部署前端项目,并且在 Nginx 服务器中配置 GZip 压缩

1.如何用nginx部署前端项目教程入下:
https://blog.csdn.net/qq_33036061/article/details/115046354

2.如何在Nginx服务器中配置GZip压缩:
使用 vim 编辑器打开 nginx.conf 配置文件,打开文件后,按 i 键进入编辑模式,在 http 块中输入以下配置信息:

# gzip 可以在 http, server, location 中和配置,这里配置到 http 下是全局配置,
#只要是使用当前 nginx 服务器的站点都会开启 gzip
http {
   gzip on;
   gzip_comp_level 5;
   gzip_min_length 1k;
   gzip_buffers 4 16k;
   gzip_proxied any;
   gzip_vary on;
   gzip_types
   application/javascript
   application/x-javascript
   text/javascript
   text/css
   text/xml
   application/xhtml+xml
   application/xml
   application/atom+xml
   application/rdf+xml
   application/rss+xml
   application/geo+json
   application/json
   application/ld+json
   application/manifest+json
   application/x-web-app-manifest+json
   image/svg+xml
   text/x-cross-domain-policy;
 gzip_static on;  
 gzip_disable "MSIE [1-6]\.";  
}

不知到这些配置都代表什么意思?现在来逐一解释每项配置的意思:

gzip on;:开启 gzip,Default: off
gzip_comp_level 5;:压缩级别: 1-9。5 是推荐的压缩级别,Default: 1
gzip_min_length 1k;:gzip 压缩文件体积的最小值。如果文件已经足够小了,就不需要压缩了,因为即便压缩了,效果也不明显,而且会占用 CPU 资源。Default: 20
gzip_buffers 4 16k;:设置用于压缩响应的 number 和 size 的缓冲区。默认情况下,缓冲区大小等于一个内存页。根据平台的不同,它也可以是4K或8K。
gzip_proxied any;:是否开启对代理资源的压缩。很多时候,nginx 会作为反向代理服务器,实际的静态资源在上有服务器上,只有开启了 gzip_proxied 才会对代理的资源进行压缩。Default: off
gzip_vary on;:每当客户端的 Accept-Encoding-capabilities 头发生变化时,告诉代理缓存 gzip 和常规版本的资源。避免了不支持 gzip 的客户端(这在今天极为罕见)在代理给它们 gzip 版本时显示乱码的问题。如果指令gzip, gzip_static 或 gunzip 处于活动状态, 则启用或禁用插入“ Vary:Accept-Encoding”响应标头字段。Default: off
gzip_types:压缩文件的 MIME 类型。`text/html` 默认就会开启 gzip 压缩,所以不用特别显示配置 `text/html` 的 MIME 类型。Default: text/html
gzip_static on;:服务器开启对静态文件( CSS, JS, HTML, SVG, ICS, and JSON)的压缩。但是,要使此部分与之相关,需要在 gzip_types 设置 MIME 类型,,仅仅设置 gzip_static 为 on 是不会自动压缩静态文件的。
gzip_disable “MSIE [1-6]\.”;:IE6 以下的浏览器禁用 gzip 压缩。

3.验证 GZip 压缩配置是否生效

服务端在接受到来自客户端的请求申请头部信息:Accept-Encoding: gzip, deflate, br 后,会对请求的资源响应内容的实体进行相应的编码处理,并且会在服务端的响应头部信息返回相应响应头部信息:
解决网站加载图片太慢

3.图片懒加载

目的:
懒加载的目的是当页面的图片进入到用户的可视范围之内在加载图片的一种优化方式。可以增加首屏加载的速度,毕竟,用户点开页面的瞬间,呈现给他的只是首屏,我们只要把首屏的资源图片加载处理就可以了,至于下面的图片,当用户下滑当当前位置的时候,在加载出来也是没问题的,对于性能压力也小了,用户体验也没有变差。

图片懒加载实操教程:
https://segmentfault.com/a/1190000024547276

当然你要是真的懒,也可以使用jQuery懒加载插件
http://t.zoukankan.com/fanmiao-p-6002907.html

4.提高公司服务器带宽

看来下提高服务器带宽的价格,每提升公司1Mbps的带宽,每个月就要多交700多块钱,当然你要是财大气粗这个也是完全没问题,毕竟简单省事,要不是没钱谁愿意花心思自己去想办法提升性能呀文章来源地址https://www.toymoban.com/news/detail-441745.html

到了这里,关于解决网站加载图片太慢的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nginx 配置后网站图片加载出来一半或者不出来

    项目进行nginx反向代理后发现图片和js、css等加载很慢,甚至加载不出来。 然后查看nginx的log,发现错误如下: 2023/08/29 17:15:11 [crit] 25439#0: *18 open() \\\"/usr/local/nginx/proxy_temp/5/00/0000000005\\\" failed (13: Permission denied) while reading upstream, client: 172.01.26.369, server: gitlab.abcdefg.com, request: \\\"GET /as

    2024年02月10日
    浏览(48)
  • CloudFlare指定IP 网页加载太慢 加快加载速度

    前段时间开始搭建自己的个人网站, 为了保护小网站免受DDoS之灾,并且隐藏网站的真实IP地址,因此决定使用CloudFlare CDN。(如果你的服务器在国内或者是香港等地区,而访问用户也是在国内的话,使用了CloudFlare CDN后,实际起到的是减速作用;因为联通和电信走的是美西的

    2024年02月21日
    浏览(63)
  • 前端图片压缩解决办法

    在某一h5的项目,要求上传的图片格式为 base64 , 问题是用户上传的图片基本都在MB 级别,转base64 以后,图片的体积会增大30%以上,随着图片的体积增加,转换的base64 格式文件体积越大,如果此时前端不对用户上传的图片体积进行压缩,可能会导致服务器压力过大,从而崩溃

    2024年02月14日
    浏览(42)
  • 在 PostgreSQL 中,解决图片二进制数据,由于bytea_output参数问题导致显示不正常的问题。

    在 PostgreSQL 中, bytea_output 参数控制在查询结果中 bytea 类型的显示格式。默认情况下, bytea_output 的值为 hex ,这意味着在查询结果中, bytea 类型的数据以十六进制格式显示。但是,如果你的应用程序期望以二进制格式获取图像数据,则将 bytea_output 设置为 escape 可能更适合。

    2024年03月22日
    浏览(42)
  • vscode加载图片失败解决办法

    运行之后结果图片显示不出来 这个时候修改两个方面 1.在img标签尾部加 “/” 2.图片路径用绝对路径 3.如果还是失败,就把图片格式改成png,我就是所以图片格式改了,名字可改可不改 温馨提示:这个时候还是失败的话,你用启动调试运行,就出现了,不要用插件

    2024年02月08日
    浏览(35)
  • 手机浏览器看视频加载太慢怎么办,这5招用了提速快

    在下班后或者午休前的闲暇时间里,很多人喜欢用手机浏览器看视频来放松自己。最近,看到一些朋友说使用手机浏览器看视频加载太慢,没有在电脑看视频速度快,遇到这种情况应该怎么办呢?今天就为大家说道说道,教你5招解决看视频慢的问题。   1、本地网络速度太慢

    2024年02月12日
    浏览(59)
  • Unity队列加载图片,解决大量同时加载资源卡顿问题与思路

    1、思路:加载图片的请求都加到队列中,然后一个加载完一个再去加载下一个,直到加载完。 2、问题:         问题是相对也存在的。当加载的数据还在队列中,但是已经跳转到其它的场景,则会出现报错的问题。         每次跳转场景的时候,需要把队列中的数据情况

    2024年02月16日
    浏览(53)
  • 【VUE】解决图片视频加载缓慢/首屏加载白屏的问题

      在 Vue3 项目中,有时候会出现图片视频加载缓慢、首屏加载白屏的问题 通常是由以下原因导致的: 图片或视频格式不当:如果图片或视频格式选择不当,比如选择了无损压缩格式,可能会导致文件大小过大,从而影响加载速度。 页面中同时加载了大量的图片和视频,导致

    2024年02月16日
    浏览(37)
  • Vue页面 - 大型图片加载慢解决途径

    解决图片加载慢的两种优化方式 两个内外尺寸一致的盒子,外层放置压缩图,内层放置高清图,高清图加载完成后铺盖压缩图即可 在不同阶段使用不同图片资源

    2024年02月16日
    浏览(34)
  • js,jquery解决 图片加载-滚动底部 问题

    问题描述 :让图片加载完成后,再执行滚动函数,避免出现图片加载一半的时候,滚动下来底部只出现半张图片。 这里记录4种测试成功方式: (适用于不容易找到图片位置的情况,否则直接onload函数即可)

    2024年01月18日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包