Advertisement
Scaling & Caching

Some Other Tricks For A Speedy WordPress

by

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.

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Web Design
    CMS
    Organizing Ghost Theme Files and FoldersGhost files retina
    This is the second part of our Ghost theme design tutorial series. Everything from here assumes you have a foundational understanding of Ghost. If not, before continuing please take the time to read Understanding Ghost: Stages of Design).Read More…