WORDPRESS PERFORMANCE

99 ways to speed up your

WordPress website

web3.com.au
Welcome to 99 ways to speed up your WordPress website!

Nearly half of the internet expects your site to load in 2 seconds or

less. If you want your WordPress website to generate more sales, leads
& conversions, having your site load quickly is absolutely critical.
This ebook will demonstrate:

- 99 actionable ways to make your WordPress site load faster

- Actionable tips on how to optimise your design for speed
- Detailed guides on how to write better performing code
- And much, much more…

If you are a WordPress designer or developer, you need to read this

ebook. If you own a WordPress website that takes longer than two
seconds to load, you should send this ebook to your website developer.

Let’s start optimising!

James Banks
Co-Founder of Web3
Tweet me @_jamesbanks
Deploying your WordPress site on a content delivery network (CDN) is one of the
easiest ways to decrease your website’s load times.

A content delivery network stores the static files of your website (in most cases
CSS & JavaScript) in server located in almost every major capital city around
the world. This means that when a site visitor from say, New York, accesses your
Australian hosted website, the static files are served from the New York CDN
rather then having to travel all the way from Australia.

Check out MaxCDN or Cloudflare to see which CDN best suits your website’s
needs and requirements.

 Deploy your WordPress site on a CDN. Check out

MaxCDN or Cloudflare and see which CDN suits
ACTION
your site best.
ITEM
One of the quickest and easiest ways to speed up your WordPress website is to
install a caching plugin. Caching removes the need for the server to generate
content each time it requests it. Instead, it grabs the generated page and stores a
copy of it on the server. When a user accesses your website, it sends the user this
cached version instead. This can significantly decrease your website’s load time.

A good caching plugin can do much more than just cache your website to
decrease load times. It is best to review the plugin documentation and install
W3 Total Cache or WP Super Cache. WP Total cache is feature rich and allows
for macro setting changes whereas WP Super Cache is more of a set-and-forget
solution.

 Install either W3 Total Cache or WP Super Cache to

your WordPress site to reduce load times & boost
ACTION performance
ITEM
Having your WordPress website built on top of a proper WordPress web host is
like building a house on top of a strong foundation. If you have your WordPress
website built on top of a cheap, flimsy shared hosting service, your website will
suffer. It will suffer not just from performance problems, but from security and
scalability issues as well.

The best way to avoid these problems is to invest in a quality dedicated WordPress
web host like WP Engine or Pagely. Investing in proper WordPress hosting can
save you time and money in the long term too. For example, WP Engine hosting
deploys WordPress websites onto MaxCDN and caches it at the same time.
This way you don’t have to worry about doing this each time you launch a new
WordPress website.

 Get your WordPress site on a dedicated WP host.

Check out WP Engine or Pagely and see which one
ACTION best fits your needs.
ITEM
Deploying your website on a CDN is a great way to decrease the load times,
especially if your website draws in traffic from all over the world. However, CDNs
will only store & serve your website’s static file types. They will not store & serve
your website’s dynamic file types like PHP and MySQL.

If most of your website users are coming from a single geographic region, then
choose a data centre as close as possible to that region. For example, the majority
of Web3’s website traffic comes from Australia, so we use the closest WP Engine
data centre to Australia. This reduces the amount of distance that our website files
need to travel to Australia compared to hosting in USA as an example. This helps
to reduce load times for Australian viewers.

 Host your site on a server that is close to

where the majority of your site viewers are
ACTION
geographically located.
ITEM
The first step to decreasing your website’s load times is to get a snapshot on how
long it takes your website to load. The best tool to use for a quick overview on
your website’s performance is Pingdom’s Website Speed Test tool. Pingdom can
return erratic results, so it is best to run the speed test 3-5 times on your website.
Also, makes sure that you set the server settings to be as close to your server’s
location as possible.

If your website takes longer than 2 seconds to load, and you haven’t actioned steps
1-3 from this book, then your first step is to achieve that. If your website takes
longer than 2 seconds to load, and you have actioned steps 1-3 in this book, then
the following tips should get your website’s load times to less than 1 second.

 Use Pingdom’s speed test tool to get a quick

ACTION overview of your site’s performance.
ITEM
If you are savvy with web development, then WebPagetest can give you a technical
detailed breakdown of your website’s performance. WebPagetest allows you to test
from a large range of geographic locations. It also allows you to test from specific
browser types to gauge performance.

Pingdom’s Website Speed Test tool is best for basic WordPress performance
optimisation. However, for macro-level performance optimisation WebPagetest is
the go to tool. The information that it provides can be overwhelming to someone
that isn’t web savvy, so best use either tool depending on your skill level.

 Use WebPagetest for a detailed overview of your

ACTION site’s performance.
ITEM
Now that you have some load time goals established, it’s time to see exactly which
areas of your website can be improved to decrease load times.

There are many different online tools that can help you with this. We prefer
Yahoo’s YSlow. Once you have installed YSlow into your preferred web browser,
open up your website and hit the Run Test button.

Once completed, you’ll have a list of suggestions on how to make your website
load faster ranked from A to F. From here, you will want to prioritise fixing the
F-graded suggestions to gain the biggest performance benefits. Work your way
backwards up the alphabet until your have reached your load time goals.

 Use YSlow to see which areas of your website can

be better optimised for faster load times
ACTION
and performance
ITEM
In general, the more HTTP requests required to render your website, the longer
it will take to load. Each script and CSS file requires a HTTP request to download
into your website viewer’s browser for your website to display. The goal is to
combine, compress or remove these HTTP requests to decrease load times.
Specific techniques to achieve this will appear later in the book.

The first step is to find out how many HTTP requests your website is making and
how long they are taking to load. You can use either the timelines page in Chrome
Dev Tools or the Network panel in Firefox’s equivalent version to see what’s called
a ‘waterfall’. The waterfall will show you all the HTTP requests your website is
making and how long they each take to download.

 Use Timelines in Chrome Dev Tools or the Network

panel in Firefox to see how many HTTP requests
ACTION
your site is making
ITEM
The quickest way to reduce your WordPress website’s HTTP requests is to install
a minifying plugin like Better WordPress Minify. Minifying plugins combine
and compress your website’s JavaScript and CSS files. This reduces the amount of
HTTP requests which decreases page load times.

However, be careful when using minifying plugins as they can break your website
by over-optimising files. Make sure that you test and check your website after
installing a minifying plugin to ensure nothing appears broken.

The best way is to ensure that you develop your WordPress websites with high-
performance coding best practices in mind. These best practices are detailed later
in the book.

 Use a minifying plugin like Better WordPress Minify

to reduce HTTP requests and compress your
ACTION
JavaScript & CSS files
ITEM
One of the biggest reasons why WordPress website pages can become slow to load
is due to large file size images. This is particularly true for media-rich websites
that contain many images per page.

When dealing with JPG or JPEG image files, you should always apply the 70/35
image compression rule. When saving an image for web in an editing tool like
Photoshop, drop the image quality to 35%. If there’s no noticeable picture quality
loss from the file, save it. If you do see noticeable loss in image quality at 35%,
then increase the quality up to a maximum 70% until there is no noticeable
quality loss. Most images do not degrade at 70% quality. The goal is to strike a
balance between small file size by decreasing image quality without creating an
ugly looking image.

 Try saving your website JPGs or JPEGs at 35%

