Some Other Tricks For A Speedy WordPress
Tutorial Details
- Program: WordPress
- Version: 3.x
- Difficulty: Easy
- Estimated Completion Time: 1-2 hours
Not another typical code copy & paste article but rather my experience sharing on how I optimize my WordPress site. Not to say this is the best but this should work.
Tip 1 Don’t Use @import
Some WordPress themes or child themes especially use @import command in the CSS file to import the styling from the parent theme. While this method makes the style.css for the child theme light and small, it does effect your load time since the browser has to download the stylesheet. The file won’t be downloaded in parallel but instead being queued which adds up on your load time.
What I usually do is to delete the @import command from my CSS file and just copy the whole CSS file that was initially being imported. By minifying (using W3 Total Cache or Wp-Minify) the size of the CSS file will be reduced.
Another trick is to use the <link> tag. According to Google Web Performance Best Practices tips, the <link> tag enables the browser to download files in parallel. Just delete the @import command in your stylesheet and add the stylesheet in the form of:
<link rel="stylesheet" href="first.css" /> <link rel="stylesheet" href="second.css" />
Tip 2 Asynchronous Code Resources
Always opt for the asynchronous type of resource codes for your social buttons and Google Analytics. I think all the usual stuff that we put on our site (Google Analytics, Facebook Like & Google Plus) already has this type of code. Make sure you use the updated resource codes and use the asynchronous ones.
Most of the time, those tutorials you follow from some other blogs were written months ago and they did not update to the asynchronous codes. Other cases involved plugins that you use to insert social buttons. You can always write to the plugin developer so that they update those codes.
Tip 3 Run Only Selected JavaScript On Certain Pages
Do you need to run commentreply.js on your front page when there’s no comment feature there? That’s the general idea. Some JavaScript running in your theme can be excluded from running on certain pages to decrease the load time of your site. How do we do this?
One of the solutions is to use Widget Logic WordPress plugin so that you can control the widgets or rather pages where the widgets would appear. In my case, since I don’t display any social buttons on my front page, I set the particular widget so that the script resources to run those button will only run on single pages.
You might ask, why don’t I put the script directly in single.php. The reason is that since I’m using Twenty Eleven with a child theme, the sidebar is queued after the main content. Therefore, in theory the content will appear first (completely) before those buttons appear. Nobody clicks on the social buttons before even reading the content so it’s best to let the content come out fast for your readers.
The other method is to use the minify feature in W3 Total Cache. You can actually choose where to embed those minified scripts (in <head>, before </body> or after <body>) but this requires lots of trial and error on your part. The idea is to embed scripts that are actually being used in your theme design inside <head> and the rest of it before </body>.
During the trial and error process your site will often appear broken at times but don’t worry as this can be solved by clearing the cookies and cache.
Tip 4 Use CloudFlare
CloudFlare has been gaining huge popularity with WordPress users. The reason is simple, their CDN network works and it’s free. With added security and protection against spambots, CloudFlare is a good feature to be added to your WordPress installation.
Nowadays, you can automatically install CloudFlare from within your cPanel (subject to whether your hosting company support it or not). It is even easier to install within cPanel than by doing it manually.
Conclusion
The general idea of how to make a site speedy is to reduce things needed to load, the size of the page and to emphasize on scripts that actually built up the site first than other scripts like ads, social buttons and analytics. It’s advisable that you understand the structure of your theme and know what is loaded first and last in order to determine which script is important and which is not.
I suggest that you spend some time every month using benchmarking tools such as GTmetrix and Pingdom Full Page Test to analyze your site.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Ariff Shah
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice tips. Hadn’t seen GTmetrix before. Have used Cloudflare on & off for a year, would recommend it too any budding webmaster. I have had a number of issues with reporting site offline, when it wasn’t, but overall it’s very good indeed.
thanks for the info up there… I still thinking on using Cloudflare as CDN..
Thanks for informations ;)
I’ll try to use Cloudflare as CDN too
thanks again
Widget login has been my favorite since its introduction and I have always recommended to everyone. For benchmarking, I wish you could have recommended webpagetest.org too. Gtmetrix and Pingdom are very useful too for a quick review.
Thank you for the tutorial. I am on my way to become WordPress developer and presently I am working on Starkers without style theme and i get to see codes like this:
* @package WordPress
* @subpackage Starkers
* @since Starkers 3.0
to so many places so does it mean that it downloads something and i should rather replace it with <link ?
Kindly advice,
Thank you : – )
No, those lines are part of a DocBlock, which is just comments in a specific format to allow for automated documentation to be created using software like PHPDoc.
NIce Tips, Thanks for tutorial..
Regarding Tip 1, if you are using Minify from W3 Total Cache, there is no difference if you use @import or not.
At least I didn’t notice it.
W3 Total Cache has a section that will allow you to combine any stylesheet imported using @import into one combined and minified stylesheet. Very nifty if you are running multisite and utilizing a Parent theme like roots or something of that nature and dont want to keep copying the reset css.
It’s just a ‘best practice’ measure recommended by Pagespeed in GTmetrix benchmark. For new/beginner WordPress users, some never knew that the ‘@import’ can actually be properly removed. It’s always nice to point out some basic stuff once a while.
Thanks for your tutorial, still these days i thinked that W3 cache minify settings will damage my site appearance and i confuse why… but now i cleared…
If I’m not mistaken, W3TC will process those @import directives for you.
I use wordpress conditional statements to load javascript files only on the pages they’re needed.
I personally think it’s a better way of doing this.
If you are using W3tc then don’t take care of import tag !
As it minifies all the css into one.
Cloud Flare – Really Rocks. Thank you for the 4 great tips to speed-up my WordPress blog – MoneyCTL
Great work. Please keep it up !
I use CloudFlare and it makes my blog load fast
Scripts Files and CSS files:
1). Can use google code service to create a new project and then host all the files from there
2) Always load stuff like jquery from their google CDN
3) In case of jquery, don’t always go for latest version, as it’s quite possible that some older version will meet your requirements and will be smaller is size too
—————————————————————-
Also use a service like cloudflare / Google Pagespeed + some good caching plugin(in WP case)
—————————————————————-
Images
PNG will be your friend, do some experiment for correct ratio of quality and size and host them on different subdomain
———————————————————————————
try to reduce the number of JS files you are using and yes always use a minified version of JS and CSS
———————-
I am sure from my experiences of last decade, a sum of all these will do wonder for any website