Thursday, October 8, 2015

Speedup your WordPress site

INTRO: WHY SPEED MATTERS 


A faster site will lead to increased revenue, through a combination of improved user retention and better SEO results. 

Studies have been performed by many entities including Google, Bing and Yahoo, giving us conclusive evidence that users prefer fast sites. This preference is important enough that speed is now a relevant factor when Google ranks sites in their search results. 

WordPress provides some particular challenges when it comes to speed. WordPress is dynamic, meaning users are regularly contributing content and pages are always changing. For this reason we can not just cache everything and call it a day. We need to get creative. What follows is a comprehensive guide as to  how  to  speed  up  your  WordPress  site.  If  you  follow  everything  in this  guide you will see noticeable speed improvements right away. Have fun :)

1. Server

It  all  starts  at  the  server.  Many  of  the  methods  we’ll  be  recommending  depend on a good server setup.  

Imagine you have a slow computer. You can try optimizing it all day, but the most  impactful  thing you  can  do  is  simply  to  buy  a  faster  computer.  Same  with your  server.  There  is  no  getting around  it,  your  website  is  hosted  on  physical hardware and it is limited by the same constraints as a computer, including processor  speed,  memory,  and  other  factors.  If  you’re  using  cheap shared hosting, your  site  is  going  to  be  slow  no  matter  what  you  do.  If  you  move  your  WordPress site to a powerful, dedicated server, you will have fixed half of your speed issues with just this one change. 

So how do you choose a server company? Below are our recommendations, depending on your needs.

KnownHost 


KnownHost  offers  an  ideal  balance  of  speed,  price  and  ease  of  use,  and  has worked great hosting. They use managed virtual private servers (VPS) which offer the benefits of a full private server but at a substantially lower price, along with fantastic technical support and virtually 100% up
time in our experience.  


Rackspace 


Another  popular  option  is  Rackspace.  If  your  primary  concern  is  speed  over  all else,  and  you don’t  mind  a  somewhat  steep  learning  curve  to  get  there,  Rackspace is an ideal choice. You won’t get much out of the box - no phpMyAdmin, no cPanel, just an empty server that you need to configure. But what you do get is  an  incredible  infrastructure  that  will  scale  as  you  grow,  and will  be  super  fast right out the box. They have incredible support as well, both phone and live chat. 

WPEngine 


In many ways, WPEngine is the opposite of Rackspace. They don’t let you configure much, in fact their environment is quite restricted. However what they do offer is easy configuration and management. Anyone can figure out their interface, which is designed specifically to host WordPress sites. It’s reasonably fast and the support is good, and they have a terrific daily backup system. If you expect you will need to customize your server setup at all, this is not for you. But if you want a reliable server setup with minimal effort, and support that is specific to WordPress, this may be your best choice. 

2. Object Caching


Page Caching vs Object Caching

 

Due to the dynamic nature of WordPress, page caching of HTML is not possible as  it  will  cause content  that  is  supposed  to  be  updated  in  real-time  to  go  stale. However we can still cache the PHP that is used to assemble those pages via Object  Caching,  which  will  reduce  the  amount  of requests to your  server  and  lead to noticeable gains in performance. Object Caching is built into WordPress, you just need to enable it on your server.  

How to enable APC Object Cache


If you’re on shared hosting this will not be possible, as the change is set across the entire server. You’ll need to follow our advice in the Server section first. 

Once you have moved your site to a dedicated server, contact your web host and  request  that  they install  the  “APC”  caching  technology  on  your  server. APC stores the  cached content  in RAM, which  is  why  I  recommend at  least  2GB  of RAM for ideal server performance. Once your web host has confirmed that APC is  installed  and  working,  you  will  then  need  to  enable  it  for WordPress  with  a plugin.My recommended method is with the APC Object Cache Backend plugin: 
https://wordpress.org/plugins/apc/.

This  is  not  a  true  plugin,  but  rather  a “drop-in”  file.  As  such,  you  do  not  actually  activate  the  plugin. You  just  need  to copy the object-cache.php file directly into your /wp-content/ directory. To confirm  that  it’s  working,  you  can  type  this  into your  browser  while  logged  in  as  a WordPress admin:


It should show APC Object Cache as a drop-in plugin. You should begin seeing performance improvements.


3. Enable GZIP


Your website needs to send files to your visitors’ browsers, and  those  files  can sometimes  be large. Using  GZIP,  you  can compress  your web pages  and  assets by  as much as 70%,  resulting in noticeable speed gains during page load.

Enabling  GZIP  is simple.  You just need to contact your web host and request that they enable GZIP on your server. Now your web pages will download quickly as compressed files. To confirm GZIP is working correctly, enter your site’s address here: http://checkgzipcompression.com/


