Optimize WordPress Speed Ebook PDF

Download as pdf or txt
Download as pdf or txt
You are on page 1of 21

SPEED MATTERS:

21 Expert Tips to
an Ultra-Fast
WordPress Website
WHY DOES SITE SPEED
MATTER?

There is much research that indisputably shows that the loading


speed of a website is really important. In an age where new tech-
nologies appear every day, where the speed of computers and
INTRO
the Internet increases greatly with each new innovation that
becomes widely used, the attention span of the visitor is much
shorter than it used to be a few years ago.

As a webmaster, you have only a few


precious seconds to grab and retain SSPPE
your visitors attention and you ED
D
shouldnt waste those seconds on
loading.It doesnt matter if you sell
goods, oer services or have a simple
blog. If your website is slow, you will be
losing trac, visitors and possibly
money. Generally, if your website takes
more than a second to load - its slow
and needs optimizing.

At SiteGround, we have spent a lot of time developing a platform


that optimizes speed and applies performance enhancing technol-
ogies specically for our WordPress customers. Although having a
web host that uses the latest hardware and speed enhancing tech-
nologies is essential to your site performance, it is not the only
thing. There are several other tools and techniques you can use
Why Site Speed Matters?

and apply to improve the speed of your WordPress website and


wed like to share them with you.

2
1
IDENTIFY AND
PRIORITIZE
ISSUES
3
BE N CH MARK
The rst thing you should do is nd out if you actually have a problem. The easiest way to
do so is to use benchmark tests. There are some free tools such as:

