Tag Archives: optimization

Optimize WordPress for Speed – In 5 simple steps

Improving the load time for a wordpress blog has lots of benefits – good user experience (faster page loads also results in more pageviews), better rankings in search engines (SEO), reduced cost (due to reduction in resource (RAM, CPU, cycles and bandwidth) usage) etc.

So, if you run a wordpress blog/website that needs a little optimization you should follow this guide. But you need root access to your server. If you’re on a shared server, then first things you should do is move to a VPS; it’s cheap, faster and more secure and you also get full control over the server environment.

I’m using Digital Ocean for this blog and I’m pretty happy with the performance (read my review on digital ocean and the article about setting up wordpress on vps server). They’ve plan starting at $5/mo, cheaper than most of the shared hosting providers. Signup using my referral link and get 2 months of free hosting – $10 credit to give it a try.

speed up wordpress

Step 1. Enable Caching

Caching static resources such as images, css, js etc on the browser helps in reducing page load time on subsequent page visits.You can enable browser caching either using a plugin or manually. If you’re using Apache, then you can skip this step as Hyper Cache will do that for you (using htaccess config).

Caching static content (browser)
Login to your server(over ssh) and type (I assume you’re using Ubuntu or any debian derivative for OS with nginx as the web server, otherwise change command accordingly) :

sudo nano /etc/nginx/sites-available/site.conf

Add these lines to enable browser caching with nginx.

Save the file (Ctrl x and y) and reload the nginx server to apply above configuration.

sudo service nginx reload

PHP caching If you’re using lots of plugin then the php code will take lots of time and resources to execute, that means server response time will be high (not a good thing). So, caching php code means – the server will send cached html instead of generating it on every single request (which is lot faster). As a result, the server response time (as well as TTFB (Time to First Byte)) will go down (that means faster page load, even on first visit). To enable php caching there are lots of ways, the most simple way is to use HyperCache plugin. (Disable browser caching or compression if you’ve already done that manually with nginx) Download HyperCache plugin for wordpress and enable/activate it. (you can do it from wordpress dashboard or by manually extracting the file on server)

Step 2. Enable Compression

Sending compressed data over the network means faster download time for pages, plus you’ll save bandwidth for server and user as well. All modern browser supports compression, so there is no reason why you shouldn’t be using it. SSH into to the server and type :

sudo nano /etc/nginx/nginx.conf

And add these lines to nginx config. (you may want to tweak few variables like compression level etc depending on your need, if you’re not sure, then just go with the default value)

Save the file (Ctrl x and y) and reload the nginx server to apply above configuration.

sudo service nginx reload

Step 3. Move JS to Footer

By default, most of the WordPress themes load javascript files in header and it causes render blocking issue. The browser will not start rendering the page until all the javascript files are downloaded. Moving those js files (jquery etc) to bottom of the page (before body tag) will have good impact on page loading time, especially if you use lots of js plugins.

To move the javascript to footer, simply download and install this plugin and clear the cache from wordpress dashboard -> Settings -> Hyper Cache page.

Step 4. Use CDN for jQuery

Using CDN for jquery has many advantages. It reduces load/bandwidth on your server, low latency for users (since the jquery will be downloaded from the CDN end point near to your user, that means faster download) and lots of other people use it, So, it may be already cached in user’s browser (best case). First you need to find out the jquery version you are using, so you can specify exact version from below.

  • For jquery : Google CDN
  • For jQuery migrate :  jQuery CDN

To use above CDN, just add these lines to your theme’s functions.php (at the end) and clear the cache (if you’re using any caching). Don’t forget to correct jquery version if required. (you can edit it using wordpress dashboard -> Appearances -> Editor but make sure you’ve already created a backup for theme files, in case anything goes wrong.)

Step 5. Image Optimization

