Improved Pageload

mtiggelaar · June 2014

Hello,

I was wondering if you guys got any tips on how to increase the pageload performance.

I'm currently using Betheme which i assume is a little bit bloated.

With current speed tests beTheme performs 2 - 6 times slower then my previous theme (porto).

Porto loads within: 1.2 - 1.8 seconds + -

BeTheme loads within: 3 - 6 seconds.

Do you have any tips or ideas how i can improve this performance? as this will affect pretty much everything, from page visitors to pagerank with search engines.

Regards,

Marco

Albert · June 2014

Hi,

If your website is slow, we recommend to use W3Total Cache plugin. As you can see, our demo in Google Page Speed Insight tool got 86/100 what is very good result. Just take a look on https://developers.google.com/speed/pagespeed/insights/?url=http://themes.muffingroup.com/betheme/&tab=desktop

Without images it is about 94 or 96/100 but we can`t remove them or modify because we got too many pages included and they must look perfect on all devices.

Hope this will help you!

mtiggelaar · June 2014

I already use WP Super cache (first load without cache is about 12s).

From what i can see: The Revslider included is slowing down things alot

then 2 other files that i can see delays alot (over 1 second):

style-colors.php

and

style.php

Ofcourse the default admin-ajax.php aswell but thats basic to WP.

Is there anything in those files or related to those files that cause a 1+ second load time?

I can understand it's not something that can be globally applied but i'm assuming because it's 12 designs into one that there are things a user like me can optimize (if you only use the one layout)

In the end.. speed sells :-)

Albert · June 2014

With Revolution Slider we agree that this plugin is slow but there is nothing what you can do to speed it up. This question should be sent to plugin's author but we are sure he won`t do anything with that because if something has such many options, it usually can`t be fast as plugins that have just few options. Also you can`t do anything with style-colors.php and style.php files. Those are css files with php extension and this is necessary if you want to have customizable theme. If you want those files to be faster, then you should put all css into standard .css files but after that theme won`t be customizable.

In the past we tried to optimize those files but we didn`t found any way to do that because it is technically not possible but those files are necessary so theme is customizable. If you will find any way to optimize those files then we really appreciate if you can share it with us but probably you won`t find anything.

But maybe you should think about better hosting? Because if you will have a look on our demo http://snag.gy/ZJesq.jpg you will see style-colors.php file is 131ms but style.php 133ms what is good result.

mtiggelaar · June 2014

Alright..

i will see what i can find

so far im checking if i can reduce the scripts that require SQL lookups before including the style (as that by it self is quite a delay).

as far as better hosting:

It's on a 2x Xeon 6core 2.66 Ghz server with raid 10 SSD disks that easily push out 700 MB's+ i/o's available (tested)

Tho currently that web server is still located in our old Datacenter with 100mbit line.

it is scheduled to move to our new location with 10+ Gbit lines upcoming month :-) (it's one of the last to move).

Normally our resellers always sell due to the speed our server gives (non overloaded and non overbooked SSD servers)

in the end if i use the default WP theme we load the site within 400ms in total, old theme is 1s, current is 3 to 6.

Seems it also calls for your site and some others which might explain delay.

Tho i have to say our server still needs to move to mariaDB instead of sql (SQL on ext4 is kinda flawed) --> which is why i suspect SQL query's that are causing it.

Albert · June 2014

Ok, so if this is dedicated server and only your website works on it then it is really weird. But maybe you got shared hosting and this machine is shared for example between 100 or 200 different users what usually happen and then server is not so fast as you think.

BTW It is not possible to compare Be to default theme for example. Default theme does not have anything. Also we don`t know what theme you used before but maybe it was theme with much less possibilities and then it is normal thing that Be must work a little bit slowly then poor themes.

