Google Page Speed Tool

This topic has 10 replies, 2 voices, and was last updated 10 years ago by Aleao.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
December 6, 2014 at 1:27 pm #48553

Aleao
Member

Hi guys,

I am trying to tweak your Kathmandu theme as much as possible to improve website loading speed.

So far I have 92 on mobile and 97 on desktop in the google page load speed test with all css code in <head>.

developers.google.com/speed/pagespeed/insights/?url=www.natural-language-system.de&tab=desktop

For mobile it tells me I can get rid of 82% of picture size. So I would like to load smaller images for these devices. Is the html5 <picture> module already working and where can I include it?

I also wanted to tackle the “above the fold” css issue. Do you have a above the fold css file for the cathmandu theme? I created one with jonassebastianohlsson.com/criticalpathcssgenerator/

the so generated CSS I included in with the plugin auto optimize. Though it helps to improve things for the desktop, it makes things worse for the mobile part. But its due to some js. loaded from the auto optimize cache. For that solution I would love to know, where I can actually rearrange these .js scripts loaded and put them at the end of the ??? index or body tag of the first page loaded???, because I didn’t find the file. Is it in the theme folder or in a general wordpress file.

But anyways, the css created with that, doesn’t seem to fully load all that is needed.
Because it tells me only 55% or so can be loaded with the first call to the server.

Now I went back to put all the css code into the header. which gives me the result mentioned above.

I am a half amateur, so any advice is appreciated to improve the website speed.
I would like to know which solution is best. What do you think,

thanks a lot

December 6, 2014 at 2:25 pm #48555

Sakin
Keymaster

@Aleao: You page speed test is really good. 96 is Desktop and 93 in mobile is really awesome. Maybe you can share your experience in this. I don’t think any top website can even match this speed. So, there is nothing much I can suggest you to improve it. Maybe I need to learn from you 🙂

December 6, 2014 at 10:25 pm #48567

Aleao
Member

OH HI,

glad to be able to give something back to the community.

Ok, recipe cook book I applied:

Plugins:
autoptimize –> activate advanced settings and check option to put all css instruction into header, which did the main trick, all the other options like java and css optimization also installed,

then use crazy lazy

and w3 total cache

what is also very important is to put into your htaccess the following code:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 month 1 days”
ExpiresByType text/html “access plus 1 month 1 days”
ExpiresByType image/gif “access plus 1 month 1 days”
ExpiresByType image/jpeg “access plus 1 month 1 days”
ExpiresByType image/png “access plus 1 month 1 days”
ExpiresByType text/css “access plus 1 month 1 days”
ExpiresByType text/javascript “access plus 1 month 1 week”
ExpiresByType application/x-javascript “access plus 1 month 1 days”
ExpiresByType text/xml “access plus 1 seconds”
</IfModule>

and last but not least when you use jetpack than deactivte the java script devicepx

http://swashcap.com/blog/2013/07/removing-devicepx-jetpack-js-for-wordpress/

thats what brought me this speed boost,

but high, I would be glad to figure out these other points, like “above the fold” css.
Would be great if the template had this included, and also an option to load different pictures for mobile use.
Any chance?

Thanks a lot

December 7, 2014 at 11:38 am #48583

Sakin
Keymaster

@Aleao: Sorry there is no option to load different image in Mobile devices. So, for that case you need to use Mobile Apps or Theme like JetPack plugin has mobile theme module.

December 10, 2014 at 2:37 pm #48705

Aleao
Member

Hi, thanks again.
Last question. any idea how to get a proper CSS with all the things “above the fold” to improve speed. That would be a big helper.

Can you quickly generate this somehow?

Thanks a lot.

December 11, 2014 at 1:08 am #48725

Sakin
Keymaster

@Aleao: Sorry I don’t get it what you mean. Do you mean CSS minify and combine then you can try W3 Total Cache plugin.

December 11, 2014 at 8:48 am #48734

Aleao
Member

Hi,

nope. CSS “Above the Fold” means, that you have one CSS file that includes all the elements of a website, that can be seen without scrolling down yet.

This CSS code can be put in the header, so that there is minimal server request and the important elements of the website can be loaded as fast as possible. The rest of the elements like footer for example are loaded after that.

Google recognizes if the “above the fold” content is prioritized which such an CSS and gives extra points in ranking and speed check.

I tried doing it with the following webpage, but the result wasn’t convincing

http://jonassebastianohlsson.com/criticalpathcssgenerator/

Have a look, that is good stuff, to make your templates even faster.

Thanks for your time.

December 11, 2014 at 11:18 pm #48748

Sakin
Keymaster

@Aleao: We don’t have that option and it should be done by using plugin. So, W3 Total Cache plugin can be used to combine CSS and JS to reduce the server request.
Maybe you can see this https://yoast.com/reduce-http-requests-wordpress/

December 12, 2014 at 8:11 am #48766

Aleao
Member

Hi,

thank you for your reply. I know that including the css into header is not done with your theme. It can be easily fulfilled with autoptimize plugin. For that I just need the above the fold – css file.

I am currently using w3 total cache plugin, and the files are already reduced in sized and combined.

The last final step to make this theme speeding like crazy is really to sort this css file out.

I will try to explain me a bit better, sorry for any misunderstanding.
Well normally when you load the website the css file(s) are loaded and then the website is rendered, right?

Well, you can combine many css files to one which speeds it up a bit.
The best way though is to split the design relevant css information into two files. One contains just the elements needed to load the part of the website you see without scrolling, just the way its loaded, what is called “above the fold”

The rest is like elements not needed for that part and that is why these design elements can be loaded and rendered after the first visible part is done.

In order to do so one would need the two mentioned css files, one for the visible elements upon loading and one for the rest of the elements.

I try to create this “critical” above the fold line” with the website mentioned, but the result is somehow not convincing. Which is why I thought you guys could have look on this website, take your standard landing page css code and run it through the website. As you know the names and everything of your own template you might could sort it out to make it all correct, taking away or adding design elements that are not in this generated critical css file.

With that golden piece of css file I could just go into my autoptimize plugin, add it and that code will be added directly to the header of the template.
Therefore it will be loaded first and no additional requests are needed –> speeding up the template.

If you could give support here would be great.

Thank you very much
Kindest regards

December 15, 2014 at 1:07 pm #48878

Sakin
Keymaster

@Aleao: That is not possible from my side and it’s not possible with just css as there are various screensizes and you need JS as well. I also don’t have that idea. So, better use plugin like Lazy Loader.

December 15, 2014 at 1:29 pm #48882

Aleao
Member

Ok,

maybe next time. Thank you very much for your time.

Greetz
Author

Posts