Optimizing images is important because it’s usually the most heavy static resource on a web page. So, if you use lots of images in your blog pages/articles, then you should :

  • Optimize images before upload (use an online tool like this one : https://tinyjpg.com/). You can also use some plugins like this one. (BTW, I haven’t used them but it seems good)
  • Avoid scaling/resizing a big bulky image after page load. Scale images to the required size before you upload them or use this plugin – Imsanity
  • And you can also use imgur or Dropbox to host your images. (it will act as CDN)

Batch png Optimizer for Ubuntu/Linux

PNG (Portable Network Graphics) is one of the most popular image format used over the web – most of the graphics designers uses png format for designing logo of a website or in computer artwork (because PNG is more suitable for computer generated images). Optimizing image is a good practice in modern web development/work because it will allow the pages to load much faster due to reduced image size. Google also recommends all web masters to use optimized images for faster loading of pages and you may already know that SPEED is one of the most important thing to consider while designing a website or a web application.

Now, you understand the importance of optimize image – but there should be a balance between the quality and the size of an image. Loss-less compression is what most people prefer while compressing/optimizing an image. On Linux based operating systems such as Ubuntu, Linux Mint, Fedora, OpenSuse, PCLinuxOS etc you can also use GIMP with save for web plugin to optimize png images (it also supports other popular image formats such as JPG, GIF etc).

GIMP (with image optimizer plugin) is good when you have few image but what you will do if you want to optimize hundreds of png files because because it doesn’t support batch optimization. That’s where the OptiPNG comes in, a great tool to optimize PNG image.


OptiPNG : Advanced PNG optimizer

OptiPNG is a an open source and cross-platform image compression/optimization tool. It supports batch processing i.e you can optimize bulk of png files in one simple command. It is very powerful application, as it provides you a lot of options such as compression level (1-7) where 1 is minimum and 7 is the maximum compression level. Page Speed (by Google Inc) – one of the most popular website optimization plugin/tool, uses OptiPNG for optimizing png files.

How to install OptiPNG

Ubuntu (11.10/12.04/12.10.. or Linux Mint, it should work with any Debian based distributions) users can install it by executing one simple command from terminal (Ctrl+Alt+t) –

sudo apt-get install optipng

Other user can download it from the official website. Primarily it’s a command line tool but front end for various platforms are also available, pretty useful if you don’t want to get your hands dirty with Terminal.

Optimizing Images using OptiPNG

To optimize image you can just give the file name as argument or specify compression level and other options. Just type optipng at terminal to see the help and options available for this tool.

For single image

optipng file_name.png

it will optimize the image and overrite the existing one, with default speed and compression level.

For Higher Compression (obviously the speed will decrease)

optipng -o7 file_name.png

Optimizing all png images of a directory (at higher compression level 7)

cd path_to_image_directory
optipng -o7 *.png
gimp save for web-ubuntu

gimp ‘save for web’ plugin : Image optimization on Ubuntu

The aim of this post is to explain you how to install gimp save for web plugin on ubuntu 9.04/9.10/10.04/10.10.After reading this post you can easily optimize or compress images in different formats – jpg,png and gif by using GIMP(GNU Image Manipulation Program).GIMP is the most popular open source and free image editor;used by common users as well as by web developers.Due to exponential increase of web it’s necessary(not always) to optimize images for less bandwidth consumption and faster page load(This factor is very important if you are a blogger or web developer).

gimp save for web-ubuntu

Install save for web plugin in GIMP

#1. I assume that,you have already installed gimp on your ubuntu.If this is not the case then first install gimp(if you don’t know how to install gimp,then go through the link given below and come back again here).
how to install gimp on ubuntu

#2. Then Open Synaptic package manager and search for ‘gimp plugin registry’ then select the package by checking the box.This package contains extra plugins for gimp along with the save for web plugin.

#3. Then click on Apply to install it..wait until the installation is complete.

#4. Now, open any images with gimp and click on File->Save for Web;then choose the o/p file type(extension i.e jpg(Recommended for natural && photographic images),png(animation or computer generated images) or gif),quality-size settings(adjust according to your need,85 is default for jpg,you may increase it little but keep it less than 95),crop the images…after that save it.

#5. End of the FUN!!