quality to reduce file size. If the image looks bad,
ACTION
try saving at 70%
ITEM
Since you cannot change the quality level of PNG files, the 70/35 image
compression rule does not apply. This doesn’t mean you cannot reduce the file
size of PNGs as there are great free tools like PNGGauntlet that can do just that.

If you are a PC user, then PNGGauntlet is an excellent piece of free software that
removes unneeded image data from your PNGs. This reduces file size without
needing to reduce image quality.

Place all your website’s PNGs into PNGGauntlet, run the program, and replace
the old PNGs with the optimised PNGs to decrease page load times.

 If you are a PC user, use PNGGauntlet to reduce

the file size of your site’s PNGs without sacrificing
ACTION
image quality
ITEM
ImageOptim functions exactly the same as PNGGauntlet, but for Mac users.
Just like PNGGauntlet, ImageOptim is a free and open source app that removes
unneeded image data from your website’s PNGs. This reduces file size, helping
your website’s pages to load faster.

 If you are a Mac user, use ImageOptim to reduce

the file size of your website’s PNGs without
ACTION
sacrificing image quality
ITEM
Another handy Mac app that you can use to further decrease the file size of your
website’s PNGs is ImageAlpha. The app converts lossless PNG-24 to the lossy
PNG-8 format. PNG-8 formatted images allow you to control the amount of
colour values used in the image. The smaller amount of colour values, the smaller
file size the PNG file will be. However, having too few colour values can result in
your PNG images looking unpleasing. So, it is best to compress your PNGs image
colours with care and attention to quality.

Finally, you can change the compression format between Median Cut, Posterizer
& Dithered. You can test to see which settings reduces the file size the most
without noticeable quality loss.

 If you are a Mac user, ImageAlpha is a great free

tool to further compress the file size of your
ACTION
website’s PNGs
ITEM
 CSS Sprites help to reduce the individual HTTP image download requests your
website needs to make. It does this by combining many images into a single image
file which is called an image sprite. The images within the CSS Sprite display
across your website using CSS positioning elements.

Slider controls or website user-interface controls are common candidates for CSS
sprites. To create your own CSS Sprite, you can use the online tool Sprite Cow.
The tool will generate the CSS Sprite positioning code for your images for you.

 Consider combining your images into CSS Sprites

to reduce page load times. Use Sprite Cow to
ACTION
generate CSS Sprites
ITEM
A simple and easy way to reduce page load time is to make sure that all your
website’s images are not larger in dimensions then they need to be. The smaller
the physical size of the image is, the smaller the images file size will be. You can
use Inspect Element on the image inside your browser to identify the dimensions
of the image.

If the image has shrunk down from its original dimensions, then you can use
the Media Editor inside WordPress to resize the image. This way, only the actual
size of the image displays on your website, saving file size and reducing page load
time.

 Avoid having images that are larger in dimensions

than they need to be on your website. If they are,
ACTION
resize in WP
ITEM
A method to reduce performance loss from large images is to specify image
dimensions in your theme’s function.php file. By doing so, WordPress will resize
the image to the specified size before the user downloads the image. This reduces
page load times. This method is useful for situations where you cannot control the
media sizing that is uploading to the website.

As an example, if you know that your blog post feature image size is 400px by
250px, you can specify these dimensions in your functions.php file. This way,
WordPress will handle the image resizing for you. The WordPress Codex outlines
which image types you can specify certain dimensions for. It also outlines a
variety of different hooks you can use in your functions.php file to increase
performance.

 You can specify image dimensions in your functions.

php to stop larger than necessary images slowing
ACTION
down your site
ITEM
Until recently, there has been no universal solution for serving high-density pixel
per inch (HDPI) or retina-ready images from your website. This has changed
with the recent introduction of the srcset element which allows you to handle
HDPI images natively from the browser. Since it does not need additional CSS &
JavaScript to work, your website makes less HTTP requests. This helps to speed
up your website’s load times.

Opera’s developer documentation explains how to integrate the srcset element

into your WordPress website. Keep in mind that at the time of writing this book,
the srcset element is not completely supported in all major browsers. However, it
is being rapidly adopted across all major platforms.

 Consider using the srcset element to serve HDPI /

retina-ready images from your website natively
ACTION
without JavaScript
ITEM
When creating favicons and touch icons, you want to make sure they are correctly
sized to avoid large image files.

Iconslate is an excellent free app that allows you to create a set of web-ready
favicons and touch icons in one click. The app ensures that the icon size is correct
so that your icons are not larger than they need to be.

Iconslate also saves you time with it’s one-click create all feature.

 Iconslate makes it easy to create perfectly sized

ACTION favicons & touch icons in one click
ITEM
 CSS3 allows web designers to take advantage of many design elements that used
to be only achievable using image files.

The most common of these are gradients, patterns and shadows. If you are using
these design elements in your website, then you should aim to achieve the design
using CSS3 rather than images. This is because design elements created using
CSS3 do not need to download an image file, which decreases page load times.

There are many online tools, like CSS3 Generator, that can help you create your
own gradients and shadows easily. Follow the prompts to generate your own CSS3
elements by completing all of the requested fields.

 Use CSS3 over images for gradients, patterns and

ACTION shadows on your website to reduce load times
ITEM
A trick to consider that can decrease page load times is recreating simple
background image patterns to Base64 code strings and embedding it into your
CSS. The Patternify website tool can convert image patterns to Base64 code. You
can include the Base64 code into your website’s style sheet.

The reason why you would do this is because Base64 code string is compatible
with CSS allowing you to remove the additional image download. This allows the
browser to process and render the pattern while the CSS file is being downloaded
compared to downloading an additional image file. Be aware that recreating
images as Base64 code string is only recommended for basic patterns and images.
More complex images can result in a long Base64 code string. This would add a
lot of weight to your style sheet and slow your website down.

 Use patternify.com to convert your basic image

patterns to Base64 code which can help to decrease
ACTION
page rendering time
ITEM
If you are using images for user-interface elements across your website, then you
should consider replacing them with font icons. The advantage is your browser
only needs to download a single font file as opposed to many image files. By
making less HTTP requests, your website will load faster.

IcoMoon is an excellent app that collects the best font icons from around the
world into a single resource. One of the most versatile and flexible icon fonts is
FontAwesome by Dave Gandy. You can download and integrate FontAwesome
from IcoMoon along with many other icon fonts.

 Consider replacing images for icons with an icon

font like FontAwesome to help decrease your
ACTION
website’s load times
ITEM
A simple way to further decrease load times by using a font icon is to limit the
amount of icons in the font file to only what you need. A large font icon like
FontAwesome has over 470 individual icons in its font file. If you are using only 5
icons in your website, then it is unnecessary for your users to download a font file
containing all 470 icons.

The IcoMoon app allows you to select only the font icons that you want to use in
your website, and outputs them in your own custom icon font file. The result is a
smaller icon font file, which helps to decrease page load times.

 Reduce your website icon font file size by including

only the icons you need - use the IcoMoon app:
ACTION
http://icomoon.io/
ITEM
As with compressing icon fonts, the same technique can apply to your @fontface
enqueued font files. Popular font files usually include a Latin, Hebrew & special
characters in addition to the standard alphanumeric characters. If you know that
your audience has no need to use characters beyond alphanumeric, then remove
them to reduce the file size of the font.

FontPrep is an awesome Mac app that allows you to remove unneeded characters
from your website’s custom font files. If you do decide to compress your font files,
check each page on your website to ensure there are no text-rendering errors. If
your website’s content changes a lot, it may be better not to remove characters to
reduce the risk of potential errors.

 Reduce your @fontface font file size by removing