As we wrote, styles in style-colors.php and style.php files are always generated dynamically because colors comes from database. That`s why those files can`t be cached and can`t load faster. The only thing you can do is get styles from this files when site is finished and loaded, move them to regular css files, like style-colors.css and style.css files and then files can be cached and site will work faster.

As we showed you above, for Google tools this theme works very well and we think this is the most important. But if you will find any other things that can be improved then will be great if you will share your solution with us.

Thanks!

mtiggelaar · June 2014

Hello,

So far i have removed alot of @import from the CSS

these delay the whole process.

There's also quite a few things "out of place" which makes them "wait" before that1 is downloaded etc.

at the moment cutting down @import and out of place items saved alot.

also removing the If statements in the style-colors.php helped alot.

I'm currently looking how to get rid of the style.php which is still a major delay.

At the moment the site went from 3 - 6 seconds to 3 or less seconds just by those modifications.

(i currently have any caching disabled during testing).

The site i compared it with was Porto (also uses the rev slider but a older version, it's not so slow there tho.. so will compare what is the hold up there aswell).

mtiggelaar · June 2014

PS: i'm on a "shared space"

but we own the servers them selfs --> got 1/2 rack in NL.

so i can confirm their not overloaded.

Only thing i know that currently needs improvement would be mysql.. it really doesn't like to play nice on EXT4 file space (our windows mysql actually is 5 to 8x as fast compared to the Linux one due to long lasting bugs with EXT4 and mysql)

tho that will be resolved when the last servers join our new datacenter :-) (also good timing with the Plesk 12 panel for linux.. nice security enhancements and our PowerDNS plugin is working on there (still in testing phase tho):-))

Albert · June 2014

Hmm we didn`t know that @import is so bad solution and takes so much time to load. We`ll definitely test it soon and will see if the site will work much faster if we`ll move all css to head instead of using @import. This is really good information that only change with @import did theme much faster. Thanks for that!

mtiggelaar · June 2014

Np,

@import from what i know pretty much "delays" the process for all rather then continuing.

Theres some other where the custom.css is in the wrong position, there's another thing in wrong position too but i can't find where it's pulled.

http://gtmetrix.com/

is a quick and easy way to analyze some of the issues (i do ignore the gzip part tho, usually they don't gain much)

every little bit helps, tho i'm sure there's more to be done to improve.. it's always a equation of many things counting up (in my unique case it's also a slower mysql then normal --> which is why i'm removing some of the IF statements that my site in particular isn't using

)

mtiggelaar · June 2014

Ok another tip:

the style.php and style-colors.php --> their major delay.

If i put them to static css and remove the loader.php (still leaving it in the .php file) --> only 1 of them is still 1second.

Doing this saves another second (now around 2 sec load time).

So i got a question for ya:

If i want to put them just in a .css file (static) --> where should i put them?

as i do believe your php files gives some form of "special" privs to be the main priority (so they don't get overwritten by another stylesheet).

guessing if i turned them into a css it will save another second (around 1 second then).

Just to make sure: my goal is always to have my sites load around 1 second (prefered less)

Albert · June 2014

If you want to move styles from style-colors.php and style.php files, you need to create style-colors.css and style.css files in main theme folder and move content from those files but from page because they are generated dynamically. Then in functions/theme-head.php file you need to replace each place where we load .php style files with .css files, like:

/style-colors.php -> /style-colors.css

mtiggelaar · June 2014

I see,

I will try my best and report back to you with all tips that had some (or reasonable) effect.

so far the @import and such had nice effect on it all.

also minifying the css and js saved about a second in total

ballenglobal · June 2014

mtiggelaar, Great post. Many thanks for the information.

re: the @import, did you just remove them from the style sheets indicated in gtmetrix? Or do you need to replace them with something else?

also I have not been able to minify css with W3C without it breaking my site.

Thanks for the info here in this thread! I have referred back to it several times.

mtiggelaar · June 2014

Hello,

the @import is basically including "other" CSS files.

for some like the ui. files instead of @import i have put in the codes of the other .css it imports directly in the file and removed it.

for the bigger files it try's to import you might want to include it directly in the functions/theme-head.php.

So never just remove the @import lines, as the stylesheets they load (and the order they load it in) is still required. you just need to make your browser load it more efficiently :-)

as far as the minify part: i have noticed that most minify tools remove some codes that this theme uses among other things they don't like to use * and remove it all together.

