Web项目图片视频加载缓慢/首屏加载白屏

Web项目图片视频加载缓慢/首屏加载白屏

文章目录

一、原因

通常是由以下原因导致的:

  1. 图片或视频格式不当 :如果图片或视频格式选择不当,比如选择了无损压缩格式,可能会导致文件大小过大,从而影响加载速度。
  2. 页面中同时加载了大量的图片和视频,导致请求次数过多,网络传输速度受限,从而影响页面加载速度。
  3. 页面中的图片和视频没有进行优化处理,比如没有进行压缩、没有使用 CDN 加速等。
  4. 页面的 HTML、CSS、JavaScript 代码没有进行优化,比如没有使用 webpack 进行打包、没有使用代码分割技术等,导致页面加载时间过长。
  5. 页面中的图片和视频没有使用懒加载技术,导致页面一次性加载过多的资源,从而导致页面加载速度变慢。
  6. 网络状况不佳,比如网络延迟、带宽受限等,都可能导致图片和视频加载缓慢。
  7. 服务器响应时间过长:如果服务器响应时间过长,会导致页面请求资源的时间变慢,从而影响页面加载速度。
  8. 使用了不稳定的第三方库:如果使用了不稳定的第三方库或者组件,可能会导致页面加载速度变慢。
  9. 浏览器缓存策略不当:如果浏览器缓存策略设置不当,可能会导致浏览器重复请求资源,从而影响页面加载速度。
  10. 网络安全策略较为严格:如果网络安全策略较为严格,可能会导致浏览器请求资源时遇到一些限制,从而影响页面加载速度。

二、 解决方案

图片和视频加载缓慢、导致首屏加载白屏的问题,通常可以从以下几个方面入手来解决:

复制代码
1. 图片和视频的优化
2. 懒加载
3. 骨架屏
4. 代码优化

2.1、 图片和视频的优化

可以通过图片压缩、视频压缩等技术来减小文件大小,CDN 加速来加快资源加载速度,可以从以下几个方法入手:

复制代码
1. 压缩图片或视频
2. 选择合适的图片或视频格式
3. 使用图片或视频 CDN 加速
4. 使用懒加载技术
2.1.1、压缩图片或视频

可以使用图片或视频压缩工具,将文件大小压缩至合适的大小。对于图片,可以使用在线图片压缩工具或者 Photoshop 等图片编辑软件进行压缩;对于视频,可以使用视频压缩软件,如 HandBrake 等进行压缩。

2.1.2、 选择合适的图片或视频格式

选择合适的图片或视频格式也可以减小文件大小。例如,对于图片,可以选择 JPEG 或者 WebP 格式,对于视频,可以选择 H.264 或者 H.265 格式。

2.1.3、 使用图片或视频 CDN 加速

可以使用图片或视频 CDN 加速,将图片或视频资源分布在全球各地的 CDN 节点上,从而加快资源的传输速度,提高页面加载速度。

2.1.4、Nginx中开启gzip
复制代码
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;
    client_max_body_size    200m;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied any;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.

    include /etc/nginx/conf.d/*.conf;
}

其中这一段为开启gzip,开启后对js,json,xml有一定的加速

复制代码
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied any;

补充说明:

  1. gzip on;
    • 启用Gzip压缩功能。开启此功能后,Nginx会压缩响应数据以减少传输体积。
  2. gzip_min_length 1k;
    • 指定Gzip压缩的最小响应体积。
    • 这里设置为1k(1千字节),意味着只有当响应体积大于1KB时才会进行压缩,避免对小文件进行不必要的压缩。
  3. gzip_buffers 4 16k;
    • 设置用于存储压缩结果的缓冲区数量和大小。
    • 4 16k表示Nginx会使用4个16KB的缓冲区来存储Gzip的压缩数据。
  4. gzip_http_version 1.1;
    • 指定Gzip压缩的最低HTTP协议版本。
    • 这里设置为1.1,意味着只有在客户端使用HTTP/1.1或更新版本时才会启用Gzip压缩。
  5. gzip_comp_level 2;
    • 设置Gzip的压缩级别,范围是1到9。
    • 2表示较低的压缩级别,压缩速度快,占用较少的CPU资源。较高的压缩级别(如9)会产生更小的文件,但会消耗更多的CPU资源。
  6. gzip_types
    • 指定哪些MIME类型的响应会进行压缩。
    • 这里列出了多种常见的类型,包括:text/plain(纯文本)、text/css(CSS样式表)、application/json(JSON数据)、application/javascript(JavaScript文件)、text/xmlapplication/xml(XML数据)等。
  7. gzip_proxied any;
    • 指定在何种情况下对通过代理的请求启用Gzip压缩。
    • any表示不论请求头中包含哪些信息,只要是代理请求都进行压缩。

三、压缩工具推荐

1、TinyPNG(亲测好用):

TinyPNG 是一个免费的在线图片压缩工具,可以将 PNG 和 JPEG 格式的图片压缩至合适的大小,而且不会影响图片质量。

2、Compressor.iocompressor.io

Compressor.io 是一个免费的在线图片压缩工具,可以压缩 JPEG、PNG、SVG 和 GIF 等格式的图片。它可以将图片压缩至较小的大小,而且不会影响图片质量。

3、Kraken(kraken.io

Kraken 是一个在线图片优化和压缩服务,可以将 JPEG、PNG 和 GIF 等格式的图片压缩至最小的文件大小。Kraken 还提供了 API 接口,可以方便地集成到项目中。

4、ImageOptim(imageoptim.com

ImageOptim 是一个免费的图片优化工具,它可以自动压缩 JPEG、PNG 和 GIF 等格式的图片,并且可以自动删除图片中的元数据和不必要的信息,从而减小文件大小。

相关推荐
鳄鱼皮坡1 小时前
仿muduo库One Thread One Loop式主从Reactor模型实现高并发服务器
运维·服务器
菜包eo1 小时前
二维码驱动的独立站视频集成方案
网络·python·音视频
即将头秃的程序媛1 小时前
centos 7.9安装tomcat,并实现开机自启
linux·运维·centos
fangeqin1 小时前
ubuntu源码安装python3.13遇到Could not build the ssl module!解决方法
linux·python·ubuntu·openssl
小Mie不吃饭2 小时前
FastAPI 小白教程:从入门级到实战(源码教程)
运维·服务器
爱奥尼欧3 小时前
【Linux 系统】基础IO——Linux中对文件的理解
linux·服务器·microsoft
戒不掉的伤怀3 小时前
【Navicat 连接MySQL时出现错误1251:客户端不支持服务器请求的身份验证协议;请考虑升级MySQL客户端】
服务器·数据库·mysql
超喜欢下雨天3 小时前
服务器安装 ros2时遇到底层库依赖冲突的问题
linux·运维·服务器·ros2
搬码临时工3 小时前
小企业如何搭建本地私有云服务器,并设置内部网络地址提供互联网访问
运维·服务器
阿蒙Amon3 小时前
【Python小工具】使用 OpenCV 获取视频时长的详细指南
python·opencv·音视频