使用简单的步骤,提高网站图片的加载速度

网站所有者最终可能希望提高下载速度。这增加了搜索结果的排名;此外,网站访问者可以更快地响应其操作,从而更轻松地与之合作。

为了寻求一种快速,简单的解决方案,站点所有者安装了大量的插件,这些插件反过来会消耗资源并且只会减慢其工作速度。我们没有针对优化插件的任何东西,但需要经常使用它们并了解其工作原理。

此外,从未经历过管理的站点所有者经常会误解优化。在他们的理解中,优化是不惜一切代价来加速脚本的过程。优化的任务是以最佳的资源价格产生最佳的站点速度。因此,并非所有站点都有通用说明。

对于任何资源所有者或网站管理员而言,使网站快速运行都是一项紧迫的任务。毕竟,页面加载速度以及高质量的内容和精美的图形设计是确保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.启用冲洗

这种具有PHP功能的功能使您不必等到用户的服务器从资源中加载信息,而是将其分部分输出。当数据传输到浏览器时,打开的窗口不会保持空白,而是会被站点的可加载元素平滑填充。对于具有复杂接口和高流量的Web资源,这种加速尤其必要。

最好将flush函数放在页面源代码的开头,紧接在标题之后。从标题开始,HTML内容将打开得更快,并且您还可以启用CSS和JavaScript元素的并行加载。

6.缓存页面

缓存将一些信息从站点页面(闪存,图形,JavaScript和CSS)保存到用户的浏览器。下次运行时,这些文件会立即从浏览器中下载,从而使站点速度更快。

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

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

7.使用CDN

内容交付网络–分布在世界各地数据中心的服务器链,可提高内容传输给访问者的速度。访问者在地理位置上离CDN服务器越近,来自站点的数据包传输得越快。

CDN的使用对于内容和高负载门户尤为重要,因为门户和高负载门户的主要受众是物理服务器。这项服务可以最大程度地减少从海外站点下载的等待时间,从而有助于提高其在本地搜索结果中的排名。毕竟,内容是从其国家中距离用户最近的服务器存储中下载的。

8.优化图形和视频

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

不同网页内容的推荐格式:

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

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

另外,我们注意到矢量格式(SVG)允许缩放而不会降低图形质量。

图像优化阶段

步骤1 –缩小图像尺寸。

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

为避免加载图像时速度降低,操作系统内置的图形编辑器(如Preview(Mac)或Microsoft Paint(Windows))以及具有类似功能的联机服务将有所帮助。与他们一起工作将需要使用图形的最低技能。

步骤2 –下载前先压缩文件。

即使在优化图像尺寸之后,其“权重”通常仍远非最佳。诸如ImageResize或TinyPNG之类的便捷,免费服务有助于在不损失图像质量的情况下减小尺寸。这里的大多数过程都是自动化的。用户只需要上传文件并下载已经压缩到最佳图像尺寸的文件。

9.应用Gzip文件压缩

Gzip是一种压缩站点文件以节省频道资源并加快加载速度的简单方法。使用Gzip,文件被压缩到一个档案中,浏览器可以更快地下载该档案,然后解压缩并显示内容。

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

进行Gzip文件压缩是为了减少浏览器对服务器的请求数量。简而言之,该技术可将文件的初始权重降低到70%,以加快下载速度。

嵌入Gzip压缩的方式

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

在Apache服务器上

1 # BEGIN GZIP COMPRESSION
2 <IfModule mod_gzip.c>
3 mod_gzip_on Yes
4 mod_gzip_dechunk Yes
5 mod_gzip_item_include file /.(html?|txt|css|js|php|pl)$
6 mod_gzip_item_include handler ^cgi-script$
7 mod_gzip_item_include mime ^text/.*
8 mod_gzip_item_include mime ^application/x-javascript.*
9 mod_gzip_item_exclude mime ^image/.*
10 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
11 </IfModule>
12 END GZIP COMPRESSION

在Nginx服务器上

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

加快下载速度的最基本方法是更改​​托管服务提供商。节省资源分配通常会导致服务质量显着下降,从而破坏了加快葡萄藤种植速度的所有尝试。

如果对内容,代码和插件的操作无法带来结果,那么该考虑为该站点选择一个更体面的“家”了。在具有高可用性和周到技术支持的高质量主机上,Internet资源将获得强大的动力来提高工作速度。感激不尽的观众将不胜感激。

最重要的是

必须努力访问该网站的时间不超过2-3秒。站点打开2秒钟甚至3秒钟都没有关系,但是如果还有更多,那么这就是考虑加速站点负载的原因。

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

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

此外,第二个是页面的实际形成速度,当所有必须连接的内容都已连接时。您需要关注第一个参数,即显示网站布局之前,不得超过三秒钟。

结论

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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259651.html

(0)
上一篇 2022年5月22日
下一篇 2022年5月22日

相关推荐

发表回复

登录后才能评论