5 Ways To Boost Website Performance

I must say, I love my cable internet connection. Downloading huge software packages, video and any other large files is rarely an issue scarcely leaving enough time to get a coffee. It’s easy as a web designer to get spoiled when designing a site – large images and files? What’s the big deal? Well it turns out there are several. More and more website visitors are on mobile devices with limited data plans and/or connection speeds. But even more important is the fact that Google weighs site performance as an SEO ranking factor. If all else is equal, Google will rank a page that loads faster above a slower one. Here are some ways to speed things along…

1. Optimize Images

rafting_500 — 500 pixels wide – no compression

Images should be resized and optimized for their specific use on the website. While the browser can resize an image to whatever dimensions are specified, it does not change the amount of data that needs to be downloaded. If the original image is 2000px wide but is to be displayed at 100px wide, then the image on the server should be resized to 100px.

rafting_500_80 — 500 pixels wide – 20% compression

It’s also important to optimize images. JPEG images can be compressed reducing file size dramatically while having minimal impact on image quality. Compare the two 500px wide images – one is not compressed and the other has 20% compression – can you see much difference? Yet the compressed image is less than half the size of the original.

PNG images may often have a lot of extra information in the file that does not directly affect the visible image. PNGs should always be optimized to eliminate this extra information.

2. Enable Compression

Compression is highly recommended by, well, everyone! Most of us are familiar with compression in the form of “zip” files. Web servers can be configured to compress the files they send in response to a browser request. Compression is typically applied on text files (HTML, CSS, Javascript etc) but not images. Images should be compressed or optimized on their own as described above. Many shared hosting web servers have compression enabled by default. If not, it’s fairly easy to do in your .htaccess file. Here’s some sample code:

# ----------------------------------------------------------------------- # Defining MIME types to ensure the web server actually knows about them. # ----------------------------------------------------------------------- <IfModule mod_mime.c> AddType application/javascript js AddType application/vnd.ms-fontobject eot AddType application/x-font-ttf ttf ttc AddType font/opentype otf AddType application/x-font-woff woff AddType image/svg+xml svg svgz AddEncoding gzip svgz </Ifmodule> # # ----------------------------------------------------------------------- # Compressing output. # ----------------------------------------------------------------------- <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/css application/json AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/xml application/xml text/x-component AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype </Ifmodule>

There are several ways to check if your pages are being served using compression like this HTTP Compression Tester. Also, to get a whole bunch of performance ideas from Google, check out their Analysis Tool.

3. Use Browser Caching

Most pages you view consist of a number of elements that at some point need to be downloaded from one or more web servers. Even a simple page may typically consist of the main file itself (example.html) as well as some images (image1.jpg, image2,jpg etc…) and a CSS file (mysite.css). So every time you view example.html, the browser has to retrieve the main file and the other files to render the page. In reality, the images and CSS file may rarely change, so if the browser had a cached copy, it could use that instead of having to download the file from the web server over and over. As web pages get larger and more complex, caching can really save a lot of download time.

You enable caching by instructing the web server to include caching information in the header of the HTTP response. That is, when the web server sends files to the browser upon request, it includes caching information saying effectively “This file can be kept in cache and used until some specified time in the future”. On subsequent requests for that file, the browser will check its cache and if the time has not passed that specified time in the future, it will use the cached copy.

You can enable caching in your .htaccess file. Here is some sample code:

<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A60 ExpiresByType audio/mpeg A3600 ExpiresByType audio/x-aiff A3600 ExpiresByType audio/x-pn-realaudio A3600 ExpiresByType audio/x-pn-realaudio-plugin A3600 ExpiresByType audio/x-realaudio A3600 ExpiresByType audio/x-wav A3600 ExpiresByType video/mpeg A3600 ExpiresByType video/quicktime A3600 ExpiresByType video/x-msvideo A3600 ExpiresByType video/x-sgi-movie A3600 ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/png A2592000 ExpiresByType image/x-icon A2592000 ExpiresByType text/css A604800 ExpiresByType application/javascript A604800 ExpiresByType application/x-shockwave-flash A2592000 </IfModule>
To get more information on caching, check out Google’s PageSpeed Insight Guide.

4. Minify CSS and Javascript

Minifying CSS and Javascript is similar to compression in that the goal is to reduce file size. When developers are working on these files, they write them so they are easy for us and other people to read. As such, they add a lot of spaces, indentation and comments to make them easier to work with. Browsers don’t need this legibility so we can eliminate all this formatting for use in a production (live site) environment to reduce file size. There are several tools available for minification with YUI Compressor being one of the favorites.

5. Optimize Javascript Loading

The web browser needs to parse all the page contents before rendering the page. This means it needs to figure out all the bits and pieces of a page before it starts drawing it on the screen. If the browser sees references to external javascript files in the top of the page, it has to load and interpret those files in case they have a bearing on what will be displayed. So the browser has to wait until these files are downloaded (or pulled from cache!) before it can start rendering the page. In some cases, it is necessary to get these external files first, for example, if you have a javascript based slideshow at the top of the page. Other times however, you may be able to defer loading these files until the page is rendered, for example, a user form data validation script. To avoid blocking the page rendering, include the file link at the bottom of the page.

Conclusion

Speed matters. When it comes to ranking your site as high as possible on Google and other search engines, every bit helps. To check on your website page performance, use the free Google Page Analysis tool.