Over a year ago Google announced that page speed has become a ranking factor for mobile sites. Therefore, when ordering web development services, always make sure that you mention speed as a key factor to your project.
And if you are a developer yourself, read on to discover handy tips on how to create a fast website, or enhance the loading speed of an existing page.
Test with the right tools
In order to enhance your website speed, the first thing you need is a tool that will let you know how fast your website is and what you should do to make it even faster.
Many tools are available. Amongst them, here are the ones I work with:
- Google PageSpeed Insights: Brought to you by Google, this tool is very handy and allows you to make your website run according to Google’s standards, which is very important in terms of SEO.
- Pingdom: A very popular speed testing tool, Pingdom offers a free tool as well as paid options.
- GT Metrix: This tool combines results from various sources, allowing you to check your site speed in depth.
Think mobile first
Nowadays, most website visits are made from smartphones and other handheld devices. Therefore, it is now wise to think mobile first.
For some more insights about mobile-first web design, check this interesting guide.
Optimize your images
Images often represent 75% of the total size of a webpage. Therefore, in order to have a fast loading website, it’s essential that your images are properly optimized.
Optimizing images isn’t complicated. If you’re using Adobe Photoshop, make sure that you use the Save for Web function and choose the appropriate file format for your images.
.jpg should be used for pictures and illustration images. Use .gif if you need to display an animation or an image with few different colors, such as a logo. If you need transparency, .png is the file format you should use.
For more info and tips about image optimization, feel free to refer to this article.
Handle assets properly
After images, assets (.js and .css files, PDFs, etc.) are a big part of the total size of a website. Therefore, it’s vital to handle them properly.
The first thing to do is to minimize HTTP requests. Do not split your CSS and JavaScript into multiple files – on the contrary, try to use a single .js and a single .css file.
Your loading speed can also be enhanced by deferring the loading of some of your assets. JavaScript, for example, is considered a “parser blocking resource”. This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run it.
In order to specify that the script should be executed when the page has finished parsing, use the defer attribute, as shown below:
<script src="scripts.js" defer></script>
And finally, make sure to minify your .js and .css files. In case you didn’t know, minification is the process of removing extra spaces and comments from assets files, in order to reduce their size. You can use Minify to do so.
Make sure your site is running on a quality host
There’s no quality website without a quality server. If you want your website to be fast and available 24/7, you have to consider using the services of a quality hosting provider. Below is the list of my three personal favorites:
Tsohost: This company has been hosting CatsWhoCode since 2012. The speed and availability are amazing and the support service always responds fast, even on Sundays or in the middle of the night. The only down point is the somewhat expensive price, but just like cheap hosting isn’t good, good hosting isn’t cheap. Good news: By using the coupon CATSWHOCODE when checking out, you’ll get 10% off any hosting plan.
InMotion Hosting: I haven’t worked with them directly yet, but I’ve been fixing quite a lot of websites hosted on their servers and everything has been smooth. Definitely worth checking!
Dreamhost: A good quality hosting offering competitive prices and great support.
Use caching techniques to display your images faster
Although this isn’t really an image optimization technique itself, caching your images is, overall, good practice and will display your images faster to your returning visitors.
Here’s a ready-to-use code snippet that will cache various filetypes (images, and also other kind of documents like pdf or flv). This code has to be pasted in your website .htaccess file. Make sure you have a backup of it before applying this technique, just in case something goes wrong.
# 1 YEAR <FilesMatch "\.(ico|pdf|flv)$"> Header set Cache-Control "max-age=29030400, public" </FilesMatch> # 1 WEEK <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> # 2 DAYS <FilesMatch "\.(xml|txt|css|js)$"> Header set Cache-Control "max-age=172800, proxy-revalidate" </FilesMatch> # 1 MIN <FilesMatch "\.(html|htm|php)$"> Header set Cache-Control "max-age=60, private, proxy-revalidate" </FilesMatch>
Using WordPress? Beware of themes and plugins
If you’re using WordPress, you know how themes and plugins are useful. Be aware, though, that many commercial themes and plugins are packed with features, and therefore can be quite big in size, which is not a good thing for loading speed. Make sure you test themes with a speed testing tool before you decide to make a purchase.
You can also have a look at my list of fastest WordPress themes.
Implement caching
Let’s finish this list with a very important thing: caching. A web cache (or HTTP cache) is information technology for the temporary storage (caching) of web documents, such as web pages, images, and other types of web multimedia, to reduce server lag.
If your site is running on WordPress, the easiest way to implement caching is to install a cache plugin, as such as W3 Total Cache or WP Fastest Cache.