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.
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.
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post