How to know what's slowing down a Wordpress website?
WordPress heads, I'm wondering what the most efficient way is to locate whats slowing down a WP website (Render Blocking JS & CSS Delivery) I'm working on and optimise it to get the thumbs up from Google.
Good starting points are:
Then review all plugins and any you can live without remove. Less is better for WordPress plugins and performance.
Any recommendations for specialist coding, caching and server level improvements is best left to a WordPress developer. They should be able to show you other similar sites they have optimised to the same level you wish to achieve.
I start with three key tools that help me isolate the cause of the slow activity:
1. Google Pagespeed Test
3. P3 Plugin Performance Profiler
The first two run tests on your site and show you how long each element of your site is taking to load. That's a great way to focus your attention, but it still may not help you identify which part of your Wordpress installation is responsible for the slow code.
I love the P3 Plugin Performance Profiler because a frequent cause of a slow WordPress site is poorly written or inefficient plugins. The P3 Plugin Performance Profiler helps you see which plugin is responsible for the slow behaviour.
Once you know what's causing the slow performance, you can start to consider various remedies:
- eliminate or replace the offending plugin
- add caching to reduce processing times upon loading of the page
- optimise image sizes
- review custom code
- implement a CDN (Content Distribution Network) that shares the load across a network of faster server (but beware - some of the free CDNs aren't always as fast as you might expect - I've known a CDN to slow things down, so you always need to performance test the final configuration to confirm that it's improving things)
There are many things to consider when it comes to speed up word-press website. cache, host speed, images, Minimize the number of HTTP requests, GZIP, frame work, CDN and lots more. But good news is for all these obstacles there are many free tools available on-line.
- I would also add use an image swapper that loads image size based on the device (that way high resolution images aren't pushed to mobile devices).
- Condense icons and small images into image sprites to reduce loading (multiple http requests)
- Look for plugins that conflict with other plugins or themes you are using (when different versions of jquery are loaded it causes multiple loads and potential syntax issues)
- If you have ads on your site, have them called via the footer or a RESTFUL API call (don't front load them if you don't absolutely have to, they will slow your site down)
- Don't overuse custom / web fonts, each additional font adds to the loading time, also if not processed quickly will add to "flashing" where text appears default first and then flashes to update to the intended font)
We normally use:
Good thing is they summarize what's in "yahoo yslow" and "google pagespeed".
As for image optimization, I rely heavily on https://tinypng.com/
A CDN will help and as mentioned by Jeff, do not over use custom/web fonts.
Hope that helps,