unused special characters, etc. FontPrep app can
ACTION
help you do this.
ITEM
Gzipping your server is a simple and effective way to save bandwidth and speed
up your website. Gzip is file format that tells your server to send compressed files
to speed up load times. Most quality website hosts like WP Engine will gzip your
server by default for you. If you are unsure if your server has been gzipped, then
you can use the online tool gzipWTF to check.

If your web server is not gzipped, then you can apply snippets from the HTML5
Boilerplate’s .htaccess file (details provided in the next few pages) to enable
gzipping on your website’s server. Keep in mind that .htaccess is designed for
Apache servers, so the following tips may not work other types of servers. Also,
you may be able to shortcut some of these tips by completing tip #2.

 If you are unsure if your web server is gzipped, use

ACTION gzipWTF to find out.
ITEM
The HTML5 boilerplate is the web’s most popular front-end template. It has a
few trick lines of code that you can use to speed up your WordPress website. One
of them is the expires headers code snippet which tells the browser if it should
request a specific file from the server or a previously downloaded version from
the browser’s cache. This reduces repeat downloading of files, which results in
faster load times for your website.

You can download the HTML5 boilerplate’s .htacces file from Github. Once
downloaded, search the file for the phrase “ | Expires headers ”. Copy and paste
the entire expires headers code snippet into your WordPress .htaccess, and save
the file.

 Use the “Expires Headers” code snippet from

HTML5 boilerplate’s .htaccess file to help speed
ACTION
up your site
ITEM
Entity tags (ETags) are a mechanism to check for newer versions of a cached file.
If you know updates to your website’s CSS file won’t happen for a long time, you
don’t want your visitors to be downloading a new version of your CSS file each
time they visit your site.

By using the ETAGS snippet, you can force your visitor’s browser to reply on
Cache-Control and Expires Headers. This results in one less step in downloading
your website to view in a browser, which decreases load times. It is best to
check first if your web host applies ETAGS by default as most good web hosting
providers do this.

 Copy the ETAGS snippet from the HTML5

boilerplate and configure as necessary to
ACTION
decrease site load times
ITEM
The Vary: Accept-Encoding header snippet from the HTML5 boilerplate is an
easy way to increase the performance of your WordPress website. When browsers
make a request to your web server, they include HTTP headers so your server
knows what to send back to the request. By default, your web server may not be
able to send back the correct cached version of your website, meaning that your
website will take longer to load.

Vary: Accept-Encoding will allow your web server to send different cached
versions of your website to avoid this problem. Include the code in your .htaccess
file from the HTML5 boilerplate to take advantage of this. Keep in mind that
good web hosts will have already done this for you.

 Copy the Vary: Accept-Encoding code from the

HTML5 boilerplate htaccess file to your htaccess file
ACTION
to take advantage of this.
ITEM
One of the most important rules to remember when writing high-performance
code is to keep it D.R.Y. Code classes exist so that your website can render like
objects without you needing to tell it what to do each time. However, as your code
files grow in complexity, it’s all too easy to create a new class for an element when
an existing class could be used. As each character in your code files equals to 1
byte in size, the more repeated code you have in your code files, the larger your
code file will be. This results in your website taking longer to load.

It pays off to review all the classes in your style sheet as you write code. This
ensures that you don’t fall into the trap of repeating code and creating a large code
file size.

 The golden rule to writing high performance code is

ACTION to keep it D.R.Y (Do Not Repeat Yourself!)
ITEM
Having your code files formatted in a consistent and easy to read manner makes
it a lot easier for everyone to maintain and build out an existing code base.
However, you should make sure that your well-formatted code is spaced out with
Tab spaces and not keyboard spaces.

Why is that? A tab space counts for 1 byte whereas 4 keyboard spaces (the
equivalent width of a tab space) counts for 4 bytes. This may seem minuscule,
but when you are writing thousands of lines of code, the numbers do add up. The
solution is to make sure that your code files are using tab spacing by using a find
and replace all function. By doing so will remove unnecessary keyboard spaces
and replace them with a single tab space.

 Keep code fast by using tabs over spaces to indent

your code. 1 tab space = 1 byte whereas 4 spaces =
ACTION
4 bytes
ITEM
Part of writing lightweight CSS code is to make sure you use shorthand syntax
wherever possible. As each character adds 1 byte of size to our CSS files, removing
CSS specifiers by writing them in shorthand helps to keep the file size down.

Font manipulation is perhaps the most over sighted CSS syntax that is not
shorthanded. The specifiers that can be defined in shorthand are: font-weight,
font-style, font-variant, font-size, line-height & font-family.

Font-size/line-height and font-family should appear in that syntax order for

greatest browser compatibility. Font-size and font-family should be specified
when writing shorthand to ensure the widest amount of browser compatibility.

 Declare your font elements in shorthand to reduce

ACTION the file size of your CSS files.
ITEM
As with font manipulation, CSS border elements can be written in shorthand to
reduce the size of your CSS files. The CSS border elements that can be defined in
shorthand are: border-width, border-style, border-color.

Although the elements can be defined in shorthand in any order, the most used
order is: 1.border-width, 2. border-style, 3.border-color.

 Reduce the file size of your CSS by declaring your

ACTION site’s border properties in shorthand
ITEM
CSS background elements are another overlooked area that can be defined in
shorthand to reduce your CSS file size. The background elements that can be
defined in shorthand are: background-color, background-image, background-
repeat, background-position.

Just like CSS border elements, there is no particular order that you need to
arrange the elements in shorthand form.

 Declare your background properties in shorthand to

ACTION reduce your CSS overall file size
ITEM
Margins and paddings are usually the most used CSS elements in a website’s style
sheet. Significant file size savings can happen if all margin and padding elements
are defined in shorthand (example in green) as opposed to longhand (example in
red).

An easy way to remember the syntax order of shorthand margin and padding CSS
is to think of a compass face - north, east, south, west. First position values are
north (top), 2nd is east (right), 3rd is south (bottom) and 4th is west (left).

 Write your CSS margins and paddings in shorthand

to reduce CSS file size. Remember to use the
ACTION
correct syntax: NESW!
ITEM
Applying shorthand code syntax is a great way to reduce the file size of your CSS.
To further decrease your CSS file size, shorthand your shorthand syntax CSS.

For example, hex colour values that use six of the same characters (example above
in red), can work with only the first three characters defined (example above
in green). As each character equals one byte, halving the length of solid colour
values can help to reduce the file size of your CSS.

This shorthand way of writing shorthand CSS also applies to padding, margin and
border elements.

 Shorthand your shorthand CSS to reduce the file

size of your CSS. E.g border 1px solid #fff combines
ACTION
3 elements in 1
ITEM
Writing your code in shorthand is important to practice when writing high-
performance code.

When you are writing lots of CSS, it can be easy to forget to write some of your
elements in shorthand. A great tool to check your CSS code, and convert it to the
shorthand format is SHRTHND.

Paste in your CSS code into the left, and the app will output the code in shorthand
format on the right. The app will highlight the code that it has outputting in
shorthand on the left. That way, you know which classes and IDs to replace with
the shorthand code.

 To reduce filesize of your CSS, use SHRTHND

http://shrthnd.volume7.io/ to shorthand your code
ACTION
for you
ITEM
It is always best to check over your code and remove redundancies once you have
finished writing it. However, this can be quite time consuming and tedious to do,
particularly with large style sheets.