You can try using the optimized version included in the gtmetrix. just make sure the .php files require one thing at the top (you can remove the wp-load.php part however but the css header part needs to stay).

What i did additionally is convert the 2 php files into 1 (saves about 1 second).

mtiggelaar · June 2014

Alright..

small update:

After optimizing (minifying) CSS , JS, and removing all imports --> i got great results

Main thing i did: smaller css and js files turned into 1 single file (reducing it to 20 or less includes in total)

removed the import (turned it into a css file directly)

optimized some images

Removed 1 out of 2 php files.

i also made them static instead of dynamic (cause i only need one style)

this includes removing the wp-load. i am not sure if that is a required thing for dynamic setups.. but for static's it's easy to be dropped. either way.. making the 2 php styles into 1 saved 1 second or more.

Adding small JS and CSS files into 1 bigger one, removing them from being included.

WP Total Cache, and some .htaccess input (happy to share if anyone is interested).

Currently i do got RevSlider still disabled for testing --> i now get 500 - 800 ms page load or less.

well within my goal. and left the 6 - 12s far behind.

Next up is optimizing Rev slider :-)

I am happy to share all files i currently made (the theme) however please note the way i made it is focussed at the BeTheme default NOT any of the other 12 styles (tho changing the styles takes little effort)

ballenglobal · June 2014

I would love it if you would share any and all files you have to share. I am currently using 3 muffin themes on three different websites. This info would be helpful on more than one site for me, most importantly on the Be theme. I am at about 4s page load.

mtiggelaar · June 2014

Alright,

@muffinGroup, any limits or restrictions on how i can share my files with BallenGlobal?

(as it's your guys theme's i don't want to violate any form of licensing and rights

)

I still got revslider to go on fixing up things tho, other then that it's all set for page load within 1 sec (1 sec or less is always my aim for any site)

Albert · June 2014

@mtiggelaar No restrictions at all. You can share any files you want.

BTW We take all your suggestions into account and with next update we would like to improve page speed as you explained above. This is really helpful! Thanks man

chemicalviper · June 2014

in for some answers - our site atm compared to betheme. I still think 2-3 seconds is dead slow, pulled the rev slider completely to get it down to that.

comparison shot from GTmetrix
http://imgur.com/dQreetN

Albert · June 2014

@chemicalviper Revolution slider is external plugin and we are not author's of it. If you wish to have faster rev slider you should re-quest it to author but we are 100% sure he won`t be able to do anything because it is not possible to make such advanced things like rev slider plugin and make if fast as well. This is lot`s of javascript and it is always slower than just simple page without all those things. Also as we see you check our main homepage in gtmetrix what is meaningless. Have you noticed how many images we got on homepage? There is tons of elements inside slider, images in backgrounds, sliders and other stuff. This is not possible to make such advanced page with tons of media and stuff faster. If you want to check speed in gtmetrix you should look on inner page with more regular content, like http://gtmetrix.com/reports/themes.muffingroup.com/yzujswKj

BTW Take a look into explanation why homepage loads more slowly than other pages and you will understand that everything what can be improved in code has been improved and the only thing that can`t be improved are IMAGES! We can`t remove them because images must be in HD.

Thanks for understanding!

mtiggelaar · June 2014

@ChemicalViper :: 2-3 seconds for a fully functional page would be in the normal range. (depending on server network, server hardware, etc).

Tho my goal as explained above is always to get it below 1 (which i have done succesfully).

As my post explains there's quite alot you can do "specific" for your own site, but please note this takes away things like theme options (scripts) which Muffin group made to make things easy for people.

If speed is what you carefor then usability always goes down --> You simply remove any excess scripts and if statements that don't apply to your specific site.

@import is always important to get rid of too.

Images --> make sure their optimized, don't use very large ones (i have had alot of customers that wonder why page load is slow when their images are 500+ kb's for each then have 20+ on one page).

