Tips for a Faster-Loading Site
If there is anything that can create a frustrating user experience faster than ugly graphics or automated sound, it is a slow-loading site. You would think that waiting five seconds or so would not be that bad. However, though patience may still be a virtue, it isn’t one for the web. Users want to see your site now, not five or ten seconds from now.
So what do you need to do to speed up your site? Here are a few helpful tips to consider:
What should you do if you have already reduced the number of plugins you are using? Try Gzip compression. This will reduce the amount of browser HTTP responses. Here is an example of some compression code to add to your site (via the .htaccess):
There are a few compression plugins that can be used, but as we have already stated, why use a plugin when you do not have to?
One final tip: keep your CSS files at the top of the page and add the JavaScript (JS) at the bottom of the page. The CSS at the top of the page lets users see your page load visibly. Keeping the JS at the bottom allows the page to load without having to wait for all of the code to process.
Does it seem like a lot of work? Thankfully there is Sprite Me.
Imagine you have an image that is 1200 x 1900 and you resize it in WordPress to 300 x 475. When you use the new size on your site, the page is going to load the 1200 x 1900 version, which is going to take a while to load.
Best practice dictates that you upload the image size you want to use. If you want to link to a larger version of the image when someone clicks on it, then link to the larger version when you need to. There is no need to resize it in the CMS and have that image size load.
A lot of the tips we have covered so far can be used on any site setup or any CMS. Since the main player in the game is WordPress, we took a look at how to speed up your site if it is using WordPress.
When you are building your site, you should keep in mind what framework the site is going to use. You want something that is simple and lightweight. If you are going to purchase a premium theme or framework (like Studio Press), make sure you do your research to determine whether it is the right fit for you.
I have already covered plugins, but I will mention it again. If there is something you do not know how to do or configure on your site, more than likely there is a plugin that will do it for you. There is nothing wrong with using plugins, but if you are running fifteen to thirty or more on your site, chances are that the mass number you are using is why your site is running slowly. Get rid of what you do not need and invest in a good developer who can help you hardcode the functionality you do need that you are using a plugin to perform.
Using a caching plugin (W3 Total Cache is recommended) can help speed things up, but remember to turn it off when you are updating the site. In addition, consider using a content delivery network (CDN). But before you jump onboard with something like Cloud Flare, make sure you set up the CDN correctly. I recommend reading Four SEO Best Practices for Using a Content Delivery Network.
Disable hotlinking as well as trackbacks and pingbacks. Hotlinking is when someone links back directly to an image hosted on your site. Although I am a fan of links, over time this type of linking can kill the bandwidth on your site. If you want to disable it, add this into your .htaccess file:
Disable hotlinking of images with forbidden or custom image option
Outside of the tips listed here, what do you find helpful to speed up your site?
Comments
So what do you need to do to speed up your site? Here are a few helpful tips to consider:
Take a Look at Your Code
If there is one thing that can bog down your site, it is when your site is making many calls to the server to load a page. Try reducing the number of plugins you are using (regardless of CMS). Think about what you are and ask yourself, “Which of these do I really need, and which can I just hardcode into the template?”What should you do if you have already reduced the number of plugins you are using? Try Gzip compression. This will reduce the amount of browser HTTP responses. Here is an example of some compression code to add to your site (via the .htaccess):
# compress text, html, javascript, css, xml:
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-javascriptAfter you add that snippet, make sure you include this at the top of your page in the coding:
There are a few compression plugins that can be used, but as we have already stated, why use a plugin when you do not have to?
One final tip: keep your CSS files at the top of the page and add the JavaScript (JS) at the bottom of the page. The CSS at the top of the page lets users see your page load visibly. Keeping the JS at the bottom allows the page to load without having to wait for all of the code to process.
Consider Sprites
No, not those sprites. I am talking about CSS sprites. CSS sprites take every image on a page and load it as one. This can greatly reduce the number of calls being made to a server and help a page load much faster. You do not have to have one huge sprite: you can split them up as needed. A common thing to do is to use one for the main navigation, sidebar, and footers.Does it seem like a lot of work? Thankfully there is Sprite Me.
Image Compression
It should come as no surprise that compressing your images will help with loading time for your site. Image compression is pretty simple to define. It involves shrinking the amount of digital information in an image. But how do you get that done? Well, here are a few sites that can help you accomplish this:- http://www.jpegmini.com/
- http://www.smushit.com/ysmush.it/
- http://www.imageoptimizer.net/Pages/Home.aspx
- http://pnggauntlet.com/
- http://compressnow.com/
- http://www.shrinkpictures.com/
- http://psydk.org/PngOptimizer
Proper Image Usage
With the increased use of WordPress (and other CMSs) it is easy to load an image and then resize it within WordPress to use on the site. The problem is that when you do this, it is not calling up a resized image, it is calling up the original image and then resizing it.Imagine you have an image that is 1200 x 1900 and you resize it in WordPress to 300 x 475. When you use the new size on your site, the page is going to load the 1200 x 1900 version, which is going to take a while to load.
Best practice dictates that you upload the image size you want to use. If you want to link to a larger version of the image when someone clicks on it, then link to the larger version when you need to. There is no need to resize it in the CMS and have that image size load.
A lot of the tips we have covered so far can be used on any site setup or any CMS. Since the main player in the game is WordPress, we took a look at how to speed up your site if it is using WordPress.
WordPress Tips
Hosting is a big factor in how your WordPress site will load. If possible, avoid any and all shared hosting. There are a few hosting solutions that are great for WordPress sites. Here are a few examples:When you are building your site, you should keep in mind what framework the site is going to use. You want something that is simple and lightweight. If you are going to purchase a premium theme or framework (like Studio Press), make sure you do your research to determine whether it is the right fit for you.
I have already covered plugins, but I will mention it again. If there is something you do not know how to do or configure on your site, more than likely there is a plugin that will do it for you. There is nothing wrong with using plugins, but if you are running fifteen to thirty or more on your site, chances are that the mass number you are using is why your site is running slowly. Get rid of what you do not need and invest in a good developer who can help you hardcode the functionality you do need that you are using a plugin to perform.
Using a caching plugin (W3 Total Cache is recommended) can help speed things up, but remember to turn it off when you are updating the site. In addition, consider using a content delivery network (CDN). But before you jump onboard with something like Cloud Flare, make sure you set up the CDN correctly. I recommend reading Four SEO Best Practices for Using a Content Delivery Network.
Disable hotlinking as well as trackbacks and pingbacks. Hotlinking is when someone links back directly to an image hosted on your site. Although I am a fan of links, over time this type of linking can kill the bandwidth on your site. If you want to disable it, add this into your .htaccess file:
Disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?sparringmind.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feeds2.feedburner.com/sparringmind [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]Trackbacks and pingbacks happen when another site or blog mentions a page on your site. Again, although links are great, they are actually creating more work for your site. Disabling links will not kill the backlinks to your site, but it will (as with all of these tips) create less work.
Outside of the tips listed here, what do you find helpful to speed up your site?
Comments
Comments
Post a Comment