Tools like Code Beautifier can automate most this process. It does so by tidying
up your CSS and removing unnecessary weight. You can choose different levels of
compression depending on how much file size you want to reduce. We find that
the tool works best when left set on its standard settings.

 Use Code Beautifier to compress your website’s

CSS & speed up site load times: http://www.
ACTION
codebeautifier.com/
ITEM
It’s quite common to find unnecessary brackets and opening/closing tags in
HTML/ CSS files. This creates unnecessary weight in your files and can affect
your website’s W3C validity. With that said, you want to make sure that these are
removed before you make your files live.

The easiest way to remove unnecessary brackets is by doing a find all search.
From here, you can search for any instances of “{}” in your style sheet, and
remove them. The same rule applies for your files that contain HTML However,
the find all search criteria should be “></”.

 Do a find all search for “></”. once you’ve finished

writing HTML/ CSS to quickly strip away unneeded
ACTION
code weight
ITEM
The aim of writing high-performance code is to keep file size as small as possible.
With that said, using CSS margins and paddings is a much better way to space out
elements compared to clumps of &nbsp;, <p> and <br/> tags.

Although it can be convenient to use HTML tags for spacing, it is better to use a
CSS to space out your elements.

This one class can be reused many times across your web pages. Clumps of
HTML tags need to be added in each time to space out elements. This creates a lot
of unnecessary file weight which decreases load times.

 Avoid slowing down your pages by creating spaces

with &nbsp;, <p> and <br/> tags. Use CSS margin
ACTION
and padding instead
ITEM
Browser vendors are constantly reducing the amount of prefixes required to create
compatible CSS code across the web.

Can I Use is an excellent resource that allows you to see what CSS prefixes are
required to render your CSS3 code in major browsers. It is a good practice to
check this website when writing CSS3. This is to make sure that you are not
including any unnecessary prefixes in your CSS code.

By not including unnecessary weight to your style sheet, you CSS file can load
faster.

 Reduce CSS file size by removing prefixes that have

graduated. Use ‘Can I Use’ http://caniuse.com/ to
ACTION
find out more
ITEM
When CSS3 first reached comprehensive support by most major browsers in
2009, browsers leaped at the chance to create new prefixes. However, not all of
these defined prefixes carried through to being supported.

-ms-border-radius, a prefix for Internet Explorer to support border radius

elements, was never supported. Using a prefix that was never supported in your
style sheet adds unnecessary weight. As with the previous step, you should check
all of your CSS3 prefixes to make sure you are only adding in the necessary
prefixes for cross browser support.

 Be aware of old prefixes that can cause unneeded

file weight like -ms-border-radius. Check with:
ACTION
http://caniuse.com/
ITEM
Prefixes can add a considerable amount of weight to a style sheet if you are using
a lot of them. This is particularly true for websites that are backwards-compatible
with older browsers as they require more prefixes to render correctly.

If you are creating a website that uses a lot of different prefixes, you should
consider loading them dynamically with -prefix-free. Through a lightweight piece
of JavaScript code, -prefix-free checks what browser you are using, and only loads
the prefixes required for that browser. Your website will load faster as only the
browser-specific prefixes are downloaded, compared to downloading all prefixes
for all browsers.

 Consider dynamically loading CSS prefixes to

reduce page load times. Use http://leaverou.github.
ACTION
io/prefixfree/
ITEM
Having unnecessary empty spaces in your style sheet adds unneeded weight
to the style sheet. When you’re compiling your CSS files, its easy to create
unintentional empty spaces.

You should review your style sheet once completed and remove all empty spaces.
Or, if you are a Sublime Text user, you can use a package called ‘Remove Trailing
Space’. This package will automate the process of removing the empty spaces
for you.

 Remove empty spaces in your CSS to reduce file

size. Use ‘Remove Trailing Spaces’ for Sublime text
ACTION
to quickly fix this
ITEM
If you’ve built a child theme from an existing WordPress theme, you would have
likely come across this problem. If the child theme’s CSS file is not called after the
parent theme’s CSS file, the child theme CSS will be overwritten by the parent.
This forces you to use the !important tag on your CSS elements to stop them from
being overwritten by the parent.

The reason why this is bad is each !important tag adds weight to your child
theme’s style sheet that can be avoided. The solution is to make sure that you’re
child theme CSS file is defined after the parent theme’s CSS file. This way, the
child theme CSS will overwrite the parent’s CSS file without needing to use
the !important tag. An even better way would be to ensure your style sheet is
enqueued correctly in the child theme by using this codex code.

 Avoid !important tags in your CSS by making sure

that your child theme CSS is registered after your
ACTION
parent theme CSS
ITEM
An important technique in writing high-performance CSS is to keep it DRY
(Don’t Repeat Yourself). Part of keeping your CSS DRY is to write code in a
object-orientated and modular way so that it is scalable

A common example of OO CSS (Object Orientated CSS) in action is a grid

system. A CSS grid system allows you to append a class to your divs which gives
the div the properties of the grid system. This is superior for performance than
having a different class for each website column and container. This helps to keep
your style sheet modular and lightweight. If you’re new to OO CSS, then check
out this great guide from Smashing Magazine on how to action these techniques.

 Apply OO CSS and SMA CSS techniques to help

maximise the performance of your CSS code
ACTION
ITEM
Writing in SASS or LESS will not give you any performance benefits over CSS.
However, using a dynamic style sheet markup can help to simplify your website’s
style sheets. SASS and LESS have added features over traditional CSS that helps
to write DRY code. One of these features is variables (single references). You can
attach variables to certain values in your style sheet allowing you to not repeat
yourself. You can also set it up to compress the style sheet once you have
compiled it.

SASS and LESS does come with a learning curve. However, if your website does
a lot of CSS based tasks, introducing SASS or LESS can definitely pay off in the
future. Apps like Compass can help you to write quality SASS quicker through its
range of built-in features.

 Learn how to use SASS or LESS as it will help you

write DRY code that performs better
ACTION
ITEM
Google Fonts has allowed for a lot more variety when it comes to typography on
the web. With 600+ fonts (and growing) to choose from, web designers are spoilt
for choice.

However, using too many font options can have a negative impact on websites
performance. The general rule for performance is to use one or two Google Fonts
at the most on any one website.

Make sure that you only select the font weights that you intend to use on your
website to save unnecessary file size. In general, a normal, italic and bold font
weight suffice for most website designs.

 Keep Google Fonts limited to 2 families and 2

weights per family to keep your website’s load
ACTION
times respectable
ITEM
To further decrease your page load times, consider only using machine fonts for
typography. Since machine fonts are native to your viewer’s computers, they do
not need to be downloaded like a Google font.

A good design vs performance compromise between the two is to use Google

Fonts for headings and machine fonts for body text. That way, you can still
achieve a level of typographic uniqueness. At the same time, you can ensure that
your websites pages load a bit more quicker.

 Consider keeping your website’s body font a

ACTION machine font to reduce page load times
ITEM
If you’re still using Cufon to render custom fonts on your website, then stop.
Google Fonts & @font-face font rendering surpasses Cufon in all areas, including
performance. Cufon uses JavaScript to display custom fonts on your website as
images. This is bad for both performance and SEO.

