如何提高网站图片的加载显示速度

网站管理者肯定希望提高他的网站图片下载速度。这增加了搜索结果的排名; 此外，通过更快地响应他们的行为，网站访问者使用它更愉快。

为了寻找一种快速而直接的解决方案，网站所有者安装了大量插件，这些插件反过来消耗资源并且只会减慢其工作量。我们没有任何针对优化插件的东西，但是他们需要习惯于他们的工作原理。

此外，从未经历过管理的网站所有者通常会对优化产生误解。在他们的理解中，优化是不惜任何代价加速脚本。优化的任务是以最优的资源价格产生最佳的站点速度。因此，不能为所有站点提供通用指令。

对于任何资源所有者或网站管理员来说，快速建立网站是一项紧迫的任务。毕竟，页面加载速度是Web资源成功的最关键因素之一，以及高质量的内容和漂亮的图形设计。

缓慢加载有时会增加丢失用户的可能性。特别是当访客来自移动设备时。加速网站加载的简单建议，即使是没有经验的用户也可以在实践中实施，将有助于最大限度地减少流量丢失的可能性。

1.优化HTML代码和CSS-，JS-文件

如果不考虑进入网站时传输到用户浏览器的代码的“清洁度”，则无法进行下载优化。源代码中的大量字符会显着影响加载速度，因此其简洁性是一个关键的成功因素。

如何最小化代码以加快网站加载速度

删除不必要的字符，标记元素和源代码标记。自动化该过程将有助于在站点的HTML代码的开头和结尾添加一个小插入。

这种缓冲HTML内容的方法非常有用，但它可以在随机存取存储器上创建额外的负载。

将相同类型的CSS文件和JS文件分组。免费的PHP应用程序，如JCH Optimize，Cloudflare或Minify，将被复制到一个单独的目录中并传递所有站点文件，这将有助于组合这些元素。

2.删除额外的HTTP请求

在加载网站时，上传页面元素（javascript，图像，CSS和Flash文件）占用了大部分系统资源。对此类元素的HTTP请求显着减慢了网站的速度。

要避免“额外”请求，您需要减少页面组件的数量。这将导致服务器调用成比例减少，并将加快网站的加载速度。

这可以通过以下几种方式完成：

• 将多个图像合并为一个图形文件（CSS sprite）;
• 在页面样式表中使用内嵌图像（内嵌图片）;
• 一个页面上的多个CSS文件或脚本合并为一个文件;
• 最大限度地减少方案和插件的数量。

3.以正确的顺序排列JavaScript和CSS

建议将CSS文件放在页面代码的顶部，将JavaScript放在底部。在此优化之后，将首先加载静态内容，然后仅加载动态图形。

需要更多资源下载的Flash元素或动画不会“向前拉”并从第一秒开始破坏网站的印象。这将确保顺利下载内容并增加资源的美学吸引力。

4.减少外部脚本的数量

外部脚本是通过外部链接访问的代码（文本）。链接会向许多不同的服务器创建其他请求，这最终会降低网站的速度。为避免这种情况，建议主要使用嵌入在页面源代码结构中的本地脚本。

当然，关注本地脚本会对网站的外观和功能造成某些限制。但由此产生的下载速度优势值得这些“牺牲”。

5.启用Flush

这个PHP函数允许您不要等到用户的服务器从资源加载信息，而是将其输出为部分。当数据传输到浏览器时，打开的窗口不会保持为空，但会平滑地填充网站的可加载元素。对于具有复杂接口和高流量的web资源，这种加速尤其必要。

最好将刷新功能放在页面源代码的开头，紧跟在头部之后。从标题开始，HTML内容将打开得更快，您还可以启用CSS和JavaScript元素的并行加载。

6.缓存页面

缓存将站点页面（flash，图形，JavaScript和CSS）中的一些信息保存到用户的浏览器中。在下一次运行时，这些文件会立即从浏览器下载，从而为站点提供额外的速度。

您可以通过向HTML代码添加过期标头来启用缓存。WordPress站点可以通过安装具有免费或部分免费功能的插件轻松缓存，例如W3 Total Cache，Cache Enabler或Zen Cach。

对于新站点，最好仅在完全准备好启动后使用缓存。如果在开发期间启用该功能，则可能无法在站点上正确显示进一步的更改。

