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

文章目录

Web项目图片视频加载缓慢/首屏加载白屏
- 一、原因
- [二、解决方案](#二、解决方案)
- - [2.1、图片和视频的优化](#2.1、图片和视频的优化)
  - - 2.1.1、压缩图片或视频
    - [2.1.2、选择合适的图片或视频格式](#2.1.2、选择合适的图片或视频格式)
    - [2.1.3、使用图片或视频 CDN 加速](#2.1.3、使用图片或视频 CDN 加速)
    - 2.1.4、Nginx中开启gzip
- 三、压缩工具推荐

一、原因

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

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

二、解决方案

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

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;

补充说明：

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

三、压缩工具推荐

1、TinyPNG（亲测好用）：

TinyPNG（tinypng.com）

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

2、Compressor.io（compressor.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 等格式的图片，并且可以自动删除图片中的元数据和不必要的信息，从而减小文件大小。

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