TIPS & TRICKS
Another reason we should remove render-blocking JS and CSS is that web page loading speed matters. It is proven and officially announced by Google that decreasing page load time can rank your web page better in a search engine and improve the user experience. It also increases revenue as well as, these days, the Internet business cannot exist without SEO. Many websites owners do their best to optimize their sites for search engines. There is quite a lot of guides and tutorials telling what to do to achieve the best results. Over the time more and more of these tutorials are stating that the website PageSpeed affects SEO. In fact, not only SEO but also few other things like UX followed directly by conversion rate. So more awareness grows around PageSpeed also among WordPress users. To maintain some order, first let me show for those who do not know that yet, several examples on how to check your WordPress site page speed.
Google PageSpeed Insights
It is a tool available to anyone and you can access via this link. To view the report about your website, go in the menu on the left-hand side and click PageSpeed -> Analysis -> Insights. Then, you will see the input field to insert the website address. After you will see the results divided into 2 tabs. One tab is for mobile devices and one is for desktops. There is also a preview of the website for both desktops and mobile. Under the score on each tab, you can find very useful tips for optimizing your site.
Notice: It is advised to test not only your main page against the page speed but also other pages that could be slowed down by elements (usually short codes) which are not present on homepage.
Google PageSpeed Insights for WordPress – WordPress Plugin
This is a nice WordPress plugin which allows you viewing Google PageSpeed data right in WordPress admin panel. The plugin requires a Google API key, but it provides, even more, data than the Google PageSpeed Insights. You will get the list of all your website pages showing good, or bad results. Worth trying, and it is free. Check plugin page.
W3 Total Cache
The is a popular plugin which can also show you your Google PageSpeed result at the top toolbar. This is only a very small widget on plugin main page. You will not learn much from it but it is useful in checking if all is still good.
Usually, the first visit to Google PageSpeed for a WordPress user is very disappointing. A clean WordPress installation on a shared server gave me a result of 73 pts | 88 pts (mobile | desktop) for a maximum of 100 pts. It is not perfect and a bit below acceptable. A big WordPress website with more advanced Theme and a dozen of plugins (a quite usual situation) gave me a result of 27 pts | 30 pts. It is not good at all!
Then, what most WordPress webmasters do in that case? They use W3 Total Cache!
1. Minify Mode
Here is what you should do, assuming you already have W3 Total Cache installed. In your Admin Panel go to Performance -> General Settings, then scroll to section “Minify” and set option “Minify Mode” to “Manual”.
2. JS Minify Settings
3. JS File Management
Now is the most important part. In the JS file management, the section makes sure that in the dropdown your current WordPress Theme is chosen. Below the dropdown there is a text saying “No JS files added” and a button below it.
4. Paste All The Information
Notice: Please make sure you enter in this section only JS files and not CSS. They are grouped in Google PageSpeed so you should easily distinguish them. After adding a file, it is recomend to check if everything works on your webpage, before adding the next one. If something is not working then omit it.
5. CSS Minify Settings
By Nathalie Thibault
Nathalie works as a UI/UX Designer and Front-End Developer. She has years of experience with WordPress and a special interest in internet marketing.
Sign Up For More Resources!