4. Content Delivery Network (CDN)


What is a CDN?


A content delivery network (CDN)  is  a  distributed  network  of  servers around the globe that serve your site’s assets, including images, stylesheets, and JavaScript files. You can  easily  sync WordPress to a  CDN so that your site assets are  automatically  offloaded to the  CDN.

Why use a CDN?


When  someone  loads  a  page from your website, the majority of  the browser  re-quests  are for content assets that are loading directly from your server,  and with  a  moderate amount of traffic they will  queue up  and slow down your site’s  per-formance.  Additionally, they have to be delivered from your server’s physical lo-cation to your visitor, and if your server is in Los Angeles and your visitor is in the Philippines for example, this will cause a delay. With a CDN your visitor may get most of your site’s files delivered from a server located in nearby Manila, result-ing in a noticeable speed improvement.

Setting up a CDN with WordPress


The first step is to purchase your CDN package. I recommend using MaxCDN as they are reliable, inexpensive, and easily integrate with several WordPress plug-ins. Some hosts such as Rackspace offer their own CDNs as well. Once you have correctly configured your CDN “zone” make sure to note down the CDN URL.

Next, download the plugin “CDN Linker” from Github (look for the  “Down-load ZIP” button):
https://github.com/wmark/CDN-Linker

Install and activate the plugin on your website.

Go to Settings > CDN Linker  in your WordPress dashboard. Then add your CDN URL that you noted earlier in the “CDN URL” field. If you’re using MaxCDN, it will look something like this:

http://yourzone.youraccount.netdna-cdn.com

Save  your  settings. Your site should now be loading all assets via  the CDN. To confirm, you can view your page source in a browser and  you should see links (like stylesheets and JavaScript files) using the new CDN URL structure.

5. Minify and Com-bine CSS


Your website is likely to be loading many CSS stylesheets, perhaps twenty or more. These come from your theme as well as the plugins you are using. Each stylesheet needs to be downloaded separately by your  browser, causing a no-ticeable speed impact. Additionally, the stylesheets contain a lot of empty white-space  which  contributes  to larger files sizes and more work for the browser to read through them.

Minifying is the process of removing all of the whitespace, leaving you with tiny compressed stylesheets. Then we can combine  all of your stylesheets, with the end result being just one compressed stylesheet for the entire website! This will lead to speed improvements, especially noticeable on mobile devices.

Better WordPress Minify


With Better WordPress Minify, it is very easy to automate the whole process of minifying and combining CSS files. First, install and activate Better WordPress Minify:


Then go to BWP Minify > General Options. Check the box for “Minify CSS files automatically?” and set “For cache buster, use” to the option “Cache folder’s last  modified time” so your compressed stylesheets get regenerated when you update any theme or plugin.

All of your stylesheets should be minified and combined now. To  confirm, you can view your page source in a browser and you should see every stylesheet combined into one file. Look for the extension “.CSS”. Click to view the file, and you will see all whitespace has been removed.

6. Minify and Combine Javascript


If you read the previous section about CSS, this will be very familiar.

Your website is likely to be loading many JavaScript files, perhaps twenty or more.  These  come from  your  theme  as  well  as  the  plugins  you  are  using.  Each script needs to be downloaded separately by your browser, causing a noticeable speed impact. Additionally, the scripts contain a lot of empty whitespace which contributes  to  larger  files  sizes  and  more  work  for  the  browser  to read  through them.

Minifying is the process of removing all of the whitespace, leaving you with tiny  compressed Javascript  files.  Then  we  can  combine all  of  your  scripts,  with the  end  result  being  just  one compressed Javascript  file  for  the  entire  website! This will lead to speed improvements, especially noticeable on mobile devices. 

Better WordPress Minify


With  Better  WordPress  Minify,  it  is  very  easy  to  automate  the  whole  process  of minifying and  combining  JavaScript  files.  First,  install  and  activate  Better  Word-Press Minify:


Then go to BWP Minify > General Options. Check the box for “Minify JS files automatically?” and set “For cache buster, use” to the option “Cache folder’s last modified  time”  so  your  compressed scripts  get  regenerated  when  you  update any theme or plugin. All of your Javascript files should be minified and combined now. To confirm, you  can  view  your  page  source  in  a  browser  and you  should  see  every  script combined into one file. Look for the extension “.js”. Click to view the file, and you will see all whitespace has been removed.

7. Compress site images


One thing often overlooked is the size of images uploaded into your media directory, both by admins and the members of your community. If a user uploads a 1GB  image  to  your  site,  whenever someone  views  that  page  they  will  have  to download a 1GB file. And if you have a page with 10 images like this, the page size will get enormous. This can lead to considerable speed delays, especially for mobile devices and slower internet connections.