Cufon requires a separate JavaScript file to function. This adds to the load time of
your website. If the font that you want to use is not a Google Font, then you can
use tools like Font Squirrel’s webfont generator. The generator can create @font-
face webfont kits, which are JavaScript free.

 If you’re still using Cufon, stop, and delete it from

ACTION your memory. Use @font-face instead.
ITEM
With the ubiquity of responsive websites, the mobile-first philosophy has never
been more relevant. A website that is built mobile-first means that it is designed
for the mobile view port first before desktops.

The mobile-first approach has many performance advantages over the traditional
desktop-first approach. Designing for a small mobile screen forces you to devoid
of any unnecessary elements. The result is a more focused, simpler and better
performing website. This explanation only scratches the surface of the
mobile-first philosophy. If you are looking for more, check out our presentation
from WordCamp Melbourne 2013.

 Focus your website. Build with mobile-first design

principles in mind. See http://bit.ly/1zg8C3C for
ACTION
details on how
ITEM
The success of a website often comes down to planning. A question that should
always be answered before you start building a website is: what is the primary goal
for this website to achieve? Is it to increase inquiries? Generate more e-commerce
sales? Increase the number of opt-ins? Whatever the primary goal is, your website
should be laser-focused around achieving it. You should consider removing
everything else that doesn’t help in achieving that primary goal.

Building a website with a primary goal in mind helps you to create a focused user-
experience. By removing all the non-essential features, your website will preform
better as it is not weighed down by the stuff that distracts your users from the
website’s primary goal.

 Plan to build a fast website from the beginning

- build with a primary objective for the website
ACTION
to achieve in mind.
ITEM
Clear, simple and easy to use are three things that every web designer should aim
for when building a website. When you’re thinking about adding more to your
website, you should first ask yourself : ‘does this help me to better achieve the
website’s primary goal?

If the answer is no, then you should exclude the element. The result will be a more
focused website that is simple for your users to understand what it is about. From
a performance standpoint, less is more. In general, the less amount of individual
elements you have on your website page, the better it performs.

 Ask yourself if feature x,y,z helps to better achieve

your site’s primary objective. If the answer is no,
ACTION
remove it
ITEM
In most countries, mobile network Internet speed is slower than a plugged in
desktop device. Also, mobile Internet users need to deal with changing signal
strength as they access the web while on the move. In saying so, it makes sense to
load your website’s mobile CSS first before your desktop styles. You should do this
because mobile users are more likely to be affected from slow loading times than
your average desktop user.

For example, if you’ve ever been on a mobile website, and you’ve seen the desktop
styles load then all a sudden the website’s mobile styles load in. This makes the
website look buggy to the user, and doesn’t set a good first impression. You can
reduce the noticeable impact of the problem by having your mobile CSS load first
before your desktop CSS. See the next page for a working example.

 Place your mobile media-queries at the top of your

CSS file to speed up website render time on
ACTION
mobile devices
ITEM
This is an example of a style sheet where the desktop styles load first, followed by
tablet, then mobile.
Here’s the same example, but with the mobile CSS loading first, then tablet, then
desktop. Note the difference in the min-width and max-width syntax in each
example.
Each CSS element requires a varying level of browser processing power to render.
Visual related CSS elements need a process called ‘painting’ to occur. Repainting
happens when a visual CSS element is painted, then modified again. A common
example of repainting is a child theme CSS class overwriting the a parent theme
CSS.

The general rule to follow for performance is to avoid repainting CSS wherever
possible. This is because repainting can be a heavy operation for web browsers
to complete. However, in some cases, repainting CSS is unavoidable. The best
way to avoid repainting is to make use of a theme that well fits the design of your
website. Alternatively, writing your own theme from scratch or from a framework
is another solution.

 Avoid overriding CSS classes/IDs or ‘repainting’ to

increase performance. Find out more here: http://
ACTION
bit.ly/1wqF2xN
ITEM
CSS Trigger’s property table will help you identify replacements for CSS elements
that consume a lot of resources.
The general rule is to place all CSS and JavaScript in external files so they are
separate to your HTML/PHP files. The reason why you should do this is because
external JavaScript and CSS files can be cached. This means that they do not need
to download every time a user visits your website.

This results in better website performance. If you use caching on your website,
such as W3 Total Cache, the performance gains are more noticeable.

 Keep your JavaScript code separate from static

HTML/PHP files so that it can be cached = faster
ACTION
load times
ITEM
There is one exception to the rule of keeping all of your CSS and JavaScript in
external files. If you are using JavaScript to render elements above the fold of your
website, and if the JavaScript code is small, then you should consider placing the
script inline.

By doing so can increase the above the fold render time of your website. This
allows your web pages to load faster above the fold which is where your users
attention will be focused on initially. If you are unsure if your website could
benefit from this trick to improve above the fold render time, then you should
run your website through Google’s PageSpeed Insights.

 Consider using inline JavaScript for small elements

above the fold to decrease above the fold
ACTION
render times
ITEM
There is one exception to the rule of keeping your CSS and JavaScript in external
files. If you are using JavaScript to render elements above the fold of your website,
and if the JavaScript code is small, then you should consider placing the script
inline.

By doing so can increase the above the fold render time of your website. This
allows the part that is first visible on your web page to load quicker. Google’s
PageSpeed Insights will tell you if your website can be better optimised to
improve above the fold render times.

 Consider using inline CSS for elements above the

ACTION fold to decrease above the fold render times
ITEM
If you’re using a pre-built theme, you should consider deregistering unused
JavaScript. By doing so reduces the amount of individual HTTP requests required
to render your website. The smaller amount of HTTP requests required, the faster
your website loads.

Well coded WordPress themes only download JavaScript on the pages that need
it. However, this isn’t always the case, particularly with older themes. If you are
unsure, then best check your website’s live source code to see which JavaScript
files your website is downloading. If you can see files that render functions
which are not used on your website, then you should deregister them using this
technique. Just make sure to test your website before committing your changes to
a live website.

 Avoid bloating your website with unused

JavaScript. Deregister unused JavaScript to
ACTION
increase performance
ITEM
Large JavaScript files can hurt the performance of your website. If you want to
enqueue a JavaScript library, then you should only include what functions you
will be using.

For example, let’s say you want to use the jQuery UI tabs & accordions on your
website. Common JavaScript libraries will often include script builders. These
allow you to compile your own library including only the two functions that
you intend to use. By including only what you need, you can avoid larger than
necessary JavaScript files. The smaller the file, the less time it takes to download
and render on your website.

 Only enqueue what you need from JavaScript

Libraries like jQuery UI. Use a wizard to compile
ACTION
only what you intend to use
ITEM
A typical website page loads its elements from top to bottom. With this said, you
should load all scripts in your website’s footer unless they need to be at the top of
your web page. This decreases page load times as your page content doesn’t need
to wait for your scripts to load before it can render.

However, there is one exception to this rule. If you are using JavaScript to render
functions that appear before your website’s content, load it in your website’s
header.

When initialising JavaScript, you should always do so through your website’s

functions.php file. The WordPress Codex details how to do this correctly.

 Increase page render times by loading scripts that

do not need to be initialised before page content in
ACTION
the site footer
ITEM
When writing jQuery functions, you should aim to write your jQuery objects as
a variable. This allows your website to call the variable once as opposed to many
times to complete the function. The reason why you should do this is each time
your website makes a jQuery request, it adds load to your website’s DOM. The
more load on your website’s DOM, the less it performs.