GTMetrix (https://gtmetrix.com)

If you perform a benchmark test on your site using GTmetrix, you


get results from both the Google PageSpeed test and Yahoo Slow
test in a single report. The results are sorted in order of severity.

Pingdom Tools (https://tools.pingdom.com)

The Pingdom Tool displays results in several tabs, but two of


them are the most important. The Waterfall, which shows the site
loading time and how much time each resource takes and the
Performance Grade tab, which gives you recommendations on
how to improve, similar to GTMetrix.

There are many other tools out there and generally if you have the time, the more tests you
Identify and Prioritize Problems

perform on your site the better. However, these two tools are usually sucient to get a
clear picture about how your website is performing in terms of speed.

Pro Tip: Even though most of the benchmarking tools will give you a grade, dont go
too far chasing it. If your website loads in under one second, youve done the biggest
part of the job.

4
CO M MON ISSUES
If the benchmark tests show you have an issue with your site
speed, the next step is to identify the actual blockers. Although
every website is dierent and has its own set of speed issues,
some problems are very common and its safe to start with them:

Too many posts on the front page


Too many social and sharing plugins and widgets
Too many external fonts
Bloated themes with too many features
Large and unoptimized images

PR I ORIT IZE THE I SSUES


Your research and analysis of the causes of slowness may result in
a very long list of things you could do. But you need to prioritize
that list. Fixing some of these problems may be time consuming,
but will not result in major improvements in speed. There are two
things that you should consider when prioritizing your xes:

How dicult will it be to x the issue?


What eect will resolving the issue have on your site?

You can use the answers to these questions in order to create a


list of optimizations starting from those that will have the most
Identify and Prioritize Problems

signicant impact for the time spent.

5
2
PAGE SIZE &
CONTENT
OPTIMIZATIONS
6
1 . R EDUCE T HE NUM BE R OF P OS TS
S H OWN ON YOUR I N D E X PAG E

Decreasing the number of posts shown on your homepage can


be easily done from the WordPress administration panel. Go to:

Settings -> Reading Settings -> Blog pages show at most

Then, change the Blog pages show at most value to a lower


number.

Alternatively, you can use a plugin like YITH Innite Scrolling. It


will dynamically show more posts when your users scroll down
near the end of your page, similar to the way Facebook shows
more posts when youre scrolling.

2 . SPLIT LONG POS TS ON YOU R IND E X PAGE


If your site tends to rely on long posts, you may want to split them
Page Size & Content Optimizations

into pages using the <!--nextpage--> tag within the post content.
By doing this, you will see a pagination under the page or posts
and your users will be able to navigate through them by clicking
on the next pages.

This will split one big and slow page into several faster ones.

7
3 . R EPLACE SLI DER WITH M U LTIP L E IM AGE S
WITH ONE STAT I C I MAG E

Sliders usually use a lot of JavaScript to operate. Furthermore, not


all of the plugins that enable the slider functionality on WordPress
sites are written in light and optimized code. Last but not least,
sliders arent particularly user-friendly on mobile devices. So, if
your design allows it, simply replace your slider with a single static
image.

However, if you really need and want a slider, I recommend using


Soliloquy. It comes in a free and a professional version, which
includes more features. This plugin renders a fast and lightweight
slider that has everything most people would need from a slider
plugin. Another good solution is the Meta Slider plugin which is
another free and well-written extension.

4 . USE APPROPRI AT E IM AG E S IZ E S
Images are an essential part of a website and may need some
time to be transferred from the server while the site is loading.

If you want to display an image 300x300 pixels, dont upload a


1024x1024 pixels image and then set it to be shown smaller with
HTML or CSS.

5 . OPTIMI ZE I MAG E S IZ E WITH OU T


DA M AGI NG QUALI T Y
Page Size & Content Optimizations

I recommend using a free plugin called EWWW Image Optimizer.


It optimizes the le size of your images without damaging their
quality and strips them o of all the unnecessary data that your
camera saves when you take a photograph (e.g. GPS location of the
photo, make and model of the camera used).

8
Even if the image le is reduced by just a few KBs, when you
combine all the images on one page, usually the performance
gain is signicant.

6. R EDUCE T HE USAG E OF E XTE RNA L FON T S


Each font that you use from Google Free Fonts or another similar
service has multiple variations, weight (300, 400, 500, 700),
encoding (Latin, Cyrillic), style and so on.

Check your website and include only the font variation that youre
actually using.

Furthermore, if youre loading a font for a small piece of text


somewhere on your site, I recommend compromising on the
design and simply using a font you already have on other pages.

7. M A NAG E T HE VOLU M E OF C OM M E NTS


O N YO U R SI T E

If you get a lot of comments, this may be slowing your site in two
ways. First - this makes your page more dynamic (if you have
enabled caching, it has to be cleared more often) and second -
each comment adds to the size of your page and HTML output.

In such cases, I recommend replacing the default WordPress


comment system with a plugin called Epoch. It will replace the
default way WordPress handles comments with a more optimized
code that can really speed up your site especially if you get a lot
Page Size & Content Optimizations

of comments.

Disqus is also an option, but its a third party service that relies
on a plugin to replace your default comment system with theirs. It
will ooad the comments from your site, but they will no longer
be stored on your server.

9
8 . E NA BLE G ZI P CO M P RE SS ION
FO R YO UR PAGES

With gZIP compression enabled, the nal HTML output of your


site and some of the static resources will be compressed before
being transmitted to your visitor. Then, your visitors browser
decompresses the content before rendering. Its much faster to
compress and decompress this content than to transfer it with-
out compression.

Enabling gZIP compression is very easy and requires almost no


eort. Simply add this code to the .htaccess le in your Word-
Press main folder:

AddOutputFilterByType DEFLATE text/plain


AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

GZIP COMPRESSION
gZIP

Transfer Compressed Files Decompress


Page Size & Content Optimizations

&view

Server Visitor

gZip decompresses content before rendering, making the transfer faster.

10
9 . M INIF Y AND COMBIN E JS A ND C SS F IL ES
Minication and combination are two techniques with one pur-
pose - to reduce the size and number of JavaScript and CSS les
that your site loads. Minication strips all unnecessary symbols by
removing precious bites from being loaded every time you
request an URL.

Combination on the other hand, combines multiple JavaScript


and CSS les into one. This reduces the number of requests your
site makes. There are a few plugins that do this really well. Either
WP Rocket, a premium option or WP Super Minify, a good free
plugin, can do the job.

1 0. E NABLE CACHI N G

Caching is a great technology that saves the outcome of dierent


operations your site has to perform in order to produce your nal
content. It then serves this ready product to the next visitor of
your site. With a good caching solution enabled and functioning,
your site will be as fast as a static page until you make a change.
When this occurs, the page will load dynamically for the rst
visitor after the modication. Then, the cache will be refreshed
and the next time it will load the much faster, cached version of
the page.

The easiest way to cache your site is through a plugin. This saves
the cached content on the servers hard disk and signicantly
improves site performance since your content wont be dynami-
cally loaded every time. WP Rocket is a great premium option, or
if thats outside your budget, try WP Super Cache.
Page Size & Content Optimizations

Further down in the book Ill talk about caching as a part of the
services your hosting provider can oer. When caching is enabled
at the server level, the content gets saved not on the hard disk,
but in the server RAM. This makes the site performance gains
much greater since reading from the memory is faster than
reading from the disc.

11
3
THEME &
PLUGINS
OPTIMIZATIONS
Theme & Plugins Optimizations

Both themes and plugins are essential to the speed of your site since they
are basically pieces of code that your site executes when it gets accessed.
That code often needs optimizations as well.
12
1 1. SE LECT A REPU TA BL E TH E M E F ROM
A SOLID PROVI DER

When choosing a theme, look for one either in the WordPress


repository, or if youre after a premium theme, look for a reputa-
ble company thats well known in the WordPress community.

Every hour you spend researching your theme provider and the
theme itself will save you days later on when you invest time and
money in your site and add all your content. Read reviews for the
themes, try getting some actual feedback from users, check
whether the company is trusted in the WordPress community.
Dont trust a theme provided by an unknown designer that does
not respond to his/her customers.

Its important to have a well-written theme because the quality of


the theme code aects every part of your site. For example, some
themes have a plugin functionality and added features such as
relative posts under your normal posts. Such functionality often
causes slow loading times because of the way queries to the
MySQL database are structured. In short, you dont have to be a
good developer to have a good site, but make sure your theme is
written by a good one.

1 2. AVO ID BLOAT ED TH E M E S
When youre looking for a theme for your website, you will surely
stumble upon themes that claim they can be used for virtually
any kind of website. Many of these are full of features, sliders,
carousels, etc. All of these features require JavaScript and CSS
resources to work and if youre not using them, youre simply
wasting resources.
Theme & Plugins Optimizations

Functionalities such as carousels and sliders should not be part


of your theme. You can always add them using a plugin later on
when you want them to be loaded. So, pick a theme that has the
main functionality you need without tons of additional features.

13
13 . A LWAYS USE A C H IL D TH E M E WH E N
C R EATING YOUR SI TE

WordPress updates are released often and many of them include


performance optimizations. Themes are harder to update, but
the good ones often get new versions with numerous updates.
Using a child theme allows you to keep the parent theme
up-to-date, while keeping all your customizations intact. Its easy
to set a child theme, just follow the instructions on Word-
Press.org.

14 . OPTIMI ZE FOR M OBIL E D E V IC E S

Every year more and more trac comes from mobile devices.
Tablets and smartphones are becoming even more popular for
browsing than standard desktop computers. Thats why, its
important to make sure your site works as fast as possible on
such devices.

Usually, when people browse your page on their mobile phone,


they are on 2G, 3G or LTE, which is generally a slower connection
than the one they have at home. Thats why its good practice to
show only what users need to see on mobile, rather than a
shrunken version of your pages. Here are a few steps for optimi-
zing your mobile site:

Test your pages with the Google Mobile-Friendly Test which will
1 give you information if a certain part of your page is not well
optimized for mobile.

Always select a theme thats either mobile-rst or has a native


Theme & Plugins Optimizations

2 mobile version. When you run tests for your website, make sure
you test the mobile version as well.

If your theme doesnt have a mobile version, consider using a plugin


3 such as WP Touch that will generate a mobile version of your page.
However, having a native mobile version is always preferable.

14
1 5. WHEN USI NG I C ONS , U S E A N IC ON FO N T

Icon-like images have become a trend in the past few years. If you
want to use such images, try utilizing an icon font rather than
separate images. Genericond is a great plugin that will help.
With it, you can add vector icons as if they were normal alphabet
symbols.

1 6. DONT OVERLAP F U NCTIONA L ITY


WITH PLUGI NS

If a plugin includes several functions, make sure you use most of


them. Dont install another plugin if one of your active plugins can
already do the job.

For example, if youre using the Yoast SEO plugin and you want to
have a Google XML Sitemap, just enable this functionality in the
plugin settings page instead of adding another plugin, even
though there are dozens available in the plugin repository.

1 7. A LWAYS K EEP YOU R P LU G IN S U P -TO-DAT E

Most of the updates in plugins either oer security patches, new


features, bug xes, speed improvements or a combination of the
above.

In addition, there are new features, functions, etc. constantly


being introduced with WordPress core updates. A lot of them are
designed to allow plugins to operate better and faster. By keeping
Theme & Plugins Optimizations

your plugins updated, you will get all the performance improve-
ments from the newest release.

Keeping your plugins up-to-date will allow you to use more recent
PHP versions including PHP7, which gives your site a huge perfor-
mance boost.

15
If youre not using a plugin, delete it. There is no need to keep
them on your account. Its good security practice and one less
thing to slow down your back-end.

18 . CLE AN UP PLUGIN OP TION S F ROM


YOUR DATABASE

Some plugins leave options and settings data in your database


after you delete them. To get rid of that garbage, use a plugin
called Garbage Collector.

Most plugins dont bother cleaning your database after youve


uninstalled them. They delete the plugin les, but the tables with
dierent settings theyve been utilizing, remain. This plugin will
identify the options that are not being used by any plugin and
allow you to remove them. Even though thats a relatively safe
operation, I recommend backing up your database before erasing
any data.

Theme & Plugins Optimizations

16
INTRO

4
SERVER &
HOSTING
OPTIMIZATIONS
17
1 9. TA KE ADVANTAG E OF S E RV E R
L EV E L CACHI NG

WordPress specialized hosting providers often provide some


form of caching. At SiteGround, we have implemented NGINX as a
reverse proxy and developed a special WordPress plugin called
SG CachePress. It saves the outcome of all PHP operations,
database queries, etc. in the server RAM and then when another
visitor opens the same page, it serves the content from the
memory without even reaching the web server.

You can easily enable server-level caching from your control


panel, giving you a huge performance improvement. Depending
on the website, your loading time can go from 2-3 seconds to 0.5
seconds! Furthermore, using such a caching service will increase
the amount of trac you can handle on your account. A test with
a default WordPress installation on the same SiteGround hosting
account shows amazing results:

WITHOUT WITH
SUPERCACHER SUPERCACHER

26.3K HITS 207.6 HITS


for 2 minutes with 50 for 2 minutes with 500
concurrent users concurrent users

Needless to say, thats a huge peak in trac thats handled without


problems mostly because of the caching system running on the
server.

For websites with big databases, you can also implement object
Server & Hosting Optimizations

caching like Memcached or Redis. These are services that your hos-
ting provider must install on their server, and provide you with the
ability to use them with your application. For example, at SiteGround
we provide Memcached as part of our WordPress performance
services, that can be activated with a single click.

18
20 . US E A CDN

If you have visitors from dierent geographical regions, its a good


idea to use a CDN service such as Key CDN , Max CDN or
CloudFlare. CDN providers essentially clone your website
amongst multiple host nodes. Then, when a visitor requests a
URL, it gets served from the closest host node rather than from
the central server. SiteGround oers free CloudFlare integration
for our customers, but you can enable any other CDN service of
your choice.

21 . US E SSL AND U TIL IZ E H TTP /2

SSL protects your visitors and customers by encrypting all the


information travelling between browser and server, ensuring
extra security for your users and their data. It is essential for
eCommerce sites and those handling sensitive data, and strongly
recommended for all websites following recent developments on
the web. Previously, SSL certication was believed to slow down
your website. Not any more! If you have a server that supports
HTTP/2, and a working SSL certicate, your trac will be going
through HTTP/2.

MULTIPLEXING

HTTP 1.1 jquery.js jquery.js Server

example.css example.css

image.png image.png

3 TCP connections
Server & Hosting Optimizations

HTTP/2 jquery.js jquery.js Server

example.css example.css

image.png image.png
1 TCP connection

19
The HTTP/2 protocol is much faster and allows the browser to
make multiple simultaneous requests for resources to the server,
which results in faster and safer sites. Learn more.

If youre worried about the cost of an SSL certicate, there is a


free solution called Lets Encrypt. With it you can maintain the
security of your websites without compromising on speed.
Learn more.

CONCLUSION
Optimizing for speed is a continuous and important
part of building and maintaining your WordPress site.
SUMMARY Without optimization, you risk paying more, losing
visitors and conversions and even damaging your
brand and reputation.

By following the above steps, many of which can be


implemented without a deep level of technical exper-
tise, you will be well on your way to ensuring an opti-
mal website experience for all your visitors.
Server & Hosting Optimizations

Learn more about WordPress web hosting engineered for speed


www.siteground.com/wordpress-hosting.htm

20
A B O U T T H E AU T H OR

Hristo has been working for SiteGround as a WordPress expert for


more than eight years now. He's done it all: supported WordPress
clients, built websites, designed WordPress themes. In addition to that
he's author of many online tutorials and guides about WordPress.

Hes been fortunate to have his passion for all things WordPress and
his job overlap at SiteGround, where he develops and implements
various in-house performance boost solutions to help make Word-
Press websites faster and more secure.

facebook.com/siteground
twitter.com/siteground

About the Author

21

You might also like