Try to get rid of the many includes (css and js) smaller CSS and JS pages you summ up together rather then including 10 small ones, include 1 bigger one (don't make it too big tho!).

Make sure you apply a propper cache that fits your server (each server behaves differently on cachings, some do better with certain aspects and some do worse, this fully depends on your hosts software AND hardware).

All with all applying all my tips above made my site load within 500ms (originally 3-6 seconds).

@Muffingroup

I have shared my files with @BallenGlobal , (not sure if it was useful for him, i hope it helped him with his page builds tho :-) ) do you also want me to mail you a download location or are the tips summary enough? (i did make my site static with only beTheme default, but adding the 12 themes back in should be quite simple to do just a few script lines back in)

mtiggelaar · June 2014

on a side note:
@Muffingroup --> you can consider making a new feature like "export" optimized theme

where all the if scripts, additional css that you don't use etc gets removed and all turns to static.

I know code wise it will be alot of effort to create such a additional feature, but i guess once you got it --> you got a very nice feature most don't offer :-)

(speed sells these days on any aspect), anyways just a fun idea i had, figured i might aswell share it haha.

Albert · June 2014

@mtiggelaar Of course you can send us what you did but we are pretty sure that we can`t include all those things you did because after that most things for design configuration won`t work. This is what most users on TF expect and this is much more important for them then speed. With latest update we improved some things that you noticed in first topics and as you can see, gtmetrix shows on subpages now 91 what is very good result. We understand of course what you did because you eliminated things like css files with php extension and this makes website much faster but like we said, most users won`t do this.

But thanks for whole your explanation anyway! We really appreciate it.

mtiggelaar · June 2014

Actually i disagree that most users just care about usability.

or well they shouldn't --> plenty of case studies shown direct relation between page load and loss of sales, i do assume most people care about their sales more then usability (if they know the relation between it).

As far as what i did --> i know you can't include it besides the top few tips: less CSS files, less JS files, minify them, remove the @import.

In the very end people load 1 big file 10x faster then 10 small ones (tho for betheme for example your left with maybe 5 or 6 css files).

Other then that: as i suggested you might want to think about a export method to turn files into static once they chosen their options, this way you create fast page load together with usability ;-)

tho i guess code wise it will be a bit of a investment.

Albert · June 2014

Ok, we`ll consider about make those files as static because is the only thing probably left as we did some changes like remove @import and some other in latest update and loading page went down what is good and got 91% already in gtmetrix.

mtiggelaar · June 2014

yeah that saved quite alot for me it was about 1 - 2 seconds after doing the generic changes.

Only after that i started looking into removing the php if statements (each time that gets called it checks with the db and back.. so always a delay if it's during the layout load).

Btw did you also merged the 2 php files into 1 with the wp-load.php page in there? (converting them into 1 also saved alot for me)

for me i'm happy with your theme, then just took it a bit further to make it "specific" for my site (downing the pageload).

I just figured i would share my findings with everyone on the forum :-)

The export to static files bit: it's a interesting one, which should cover speed junkies needs aswell as keep the usability people desire (i'm assuming a very good sales point for the theme especially if you include some case studies for pageload vs sales drop ^^)

cratexl · July 2014

@mtiggelaar

Any chance you can share these updated files with me also? Looking to cut down on the requests in the head area.

Thanks in advance!

mtiggelaar · July 2014

I have sent the link in private conversation.

Regards,

Marco

smoothunit · July 2014

Hi @mtiggelaar , Any chance I could get a copy of your cache config or settings? I'm consistently hitting 95 on pingdom but with 9 seconds page load. My initial 'first byte' is the slow point for me. My hosting is excellent as most other sites are all under 4 seconds with the same tweaks, cache and plugins.

mtiggelaar · July 2014

Hello,

cache is the "last resort" my recommendation would be to try and lower and finetune your site without any caching.

Without any cache your page load should be below 3 seconds already.

also please note that wrong cache settings (which really fully depend up on host) can cause much more delay (more reason to not do any caching untill you got it below 3 seconds).

basically a average site is 2-3 seconds on a normal host

(ofcourse assuming the sites aren't bloated).

Most clues will show in the time line from each file to load and delaying others.

Do you have specifics in your timeline that cause your high load time?

Regards,

Marco

Improved Pageload

Comments