As an example, the function above in red requires 4 DOM lookups to trigger all
functions. The example in orange only requires 1 DOM lookup as the jQuery
object saves as a variable. The example in green shows a shorthanded version of
the example in orange. This example is smaller in file size, which makes it better
for performance.

 When writing jQuery objects, save them as

variables. That way, they can be cached so your site
ACTION
can load faster
ITEM
A fairly common problem with feature-rich WordPress themes is that they usually
use a lot of JavaScript. It’s fairly easy to enqueue a JavaScript file in your functions.
php file, however does the script need to run on all pages or just a few specific
ones?

For example, the code above shows two ways that you can enqueue the
‘magnificipopup’ script. The example in red loads the script across all pages on
your website, regardless if they are using the scripts functions or not. The example
in green uses checks to see if the shortcode that contains the function of the script
is being on the page first. If it is, then the script is loaded in. This way is more
beneficial to performance as the script only needs to be downloaded if it is being
used.

 Avoid loading scripts on pages that do not use

them. For WordPress sites, use checks in
ACTION
functions.php to solve this
ITEM
In general, it is better for performance to keep your CSS code separate to your
Javascript code. When you need to modify CSS via javascript, it is better to
manipulate Javascript variables containing CSS rather than inserting CSS directly
via your Javascript code. This allows the CSS to be cached, which is better for
performance.

The code in the top half of the images shows CSS written inline with the
Javascript variable. The better way of doing this is shown in the code example at
the bottom. Here, the CSS is added to the “h1” element by giving it a class, which
is faster to process.

 Use JavaScript to switch out predefined CSS classes

rather then writing them inline because it is faster
ACTION
to execute.
ITEM
Most modern mobile browsers use the device GPU to help render website
animations. Although you can create animations through JavaScript, CSS is the
better option for rendering position, scale, rotation & opacity animations. The
mobile GPU is used in rendering CSS animations. The mobile GPU does not get
used in rendering JavaScript animations. This helps to take processing load off
your viewer’s browser, which increases performance.

The exception to this rule is if you are wanting to create complex animations
beyond these four attributes. CSS is limited in the complexity of the animations
that it can support. In cases where complex animations are required, the only
option is to create the animations in JavaScript.

 Use CSS animation over JavaScript as it is less

resource intensive, particularly on mobile
ACTION
device GPUs
ITEM
jQuery is the most popular JavaScript library in use today. It can be found on over
60% of the world’s top 10,000 most visited websites. jQuery is a framework for
Javascript, so everything that jQuery can do, Javascript can do as well. Therefore,
jQuery is not always needed.

The general rule when working with JavaScript and jQuery is to code all functions
in JavaScript if possible. This is because JavaScript is native to most modern
browsers. So, if your jQuery code can function when written in JavaScript, you
will increase your website’s performance as the jQuery library doesn’t have to be
downloaded. If you are not sure if your jQuery functions can be replaced with
JavaScript code, check out the website You Might Not Need jQuery.

 Use JavaScript over jQuery where possible.

ACTION JavaScript generally performs better than jQuery
ITEM
If you’re developing a mobile web app, then you should consider using Zepto.
Being light-weight in nature and specially optimised for mobile devices, Zepto
can offer significant performance gains over jQuery for mobile web apps. The goal
of Zepto is to offer a leaner alternative to jQuery for the mobile web. With that
said, it may not be best suited to websites that are desktop orientated.

Using jQuery libaries outside of the default jQuery library that ships with
WordPress can lead to unpredictable results. With that said, it is best to test
throughly to catch any bugs should you choose to use Zepto with WordPress.

 For mobile web apps, consider using Zepto

over jQuery to increase performance: http://bit.
ACTION
ly/17AkPdc
ITEM
An easy way to improve your website’s performance is to compress your
JavaScript files. Compressing your JavaScript files removes any unnecessary
spaces from the file. This decreases the size of the file. There are many JavaScript
compression tools available online. We’ve found that Google’s Closure Compiler
creates the biggest file size reductions.

If you do choose to use Closure Compiler, make sure to test your compressed
JavaScript before you deploy it live. We’ve found that Closure Compiler can
over compress the JavaScript code in some cases. This can break the JavaScript
function on your website, causing problems for your users. Regardless,
compressing your JavaScript is an excellent way to increase your website’s
performance that is quick and easy to do.

 Compress your JS code using Closure Compiler to

reduce file size and decrease site load times: http://
ACTION
bit.ly/1BxSwtK
ITEM
When building a responsive website, you should use CSS media queries over
JavaScript device detection. The exception to this would be if additional
functionality needed e.g a mobile device opening a mobile app.

CSS media queries is lighter in weight and better performing option compared to
JavaScript. CSS media queries do not require additional HTTP requests to work,
making it the better preforming option of the two.

 Use CSS media-queries over JavaScript for device

detection. This will reduce JavaScript dependency
ACTION
= faster load times
ITEM
When a user accesses your website, each individual file downloads one by one
until the website completes loading. This process can be seen in Tip #8 as a
‘waterfall’. A file that is being asynchronously loaded means that it downloads
at the same time as your website’s synchronous files. This allows your website to
load faster as asynchronous files can start downloading immediately, rather then
having to wait for its turn to download in your website’s waterfall.

When you enqueue a library to your website, check to see if they have an option
for synchronous or asynchronous downloading. Unless you have specific
development requirements, you should always go with the asynchronous
downloading option.

 Avoid loading resources synchronously. Use

asynchronous loading wherever possible to speed
ACTION
up load times
ITEM
When working with child themes, you should avoid using the @import function
in your child theme’s CSS file. Instead, enqueue your files in your functions.php
file. You should do this because your website will need your child theme’s CSS file
to download first before it can download the @import file.

If the same file is enqueued within your functions.php file, it can download as
soon as your website begins to load. This removes the need to have your child
theme’s CSS file downloaded first.

The result is decreased load time of your website’s external files, which helps to
decrease the load times of your web pages.

 Avoid child themes @import. Instead, enqueue in

functions.php as this helps to download the CSS
ACTION
faster
ITEM
Modernizr is a great tool to use to make your front-end code compatible
with older browsers. However, most websites do not need all the features that
Modernizr comes with out of the box.

Instead of using the default version of Modernizr, use the builder to only call
on the functions you use. This helps to reduce the file size of Modernizr, which
results in the file loading faster.

 Compile your own Modernizr using http://bit.

ly/1AMJxkE so you only include the elements that
ACTION
you need
ITEM
A quick performance win is specifying the UTF8 character set in your website’s
header. By leaving the character set unspecified, the browser needs to spend extra
resources checking this.

