Any tips to minimize page load time?

Soweic

After all the putting together thingies, now my site is completed. Anyway, the load time is by far unacceptable 20s: soweic.com

I'd be really appreciated if you could see how I can improve this site further and I think it's a useful thread for others who are experiencing the same problem.

Albert

If you want to check some tips for page loading, you can have a look on http://forum.muffingroup.com/betheme/discussion/165/improved-pageload but don`t think that you will go down with many seconds in your case because you have used lot`s of stuff and also it looks like your server does not work fast because we tried to open your website from few different localizations and it takes about 30 seconds to open your website what means the problem is definitely related with hosting.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Soweic

Thank you for reply. Shouldn't it be fine with the stuff I am displaying now if the hosting is faster? The demo has more stuff but it loads faster

Albert

Because on demo we uses W3 Total Cache plugin, just like all other authors and also our hosting works much faster then your one. The only thing we used is this popular cache plugin.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Soweic

OK. I just got W3 Total Cache plugin installed and enabled Cloudflare extension following this guide: https://www.besthostnews.com/guide-to-w3-total-cache-settings-with-cloudflare/

And I can see the load time is now under 10s! Can you help test if it's really been improved?

Once all modification has been done, I will consider using static css too. What theme functions will I lose then?

Soweic

Update: I tried using static css following the instruction by copy all from style.php and style_colors.php and replace the whole contents in style-static.css in betheme. The problem is all my color setting lost as it turns to default blue!

Do I miss anything? Shouldn't I replace the whole style-static.css because I can see it already has its existing content?

Anyway, I can see that my http://soweic.com/wp-content/themes/betheme/style-colors.php

is blue; it doesn't change to the colors I set in 'theme skin > Yellow' with my site right now: soweic.com

Update 2: It seems like the colors will only get updated in style-colors.php if we manually select the color one by one from 'Header, Content, Footer, etc.' manually!

It'd be great if Be can pass all the parameters to style-static.css automatically, so we can just enable 'Static CSS' to get this thing done.

Soweic

Update 3: Now my Page load time: 4.74s

by http://gtmetrix.com/

but I don't know why my grades are still low:

Page Speed Grade:
(62%)

79%

C

YSlow Grade:
(76%)

78%

Soweic

Update 4: I got a lot of this, what do you recommend to make it right?

Does all these images got from media setting? I just used the defaults which are: 150px, 300px, 1020px.

1. 

 Serve scaled images

• The following images are resized in HTML or CSS. Serving scaled images could save 475.0KiB (49% reduction).
• http://soweic.com/wp-content/uploads/2011/08/soweic-logo-lightbox-576x450.png is resized in HTML or CSS from 576x450 to 351x450. Serving a scaled image could save 44.4KiB (40% reduction).
• http://soweic.com/wp-content/uploads/2014/05/sopheap.jpg is resized in HTML or CSS from 960x960 to 104x104. Serving a scaled image could save 39.4KiB (98% reduction).
• http://soweic.com/wp-content/uploads/2014/05/sonkin-medium.jpg is resized in HTML or CSS from 365x365 to 104x104. Serving a scaled image could save 38.4KiB (91% reduction).
• http://soweic.com/wp-content/uploads/2014/08/anon.jpg is resized in HTML or CSS from 366x366 to 104x104. Serving a scaled image could save 34.8KiB (91% reduction).
• etc...

2.

Combine images into CSS sprites

Albert

@Soweic As it is written above, you should scale your images to smaller. For that you can use https://tinypng.com/ or if you use other images formats, then you need to look for other tool.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Soweic

I c. But those images are automatically sized by the Wordpress which you can't do anything about it?

Albert

@Soweic So you should contact with wordpress support in this case and tell them about that because we are not able to do anything with that. This is how wordpress works and there is nothing what we can do with that thing.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Soweic

Yes, that what I wanted to mean. So this cannot be optimized further; and I am at the end of the line

omallot

Hello,

My website (test optmised with GTmetrix ticks), but I have a problem with "Serve scaled images"

Do you have a function to serve the best size image in shorcodes (recents posts for example)?

I think it could be great to solve that

Regards

Albert

Hi @omallot,

no, we do not have such possibility because otherwise, the images would look terrible on many computers like mac books with retina screens for example what is in our opinion more important.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

omallot

Sorry, but I don't understand why you don't have a function to choose the best picture size...

Albert

@omallot It is very simple. We have too many shortcodes/items with different sizes included and loading much more media than now, would kill most poor hosting services. Also, the devices like iPads or iPhones with retina screens requires twice large sizes and this would be another delay on load (2 different images need to be loaded for such devices). So the images you are talking about will speed the site a little but other solutions would delay it much more and that's why it is not worth at all.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next