fbpx
72 / 100

快的网页VS慢的网页

大部分,或应该99%的人都会很喜欢不用等待loading的网站。最好就是按了0.000001秒后就能马上load完的那种的网页。可是对于大部分的网页设计新手来说,感觉上这些东西都好像很复杂,或觉得必须要付费了才可以用到的东西。其实要提升Wordpress 网页的速度也有简单和免费的方法的。不过,不要期待这些简单和免费的方法会有和付费的方法一样的效果。因为免费的都是不会给你用完他的功能的。

看到这里是不是觉得如果没有使用付费的模式的话是不是会让你的ranking掉落很多很多呢?其实也不完全是的,只要的你的网页的loading speed是维持在3秒内就没有太大的问题了的。而且通常只有空的网页才可以达到0.4秒的成绩。

强调多一次,如果要ranking 排在第一,请放多点心思在你的内容

如何检查你的网页Loading Speed呢

只要上网google website speed check,你就能看到很多的选择了的。

我通常都是用GTmetrix来做4~5次的数据参考。因为有时测出来的数据会有很大的变动的。比如,我的网页本来是2.8秒的,可是因为某些原因导致到我的网页的loading速度变到7秒多。所以如果只测1~2次的话,是很不准确的。

测试前先用Excel做出1个表格,这样你就能做出一个对比了。以下的一切测试都是使用GTmetrixExabytes的C Panel来做讲解的。

GTmetrix

要注册的理由是因为只有注册了后你才可以做地区选择。

一直点击红色格子里面的地区直到出现Hong Kong。选择Hong Kong的原因是因为那是离我们马来西亚最近的选择了。如果没有注册的就换不到地区的设定了

输入你的网站url在Analyze Performance,确定地区是选Hong Kong。然后点击analyze。Analyze好了后,你会看到你的网站的Loading时间了

第一次的Analysis了的目的其实只要让你看看还没做Optimize之前和之后的差别而已。

registration gtmetrix for wordpress site speed test

3招简单的方法改善你的Loading Speed

第1招 - Gzip你的Website

登入CPanel,(For exabytes用户)找Optimize Website,如果发现不一样界面的可以尝试找optimize这个字眼。点击进去,然后选择Compress All Content。然后Update Settings。弄好后就可以登出你的Cpanel了。

Compress你的网站其实可以让整个读取过程变得更顺畅,从而减少文件传输和呈现的时间。通过压缩网站后,你的网站的 Size将会变得更小。

cpanel compress content

做了Compression了以后,同样的你也可以google search Website compress check来检查你的网站。或你也可以到以下这两个网站来做一个检查你的网站是否有Compress到。

第2招 更换Elementor的Light weight Theme

和这个世界的跑车一样,除了增加马力,还要减轻车身的重量。网站也是一样,除了可以使用好的Server(当然价钱也比较贵,就好像2000cc的车和1000cc的车一样的道理),你们可以选择更换你们的theme。使用Light weight Theme 可以减轻Website的Loading Time。

对于我们的教程里,我们都是使用Astra Theme来做教学的。除了可以让你直接Import Pre-designed的Theme templates之外的原因,其次Astra的theme也是Optimized好了给Elementor使用的。

除了Astra的Theme你们也可以使用以下 Atheme介绍的 10+ Best Elementor WordPress Themes and Template 2020

  • GeneratePress
  • Airi
  • Zakra
  • Genesis Framework
  • Page Builder Framework
  • Hestia
  • Neve
  • OceanWP
  • Elementor Hello Theme

第2招 WordPress的图片File Size​和格式

一般人都是直接上载图片去他们的网页里。这样做是会简单和快速,可是却也会拖慢网站Loading的时间和速度。所以每次要上图片前,你们可以先检查图片的File Size和Pixel size,如果Pixel size太大了,可以做了resize或做一些Optimize了才上载去你们的网站;

如果没有AI的话,你可以通过Windows的Paint来做图片的Pixel Resize。当你Resize了图片的Pixel变小后,自然你的图片File Size也减少了。

如果你没有Paint或不想用Paint,你也可以使用 Resize imagePic Resize

例子1:错误的图片Pixel Size

一些人觉得图片要更加高清就要使用4000×4000以上的图片。可是这类型的图片往往都是非常的大,都是要几个MB的。而且上载上去到你的网站,也是白占位而已。因为当你把图片resize到1920×1920时,肉眼也很难分辨出它和4000×4000的差别在那里。不信的话,你可以试试看。

例子2:错误的图片格式

图片拥有很多的格式,比如jpeg和PNG格式。不同的格式拥有不同的File Size和作用。

如果需要用到透明底的图片,通常我们都是用PNG的格式的。但如果不需要用透明底的图片我们都是会用JPEG的格式的。因为大部分的时候,JPEG的格式会小过PNG的。(但我也不排除有时PNG格式会小过JPEG的。)

第3招 Speed Up Elementor Website

如果你在Google寻找 speed up Elementor website的话,你可以看到Elementor的官方网站也有这样的贴子。

就是告诉你可以通过Disable掉Elementor的一些Functions来减轻loading。你需要下载一个叫Code Snippets的 Plugin。 去Plugin -> Add New -> 输入Code Snippets。通过Code Snippets把以下的Code加入进去你的网站才可以把这些Functions Disable掉。

通过Code Snippets
你可以就可以把php Coding抄进去

**1个Function用 1个Snippets,不要全部都挤在1个Code Snippets里面。弄好了后不要激活先,等你做完了全部东西才激活。(最好是网页做好了才开始激活。)

Disable Elementor's Icon

//Stop Elementor's Icon
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}

Disable Google Font Icon

//Stop Elementor's Google font
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Disable Elementor's Font Awesome

//Stop Elementor Font Awesome
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

注明 :

Disable Font Awesome

红色格子里面的Icons都是使用Font awesome的。所以你Disable的 Font awesome是Disable红色格子里面的那些小Icon。

Disable Icon

Disable Icon是Disable 蓝色格子里面的Section, column的那些+, x, 6个点的Icon来。

Font Awesome 的替代品

对于一些有用到Font awesome(icon)的用户们。你们可以去Flaticon下载SVG格式的图片或PNG格式的图片。2个都可以用的。不过如果要方便使用Font awesome的话,可以使用SVG格式的图片。

若要使用SVG格式的图片,首先你要Enable Upload SVG。跟着图片的方法就可以了。

先拉一个Icon出来,点击那个星星然后你会看到icon library和Upload SVG。如果是第一次点击那个Upload SVG,它会pop up一个Enable Upload SVG的popup。点击Enable就可以upload SVG了。

若要使用PNG的用户就直接使用Image Box或Image就可以了。

Delay Third Party Scripts

使用Flying Scripts来延迟Facebook Pixels, Live chat等这些第三方的plugin。如果有安装Facebook Pixels和FB Messenger Live Chat,可以Copy这两行Paste进去 Flying Scripts里,然后Save。

delay facebook pixel messenger scripts
Messenger Live Chat
customerchat.js
Facebook Pixels
fbevents.js

Leave a Comment

Your email address will not be published.