7.使用CDN

内容交付网络 – 分散在全球数据中心的一系列服务器，以提高内容传输给访问者的速度。访问者在地理位置上与CDN服务器越近，来自站点的数据包传输的速度就越快。

CDN的使用对于内容和高负载门户尤其重要，其主要受众与物理服务器相距甚远。此服务最大限度地减少了从海外网站下载的等待时间，从而有助于提高他们在本地搜索结果中的排名。毕竟，内容是从离他所在国家的用户最近的服务器存储器下载的。

8.优化图形和视频

您必须选择正确的图形和视频格式，因为文件格式直接影响向访问者显示信息的速度。

不同网站内容的推荐格式：

• SVG – 用于矢量徽标和简单的界面元素;
• PNG – 用于方案和非矢量标识;
• JPG – 用于照片和图像;
• MPEG4 – 用于视频和动画。

同样对于视频和动画，可以使用相对较新的WEBM格式。在大多数情况下，它提供的视频尺寸更小，质量相同。但是，该表单的浏览器支持有限（例如，macOS / iOS Safari浏览器不支持）。因此，建议使用WEBM文件作为优先视频源，并安装MPEG4作为替代源。如果共享不可接受或不方便，您也可以使用唯一的MPEG4。

另外，我们注意到矢量格式（SVG）允许缩放而不会损失图形质量。

图像优化的阶段

第1步 – 减小图像的大小。

许多流行的CMS，如WordPress或Joomla，都有内置的插件来优化原始图像。但是这种方法会产生额外的负载，并会降低网站的速度。每次页面加载时，浏览器首先访问源代码，然后才动态调整图像大小。

为了避免在加载图像时损失速度，操作系统内置的图形编辑器（如预览（Mac）或Microsoft Paint（Windows））以及具有类似功能的在线服务将有所帮助。与他们合作将需要最少的图形处理技能。

第2步 – 下载前压缩文件。

即使在优化图像尺寸之后，其“重量”通常仍然远非最佳。ImageResize或TinyPNG等便捷免费服务有助于缩小尺寸而不会降低图像质量。这里的大多数流程都是自动化的。用户只需要上传文件并下载已压缩到最佳图像大小。

9.应用Gzip文件压缩

Gzip是一种压缩站点文件以节省通道资源和加速加载的简单方法。使用Gzip，文件被压缩成一个存档，浏览器可以更快地下载，然后解压缩并显示内容。

启用Gzip非常简单 – 您只需要在.htaccess文件中添加几行代码即可。例如，当使用Apache Web服务器时，mod_gzip模块可用于网站管理员，以激活Gzip，在这种情况下，您需要将此类代码添加到.htaccess

完成Gzip文件压缩以减少从浏览器到服务器的请求数。Put，这项技术将文件的初始权重降低到70％，以加快下载速度。

嵌入Gzip压缩的方法

将以下代码段添加到“.htaccess”Web服务器配置文件中。

在Apache服务器上

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file /.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

在Nginx服务器上

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10.改变主机

加速下载的最基本方法是更改​​托管服务提供商。节省资源分配通常会导致服务质量的显着恶化，这会破坏所有加速藤蔓场地的尝试。

如果对内容，代码和插件的操作没有带来结果，那么就该考虑为网站选择一个更体面的“家”了。在具有高可用性和周到技术支持的高质量主机上，互联网资源将获得提高工作速度的强大动力。这将受到感恩的观众的赞赏。

最重要的是……

有必要争取访问该网站不超过2-3秒。如果站点打开2秒甚至3秒并不重要，但如果有更多，那么这是考虑加速站点负载的原因。

您还需要了解页面加载速度有两个参数。

第一个是显示内容的速度（此时页面已经打开并显示给用户，而透明页面指示符仍然显示，直到连接了所有静态文件和异步脚本）。

而且，第二个是页面实际形成的速度，当所有必须连接的都连接起来时。您需要关注第一个参数，即在显示站点布局之前必须经过不超过三秒钟。

最后总结

你不能忽视这样一个数字，如加载网站的速度。从最初的几秒钟开始，他就为游客创造了一个舒适的环境。用户获得所需内容的速度越快，形成资源的正面图像和建立对其的忠诚度的可能性就越高。