TinyPNG


The solution we recommend is TinyPNG: https://tinypng.com/Despite the name, it will actually compress both PNG and JPG file types, often  by  70%  or  more.  Even  if  you  compress  your images  first  in  Photoshop,  you will still see noticeable gains by running it through TinyPNG, with virtually no loss in quality.

You can manually upload any image to the service and it will output a com-pressed version for you, but the real magic is in their fantastic WordPress plugin:


The  plugin  will  retroactively  compress  your  site’s  entire  media  library,  and will  then  automatically  compress  every  new  image  that  is  uploaded  into  it.  The catch? You have to pay for the service. The first 500 images per month are free, the next 9,500 are at $0.009 per image, and after that it’s $0.002 per image. Sign up for your API here:

8. Deactivate slow plugins


The WordPress ecosystem is enormous and it can be tempting to run every plugin  that  looks interesting.  But  this  can  come  at  a  cost  as  some  plugins  will  slow down your site. Every plugin is adding more code that must be executed when you load a page.

P3 Plugin Profiler


Often times it just one plugin, or maybe a couple of plugins that are causing your site  to  slow  down. You  will  need  to  diagnose  the  situation  to  figure  out  what  is causing  the  problem. A  fast method  is  just  to  disable  all  plugins,  and  re-enable them one by one until you find an obvious slowdown. However a more sophisticated solution exists. We recommend using the plugin “P3 Plugin Profiler” avail-able here:


This plugin creates a profile of your plugins’ performance by measuring their impact on your site's load time. Using this, you can narrow down which specific plugins are causing slow load times and remove them. Go to Tools > P3 Plugin Profiler and click “Scan Now”.

9. Clean up your database


Over time your database can grow to be full of redundant and unused content, which can lead slow PHP queries during page loads. It is possible to maintain a cleaner database using a plugin, which can lead to faster load times both on the front-end and in the WordPress dashboard.

WP Optimize


We  recommend  using  the  plugin  “WP  Optimize”  available  here: 


This  plugin  will  clean  up  your  database  in  various  ways.  For  example,  every time  you  edit  a  post WordPress  saves  your  edit  as  a  revision.  If  on  average  you edit  each  post  10  times,  and  your  site  has  2000  posts,  you  may  actually  have 20,000 post revisions in your database. This plugin will remove all of the stale re-visions resulting in a dramatically smaller and more efficient database. It will per-form other various scheduled tasks as well.

10. Test, Test, Test


It’s important to test your site speed before and after implementing changes, so you know you’re having a positive impact and not just relying on anecdotal evidence. There are two fantastic, free web tools that you can use to test your site.

Google Page Speed Insights


For figuring out what to optimize, we recommend using Google PagenSpeed In-sights,   available   here: 


Enter your page URL and click “Analyze” and it will score your site and provide  suggestions  to speed  it  up.  If  you’ve  followed  the  rest  of  this  guide,  you have already implemented many of the most important suggestions.

Pingdom Website Speed Test


For  determining  your  site’s  actual  page  load  times,  we  recommend  using  the Pingdom Website Speed Test available here: 


Enter  your  page  URL  and  click  “Test  Now”  and  it  will  display  the  load  time along with a visual waterfall showing which elements of your site are taking the most time to load. There may be a specific resource or two that are contributing to slow load times.

Monday, December 22, 2014

Adding a Scroll to Top button

Scroll-to-top button is a very important part of a website. It prevents users from scrolling once they go to the bottom and want to go to the top. Now-a-days many themes provides this functionality. But if your theme does not provide this functionality then you need to go through the document and add the following codes so that you can add a scroll-to-top button in your site.

Friday, December 19, 2014

Show Sidebar at the top of Content in Mobile Devices

If you are using a Responsive theme, then you must be familiar with the stacked layout of your theme in mobile devices starting from iPad and other small devices than that. In smaller devices the Content part displays full width below your header and then the sidebar below that.

Friday, November 28, 2014

Display Category Description in Theme

This is a least used WordPress function. It is called Category Description. It is not very popular in themes. Most of themes also don't even support that. Category Description means you can add some details/description of your category in the category page. So that when some one visits your category page, they will see the description at the top of your category page before the category posts. By default most themes does not support this feature. So that when you visit the category page, you just see the posts in that category. Not the descriptions.

Monday, November 17, 2014

Adding Featured Image

Featured image is a measured thing in your site for representing your post in a blog page, or any excerpt related things. So it is an important task to add Featured image in your posts to make it more attractive.