6个绝招,让你的网站加载速度提高3倍!

首先我们打开一个网页看到的都只是前端,所以我们看到一个页面背后的支持就是HTML代码,其中就包含了各种网页标签,其中包括网站优化中的TKD,载入的渲染资源:java、css,已经页面内容:图片、音频、视频等。

一、代码的足够简洁

减少代码冗余,保持简洁的代码风格,这是作为一个网页程序员的必修,能同样实现一个效果的能用css就尽量不用js,能用两行代码解决问题的就别写三行,这是最基础的一点。

二、减少资源载入

这里子凡所说的资源主要是指js、css文件,因为我知道现在很多的前端开发设计人员喜欢用各种开源的特效或者别人做好的效果,其中包括为了给网站添加几个图标就引入一个开源的图标字体库,为了某个特效又在引入几个js和css文件,这无形之中就为网站加重了“份量”。

三、图片使用懒加载,视频或音频禁止自动播放

还记得子凡曾在泪雪博客写过关于“图片懒加载是否会影响网站SEO优化”的文章,其中就说到过如何合理的使用图片懒加载技术提升用户体验而不影响网站优化,因为懒加载是为了防止页面一被打开就立即载入图片,这样就会占用网络带宽,从而影响网站的打开速度以及网站首屏的请求,所以非正文图片都是可以做懒加载的。

图片是每个网站基本都少不了的东西,但是对于做视频、音频的站点来说,如果打开页面就自动播放,占用的网站带宽资源都更多了,所以这也是一个网站打开速度优化的一个小知识。

四、使用CDN加速静态资源

关于使用CDN加速是否影响网站优化的文章子凡也曾有过讨论,子凡对于网站整体做CDN加速还是有些不太认同,但是对于将网站静态资源做CDN加速镜像或者缓存优化却是非常认同的,例如将网站的js、css、图片等文件做CDN加速是更有利于整个网站的加载和打开速度的。

五、提升页面渲染速度

将CSS样式写在头部样式表中,减少由CSS文件网络请求造成的渲染阻塞。

将Java放到文档末尾,或使用async方式加载,避免JS执行阻塞渲染。

对非文字元素(如图片,视频)指定宽高,避免浏览器重排重绘。

六、服务器本身的速度优化

启用服务器Gzip压缩功能;

开启数据库查询及页面缓存功能(如果是直接生成静态页面的网站可忽略);

升级或者保证服务器足够的网络带宽;

开启网站缓存,充分利用本地缓存。

同样随着网络安全的重视程度,如果你的网站已经安装SSL证书启用了HTTPS协议,那么你可以开启HTTPS/2或者SPDY这个功能,可以在某些程度上加速网站的打开。

本文来自企鹅号 - BestSDK媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏疯狂的小程序

无痛的微信小程序开发体验

在小程序之初便开发应用了,现在小程序的开发也越来越成熟了,完善了很多的API、组件、架构等,社区也由原来的零星点点到现在的不大不小,但也算是有了,期间也诞生了很...

3925
来自专栏娱乐心理测试

微信小程序如何获取地理位置和进行地图导航

4415
来自专栏web前端教室

简单粗暴,以小见大 -- 实现一个按钮的前端组件

按钮,一个button,一个div,一个a标签,都可以做成按钮。现在要把它做成一个前端组件,那前端组件是什么? 定义很多,我随便网上查一个,“指一些设计为通用性...

2247
来自专栏一场梦

全平台通用评论神器一键自动填写昵称、邮箱和网址

1273
来自专栏猿天地

hbuilder APP 定位提示苹果审核不通过

APP已经提交给苹果进行审核了,今天看看审核结果,居然挂了,给了几点问题,其中有一点就是关于定位的问题: Guideline 5.1.5 - Legal - P...

38510
来自专栏腾讯移动品质中心TMQ的专栏

如何从海量用户中轻松定位H5视频播放器问题?

一、方案背景介绍 随着互联网技术的发展,用户使用QQ浏览器进行上网观看视频越来越多,最近统计目前使用QQ浏览器观看视频已经过亿。不同的用户由于不同的场景下播放...

2928
来自专栏企鹅号快讯

来,聊一聊性能优化

不管是应付前端面试还是改进产品体验,性能优化都是躲不开的话题。这里我们就简单聊一聊性能优化。传输快 vs 体验快 优化的目的是让用户有“快”的感受,那如何让用户...

2268
来自专栏DeveWork

Customizer Library:主题“自定义”功能的WordPress类库

这里说的WordPress主题中的“自定义”功能实就是指的是“外观”-“自定义”那里。不过一些第三方主题可能没有这个功能,如果你想在这个“自定义”上想扩展多点,...

2027
来自专栏FreeBuf

King Phisher:一款专业的钓鱼活动工具包

今天给大家介绍的是一款名叫King Phisher的网络钓鱼测试工具,它可以通过模拟现实世界中的钓鱼攻击来提升普通用户的网络安全意识。King Phisher的...

4124
来自专栏小白课代表

想不到吧?Adobe 2019 存在重大bug!

因为最近发的关于Adobe 2019的内容实在太多了,已经有小伙伴心里猜测:是不是要改名叫“Adobe课代表”,大家放心,每次更新都是希望所有人能看到,尤其是已...

2412

扫码关注云+社区