Review my site: speed up site loading?

[FutureThinkers]

Hey guys,

I've got a wordpress site and already did a bunch of stuff to it to speed it up, but it's still media heavy so I'm not sure what else I can do.

The site

Here is what I did:
-Saved images for web and in lower res
-Installed site-speed optim. plugin
-Turned off pre-loader

Here is what I still need to figure out:
-My theme seems to load full images from podcast episodes on the front page instead of thumbnails, and there is not theme setting that I know of to change this (I'm using Mercurial theme)

Anything else I can do? Right now the loading time is 3 seconds (down from a whopping 9 seconds), I'd like to improve that.

P.S. I don't know css/php, but have been using Wordpress for years.

[ron1]

There is no need to decrease the resolution of the images, you need to optimize your images, all the images has to be png, remove all the inline css to one external css file, you will definitely get the result.

[vishnuaimit]

try ewww image optimizer plugin it will compress your image and enable the lazy load option to for better loading

next use w3 rocket or w3total cache to minify your css and java script. it will increase your load time

[davidgaffer]

Well you're site loading time is 5.77 seconds. Confirmed via Gtmetrix,
You can fix the issue by using gtmetrix.
Hope this will helps.

[FutureThinkers]

Originally Posted by ron1

There is no need to decrease the resolution of the images, you need to optimize your images, all the images has to be png, remove all the inline css to one external css file, you will definitely get the result.

Thank you, I will try that!

[FutureThinkers]

Originally Posted by vishnuaimit

try ewww image optimizer plugin it will compress your image and enable the lazy load option to for better loading

next use w3 rocket or w3total cache to minify your css and java script. it will increase your load time

Thank you, I'll try that too - I think my css and java are part of the problem

[FutureThinkers]

I will check out GTMetrix also.

[Bemmax50]

YOUR biggest problems as shown by Google PageSpeed Insights (32/100 on mobile) and (29/100 on desktop) are: Images (Compressing and resizing is needed), server response, etc. Run your page in there and follow the suggestions given to improve the page speed.

Hints: The server response should be under 0.20, your is 0.98 which extremely high. You might need to change servers or move a faster hosting company. Shared servers are usually the problem.

The images are too big for mobile because you are feeding the SAME images on Desktop and mobile. Look at it this way, say your image is 1200 px 720px and about 150 KB and is good on desktop; in your design the same image is used in mobile which is only 320px wide. The image needed on mobile might only be 5 KB in size instead of 150 KB. There is a way to feed the desktop a different image and the mobile another small and lighter image. The images are normally broken into large medium and small and a small script of javascript will call the right image depending on screen size without loading the big image for a mobile phone.
Google "source srcset" which is a "picture attribute" and you should get the info and the code. Just note the "Compressing and resizing" in PageSpeed will NOT go away if that image is not resized. Bring "Losslessly compressing" to under 10% if possible.

[FutureThinkers]

Originally Posted by Bemmax50

YOUR biggest problems as shown by Google PageSpeed Insights (32/100 on mobile) and (29/100 on desktop) are: Images (Compressing and resizing is needed), server response, etc. Run your page in there and follow the suggestions given to improve the page speed.

Hints: The server response should be under 0.20, your is 0.98 which extremely high. You might need to change servers or move a faster hosting company. Shared servers are usually the problem.

The images are too big for mobile because you are feeding the SAME images on Desktop and mobile. Look at it this way, say your image is 1200 px 720px and about 150 KB and is good on desktop; in your design the same image is used in mobile which is only 320px wide. The image needed on mobile might only be 5 KB in size instead of 150 KB. There is a way to feed the desktop a different image and the mobile another small and lighter image. The images are normally broken into large medium and small and a small script of javascript will call the right image depending on screen size without loading the big image for a mobile phone.
Google "source srcset" which is a "picture attribute" and you should get the info and the code. Just note the "Compressing and resizing" in PageSpeed will NOT go away if that image is not resized. Bring "Losslessly compressing" to under 10% if possible.

Thanks for this feedback - that's the problem I'm facing. I think the Wordpress theme I'm using doesn't have the small-medium-large versions of the image, so when the first page loads, instead of calling small thumbnails for each episode, it calls the full-size image. Is there a plugin for that?

[FutureThinkers]

Or do I have to look for the code and put it in manually?

[FutureThinkers]

I think I might have to switch to a different theme. As much as this one looks cool, there are so many problems with it. Scroll-jacking is another problem.