One of my pages result is
It takes around 7 seconds to start rendering. However its come with around 90% visibility
How can I reduce the 7 seconds to few seconds only.
I have a Managed VPS server and am using Compression and Caching on my server.
The site is built using Jquery UI and there are too many JS and Css that needs to be loaded. How do I defer or get rid of these mandatory files to improve my 7 seconds to 2 - 3 seconds.
Any other help / guidance to get this down to 2 to 3 seconds from 7 seconds.
Similary, another page report is
It also takes around 5 seconds to start rendering with 90% visibility
More likely than not you’re going to have to re-write the UI to not use Jquery UI (or any JS for that matter) to have a fast experience.
- Any light weight framework that you can recommend
- I do not know much of js file and so am not sure if I am loading more than what is really needed
Will appreciate if you or someone can analyze and let me know why those files are required and then page by page - I can drop un-necessary js or css files on my own
Get the async Google Analytics code and place it in the bottom of your html code.
See if that won’t improve the start of render time.
Improve your time to first byte (you can reduce it down to 200-300 ms with proper full page caching + rewrite rules) (you can make your website 1 second faster that way)
Try removing the Ad code and see how the performance after that.
You are including 2 different versions of jquery - why?
Try concatenating JS and CSS files so the browser doesn’t need to do so many round trips.
Only after trying these things you should think about rewriting your jQ UI code
Let us know how it goes!
Thank you all for the great feedback - After the complete re-structuring and reduction of content, I am not able to bring the start rendering from 7 seconds to 4 seconds and Total PLT from 16 to under 9 seconds.
Do let me know what else could be done
Here’s the updated data
Here are some more hints:
- pick a better DNS hosting company, which better performance and more POPs. This test is quite old but it might still be helpful; you can also reproduce such a test on your own: http://blog.cloudharmony.com/2012/08/comparison-and-analysis-of-managed-dns.html
- try to use a CDN if you have enough traffic to keep its caches populated. If I were you, I would actually use it anyway for all the content(including dynamic), even if only for the sake of faster TCP connection setup(that’s 400ms in your case, so are you perhaps being impacted by the TCP slow start?), but you need to pick a vendor who has edges close to where your users are, but most of them are good in the US. It would also mostly hide the TCP slow start problem.
- try to combine your JS and CSS files into a single file
- you can also embed the images into your then unified CSS, as base64 data objects, or at least load them before the google ads stuff.
- if possible try to make your HTML static (thus cacheable by CDNs)
- try to inline your CSS and JS into your HTML, but use this with care since this conflicts with the CDN so you might not be able to do this if you can’t actually make the HTML static.
If possible, ignore the Google ads stuff from the tests since most of that is irrelevant to your actual user experience and just interferes with your measurements. I would consider using the speed index instead of the total time to load the page, or you can take the moment when the visual progress reaches 90%. It would be nice to have a custom WPT metric based on something like that, I have no idea if this is possible.
I hope this helps you make it even faster.