基于wordpress+astra+elementor搭建了一些外贸网站。在搭建过程中不断的优化得出了一些心得分享出来给大家,
目前我主要采用的是SG的服务器,服务器默认在新加坡。网速嘛国内访问其实就马马虎虎,海外测速度的话 还行吧!!加上我套了CF所以速度就整个来说 凑合。不是特别快也还行。,但是在网站的运行过程中时钟感觉加载速度慢,虽然加了一些缓存插件,但是始终感觉不好使。 所以 抽时间进行了一些优化,得出了一些经验。
1、避免重复,不管是颜色还是图片还是模块,能反复用的不要去新建。
2、精简框架,界面不要有太多尺寸不一的框架结构。
3、少用图片 多用颜色,图片势必会降低速度,用颜色来填充背景能有效降低网页加载量。
4、注意字体
以我目前主要操作的一个外贸站点为例,复杂的单页面CSS文件大概 18KB左右, 结构简单的大概在3-5KB。 要是乍一看这个KB级别的应该问题不大。但是对于我们这种服务器带宽不够,而且主机在海外的机器来说,每1KB都是我们需要优化的,
下面我一个个的说。
1、避免重复,
这个问题主要我刚开始建站的时候,为了让页面更好看,而且经验也不是很足。十多个子页面我硬是做出来了十多个宽度大小不一的各种结构,但是其实很多结构都差不多,颜色也是差不多的。我反复的新建导致做了很多重复工作,导致这十多个子页面的CSS文件 每个都很大。优势嘛当然是 页面确实好看了。缺点嘛当然是页面加载速度变慢了。
解决办法就是:用了一种宽度 一种色系的框架, 直接在elementor重直接新建模板页面,直接把框架 颜色等直接默认。然后 每个页面只有内容不同。但是其他基本结构一样。这种情况可以是各种比如 单页面,文章分类 文章详情等。都可以这么来。
优化之后就是CSS文件现在降到了不足1KB, 页面整体经过优化并没有和以前有太大差距。但是网站加载速度变快了。效果非常好!
2、精简框架!
还是因为经验不足。我在后面复盘检查的时候发现。我居然为很多模块。比如产品详情 产品列表 文章详情 我文章列表等各种页面设置了大小不一的宽度和框。有的是3列 有的是2列。有的宽度1200 有的1300。
想想都不应该啊。。当年是咋那么有空去这么折腾的。
其实大家可以在elementor的站点设置里面 把全局的颜色 宽度字体等 都设置下。然后 到子页面之后能不新建就不新建。尽量默认。 通过这个设置,我直接把其他页面里面很多我自己设置的框架删掉选择默认的,网站也全部基本上变成了2列,其他什么3列 1列 全部没有了。通过一顿操作我基本上让整个网站CSS文件全部降低了不少。这样的优化不仅是降低了单页面。而是整个网站都得到了提升。
3、少用图片 多用颜色。
在很多页面比如页头或者一些分栏等地方我都喜欢用图片做背景。后面我发现 不仅是CSS文件变大了。而且是整个页面都变大了。整个网站的 加载速度都受到了影响。 所以 灵活使用颜色功能非常重要。能用颜色的绝对不用图片。整个不仅可以降低CSS大小。连整个页面的大小都能有效降低。
4、注意字体。
elementor的站点首选项里面 有很多默认功能。多学习下这里。把尽量多的内容设置默认之后。在下面子页面里面,尽量的不要再去新建和设置一些颜色 字体 框架宽度等了。每个页面折腾一下 太费劲 出错率高而且重复工作增加工作量。 字体方面还是尽量使用系统默认字体,虽然会看起来不是特别好看。但是这个确实会加快速度, 特别是国内没办法引用谷歌字体的情况下。 使用电脑自带的字体。尽量少用一些稀奇古怪的字体 能很大程度上加快整个网站的加载速度。
最后总结几点
1、页面要精简,不要太花里胡哨,除非你确实高带宽加载速度嗷嗷叫,
2、少用图片多用颜色, 用图片也最好用WEBP等体积更小的图片,多用颜色 单色或者渐变都可以。
3、字体和第三方的加载考虑下速度问题,很多情况下我们不仅引用谷歌字体,还会引用很多第三方的字库 图标库等,引用太多 加载也会变慢,
4、回归本质, 建站的初衷是什么。我建的是外贸独立站,要的就是速度快,根本不是花里胡哨的东西,所以我现在要的就是整个网站加载速度变快,太多太美的东西不适合我们!