By telling the browser what the character set is, it does not need to spend further
resources to complete this task. For WordPress websites, use the line: <?php (
bloginfo( ‘charset’ ) );?> at top of your header.php file. Although a small win, this
can help to increase your website’s performance.

 Use (bloginfo(‘charset’) in your WP header for a

small performance boost. Helps to reduce browser
ACTION
workload
ITEM
In the WordPress space, the common myth is that the more plugins your website
uses, the slower it will be. This isn’t true as each plugin requires a different
amount of resources to work. The P3 (Plugin Performance Profiler) WordPress
plugin tells you exactly how much resources each of your plugins are consuming.

P3 will give you an easy to understand breakdown on the performance impact

that your plugins are having on your website’s page load times. From here, you
can decide to replace the plugins that are having the biggest performance hit on
your website by more lighter weight versions. Or, if the plugin’s features are not
particularly useful to you, delete the plugin.

 Use P3 Performance Profiler to see the performance

impact of your plugins. Remove/replace ones with
ACTION
biggest impact
ITEM
Certain functions are better left to separate web applications than as WordPress
plugins installed in your website. For example, the plugin ‘Broken Link Checker’
is notorious for the amount of server load the plugin places on your websites
server. In fact, WP Engine has banned the plugin from being installed due to
performance penalties it creates.

The solution is to offload the function to a web application that isn’t hosted in the
same server that your website is. In the case of checking your website for broken
links, this exact function can be achieved with an online tool like Online Broken
Link Checker. Because the function is being processed on the web application’s
server and not your own, your website does not receive any performance
penalties as the function is being executed.

 Offload server intensive plugins e.g Broken Link

Checker to separate web apps that do not chew up
ACTION your site bandwidth
ITEM
The general rule for performance optimisation is to only keep what you need
for your website to function. If you have plugins installed, but not using their
functionality, remove them.

By doing so, your website will perform better as non-essential functions are not
taking away from your server’s resources. Additionally, your website will need less
maintenance and upkeep.

 Remove WordPress plugins that you are not using

on your site to save resources and make your site
ACTION easier to maintain
ITEM
It is best to keep simple functions hard-coded into your website rather than
include them as plugins. By having control over the code, you can ensure that the
basic functions are integrated using the best practices in writing
high-performance code. The exception to this is if you do not have the ability to
hard-code the function you are wanting to achieve on your website.

For plugins that deliver advanced functionality to your website, keep them as
plugins. This way, you can ensure that your website can remain scalable and
modular in nature.

 Hard-code basic one-off plugin functions e.g favicon

ACTION so there is no unnecessary/bloated code in your site
ITEM
The general rule to follow when managing plugins that you only use now
and then is to keep them disabled when they are not in use. This serves as a
precautionary step to ensure that plugins are not taking away unnecessary
resources from your web server. Plugins that are disabled will not request any
resources from your web server, aside from notifying you when an update is
released.

 Disable plugins that you use infrequently to ensure

they do not take up any unnecessary resources/slow
ACTION
your site down
ITEM
If you’ve ever opened up a plugin’s source file and seen code like the example
above, then you’re dealing with an encrypted plugin. Although it is not
recommended, plugin developers sometimes choose to encrypt their plugins
to protect their IP. By doing so brings performance penalties to websites using
plugins that contain encrypted code. The reason why is that encrypted code needs
to be de-encrypted before the function can work. This extra step reduces your
website’s performance compared to a plugin that is not encrypted. This is because
the de-encryption process does not need to happen before the function can work.

If you do come across a plugin that uses encrypted code, see if you can replace it
with a plugin that achieves the same function without encrypting its code.

 Avoid plugins that use encrypted code as they can

slow down your website’s speed. If unsure, ask
ACTION plugin author
ITEM
Plugins that serve related posts to your website viewers are typically found
on news & blogging websites. These types of plugins can bring significant
performance penalties, particularly the five plugins listed above. These five
plugins are also banned on WP Engine hosted websites due to the amount of
performance they take away from websites using them.

If you are using related post plugins, either consider removing them or replacing
them with the web services listed on tip #79.

 Avoid using related post plugins as these add a

high amount of load to your site’s server which
ACTION reduces performance
ITEM
If you want to serve related posts on your WordPress website, then you
should offload the function to a web service. As outlined in tip #73, offloading
functionality to web servers other than your own is better for performance.

The six web services listed above processes the related post functionality on their
own servers. By doing so, your website will not receive any negative performance
penalties from serving dynamic content through this method.

 Avoid using related post plugins. Offload this

feature to a separate web service to reduce the
ACTION
load on your server
ITEM
If your website is serving real-time feeds, then you can increase your website’s
performance by offloading the feeds to an external service. Google’s FeedBurner is
one of the most popular feed services. You can use Google FeedBurner to reduce
load off your web server by offloading your feeds to it. By doing so will help your
website to perform better.

You can follow the steps here on how to integrate FeedBurner into your
WordPress website.

 Offload feeds to an external host like FeedBurner

to reduce the load on your site’ server = better
ACTION
performance
ITEM
Trackbacks and pingbacks can be a useful feature for WordPress websites that
are producing a lot of content. If your WordPress website is not producing lots of
content, then you should consider turning off the function. You can do this from
within the WordPress Settings > Discussion menu. Disabling trackbacks and
pingbacks removes the need for your website to check and execute this function,
which helps to increase performance.

Additionally, if your website is receiving spammy trackbacks and pingbacks, then

you should consider disabling the function if it is not providing any value to you.

 Consider disabling pingbacks and trackbacks if

you’re not producing lots of content to boost
ACTION
performance
ITEM
Every WordPress website’s core and plugins should be updated as soon as the
stable update is released. This helps to reduce vulnerabilities that hackers and
robots can exploit to harm or even bring down your website. Also, keeping your
website up to date ensures that it can perform at its best.

The WordPress core team and most good plugin authors continue to remove
deprecations while optimising the scripts to increase performance. Keeping
your WordPress website up to date means you can take advantage of these
optimisations to help increase your website’s performance.

 Keep everything updated on your WP site - not just

for security but so you can take advantage of better
ACTION
optimised code
ITEM
HTTPS is a must have for websites that deal with sensitive data like credit card
details and account passwords. For pages in your website that do not hold or
process any sensitive data, HTTPS is not necessary. Pages secured by HTTPS
need to complete an extra encryption step for the page to load. This encryption
step increases page load time compared to if the page was not encrypted.

Thus, to decrease load time of your website’s pages, only apply HTTPS to pages
that need encryption.

 Avoid using HTTPS on areas that do not hold

sensitive data. This increases page speed by
ACTION
removing the encryption step
ITEM
For WordPress websites that are media heavy, lazy load is a great tool to decrease
page load times. Lazy Load only downloads content that is visible to your users,
rather then downloading all content on the page at once. This helps to decrease
page load times as only the content that needs to be visible is downloaded while
the rest is not. Lazy Load can also load scripts in the same manner.

If you decide to integrate Lazy Load to your WordPress website, then use
Unveil.js. As it is a more light-weight version of original Lazy Load, using
Unveil.js can further decrease your website’s load times.

 Media heavy website? Use lazy load to load

scripts and media only when it is visible to your
ACTION
site viewers
ITEM
Autoloading video can kill a website’s load times if the video file is not optimised.
Firefogg is a free FireFox extension that you can use to optimise your website’s
videos for better performance.

Depending on how you deploy your video on your website will determine what is
the best settings to optimise your video files. We’ve found that in general a bitrate
of 1000 is a good balance between performance and quality. Keep in mind that
the lower the bitrate and size of your video, the lower quality it will be. The best
way to find the right balance between quality and file size is to tweak the settings
until you are happy with the results.

 Optimise web video at around 1000kb/s with

ACTION Firefogg for faster load times
ITEM
Our general settings for WebM format videos in Firefogg. The size of the video
file is dependent on how you plan to apply the video on your website.
Our general settings for creating optimised Ogg format videos in Firefogg.
HandBrake is an excellent free desktop tool for transcoding and optimising video
for the web. Being more feature rich than Firefogg, you have greater control on
how you format your video files. The goal in optimising video is to find the right
balance between quality and file size.

Lower quality creates a smaller file which means it can load faster. However, you
do not what to have your video quality so low that it annoys your viewers and
cheapens the look of your website.

 Use HandBrake to easily optimise your web video

ACTION file quality for best performance/quality balance
ITEM
Our general settings for creating & optimising video files in HandBrake.
If your website uses audio, then optimise the bitrate to decrease load times by
using the free tool Audacity. Just like reducing the bitrate of video decreases
quality for the trade-off of decreasing file load times, the same rule applies for
Audio.

Audio files bitrate can reduce to 128 or 64 without any major losses to audio
quality. This is dependent on the quality of the audio gear used to record the file.

 Use Audacity as a free way to optimise web audio

files. 128 - 64kbr is a good balance between quality
ACTION
& performance
ITEM
Once you’ve optimised your video, you should host the videos on servers
other than your own. The reason why you would do this is to reduce load and
bandwidth on your own server.

Wistia is one of the many great video hosting services out there that works well
with WordPress websites. By offloading the bandwidth load to a server other than
the one hosting your website, you can increase performance of your website.

 Offload your video and large file hosting to services

ACTION like Wistia to reduce the load on your web server
ITEM
The WordPress “$ORDERBY = ‘RAND{}’; function is used to display content at
random. For example, a website that displays random blog posts on the homepage
each time you visit it is most likely using the “$ORDERBY = ‘RAND{}’; function.

The function is an intensive operation to complete, so much so that WP Engine

disables the function by default. If your using the “$ORDERBY = ‘RAND{}’;
function and your website’s performance is poor, then you should consider
removing the function.

 Be careful when using $orderby = ‘rand()’ as this is a

very resource intensive PHP function. Disable it if
ACTION
not needed
ITEM
Design is subjective in nature. Flat design (design which void of the heavy
gradient, bevel and shadow Web 2.0 look) has been gaining popularity across
the web for some years now. From a performance point of view, flat design is
simplistic and minimal nature. This means that it can often out perform designs
which contain lots of gradients and shadows as there is less weight in the front-
end code.

However, flat design is not a one size fits all design solution for every website.
All great web designers should understand the context of the design first before
deciding on which style of design best communicates the context of the subject.

 Consider using flat design principles as it is

generally less resource intensive compared to
ACTION
skeuomorphism
ITEM
Regardless of what design language or style you choose to work with, you should
always aim to keep the design consistent across your website. Keeping your design
consistent allows you to reuse CSS classes in a modular way (see tip #44) which
helps to reduce the file size of your CSS.

Additionally, keeping your design consistent across your website helps to create a
professional and cleaner look and feel. Mixing design styles together often results
in a confusing user-experience with low aesthetic appeal.

 Keep your design language consistent across your

site. This will help reduce the amount of different
ACTION
CSS elements
ITEM
Over time, your WordPress website picks up and holds on to a lot of unnecessary
junk. Spam comments, trashed posts, spam trackbacks and pingbacks all add
weight to your WordPress website’s database.

WP-Optimize solves this problem by cleaning up your website’s database to

remove any unnecessary junk. Think of it like changing the oil in your car.
WP-Optimize keeps your website running at its peak performance in the
background so you don’t have to worry about it.

 Periodically remove the performance-sapping junk

that builds up in your site’s WP database. Use
ACTION
WP-Optimize
ITEM
If you’re tweaking and changing your website, you should consider rewriting your
website’s code from scratch each year. It is easy to create code redundancies and
break the D.R.Y rule when you are adding in new code at different points in time.

To keep your website performing at its best as it evolves, sometimes the best thing
you can do is rewrite the code again. This way, you can write all the code while
factoring the best practices for performance. Considering the rate of evolution
in web design and just how fast a brand new website can start looking outdated,
overhauling your website’s design and code together each year is a great idea to
keep your website performing well.

 Review your site’s codebase annually if you have

made many changes. Consider a rewrite to make
ACTION
the code more efficient
ITEM
Most typical websites draw 80% of the total website traffic from only 20% of all
the pages in the website. For example, a conventional website would draw around
80% of the website’s total traffic from the home pages and services/product or
contact page.

If you do not have enough time to optimise all the pages in your website, then you
should focus the pages that draw 80% of your traffic. If you are unsure what these
pages are, check Behavior Flow from within your Google Analytics account.

 Prioritise in optimising the 20% of pages that pull

80% of your site’s traffic e.g the home page
ACTION
ITEM
Backwards compatibility to old versions of Internet Explorer has always been
one of the most painful jobs for any web designer to do. More advanced websites
often need many style sheets for different versions of Internet Explorer just so the
website can be backwards compatible.

If your website is not accessed on older browsers, then you should consider
dropping outdated browser support and focus on optimising your website for
modern browsers. You can see what browsers your website’s viewers are using
from your Google Analytics account. With new versions of Internet Explorer now
supporting automatic updates, and with the usage statistics of pre-IE9 browsers
decreasing, backwards compatibility to old browser versions will soon not be
necessary for most websites.

 Consider dropping support for outdated browsers

ACTION to reduce the overall file size of your website
ITEM
The Themeforest market place is the world’s largest marketplace for premium
WordPress themes. Although there are some excellent themes on the marketplace,
the majority of the top selling themes suffer from feature bloat. Generally
speaking, the themes that have the most features on market place tend to sell
better than focused themes. However, most WordPress websites use less than a
third of the features that the top selling themes offer.

With more features comes more scripts, more libraries, more plugins and more
code. When the majority of these features are not being used, bloated themes can
have a big impact on overall website performance. The solution is to deregister
and remove the features that you are not using (see tip #57), or build using a
lightweight framework so you can include only what you need.

 Avoid using bloated themes. Use a theme that only

ACTION contains the features you actually need
ITEM
It is quicker to get a website up and running if you use a pre-built WordPress
theme. Often these pre-built themes come with features that you do not end up
using. This can cause performance problems, particularly if the pre-built theme is
not well coded.

If you have the time, building your website from a lightweight framework is a
much superior alternative. This way, you can only include what features you
need and make sure that the code is kept tight and void of bloat. One of the best
WordPress Frameworks for raw performance is Genesis by StudioPress. Genesis
has been well-coded to include many of the performance tips outlined in this
book out of the box.

 Consider building your next WordPress site from a

lightweight, performance optimised framework
ACTION
like Genesis
ITEM
Using a lightweight framework to build your WordPress website from is a
great option to ensure your website can perform at its best. However, it is time
consuming to construct a website from nothing but a framework. If you’re
looking to use a theme that has been built from the ground up using these 99 tips,
then you should consider our own Trisense theme.

If you’re not a developer, but want a professional WordPress website that loads
fast, then you should check out Websites by Web3. Let us take care of all coding to
ensure that it can be built to perform from the ground up.

 Want a fast loading website, but have no time?

Check out how Web3 can help you: http://bit.
ACTION
ly/1wqYlXR
ITEM
At the end of the day, optimising a website for better performance is all about
making sacrifices. Sacrificing features, sacrificing media, sacrificing ease of
editing by compressing and combining code etc. Ultimately, it’s all about finding
the right balance between function and form.

I am confident that all these 99 tips can get your website to load in under 1
second. It’s been a lot of fun writing these tips down, and I hope that you can
apply them and reap the performance rewards. If you have any tips, feedback or
questions, please feel free to reach out to me on Twitter.

Let’s start optimising!

James Banks

 Congratulations on completing this ebook! If you

enjoyed it, please hit the tweet button on the right
ACTION
and share the love!
ITEM