Update! Learn the ins and outs of a faster site in our Ultimate Guide to Site Speed
We write about a lot of fancy stuff on the Portent blog, such as server log analysis, advanced keyword research, and Tom Cruise.
I want to address something that doesn’t have to be fancy: site speed. We’ve written two posts on how we configured Portent’s site: one is pretty advanced and the other is blindingly technical. They’re awesome, but what if you’re a small business owner without a geeky CEO or talented developer at your beck and call?
When talking to clients, I noticed that many conversations went something like this:
ME: HTTP compression is a breeze. Just have your dev team…
CLIENT: What is this “dev team” you speak of?
Even though Google’s PageSpeed Insights spits out a handy report, it doesn’t always translate to actionable recommendations for the beginner webmaster that updates a site on his or her own.
I’ll explain four simple ways to speed up your site without the help of IT support.
Plan and simple: the smaller the file, the less time it will take for the browser to download and present it to the user. Images can be huge, so optimizing them is an easy place to start.
How to implement:
- Use software like GIMP to crop your images to the correct size for their particular application.
- Save it as the correct file type, which will likely be PNG or JPG.
- Compress it. You can use tools like jpegtran or PNGOUT; however, if you fear the command prompt, just use the compressed images Google provides in the PageSpeed Insights report. Click “See optimized content,” save the image, then replace your old, frumpy images with their slimmer counterparts.
How to implement:
- If you’re running WordPress, you can take advantage of the minification settings in the W3 Total Cache plugin.
Compressing files also makes them smaller. Now that your site’s CSS, JS, and HTML are free of unnecessary code, compression is like putting them into a .zip folder. Most popular web servers have the ability to send the browser a compressed version of a file so it saves time loading the page. How to implement:
- If you’re using IIS, compression can easily be configured in IIS Manager; here are instructions from Microsoft.
- For Apache servers, you can utilize gzip encoding by adding a few lines to your .htaccess file.
- First of all, messing up your .htaccess file can have devastating effects for your site if it’s not done correctly, so always have a working copy and edit with care.
- The .htaccess file lives in the root directory of your site and you can download it with your FTP client and edit it as you would any other text file. Your hosting provider might also give you access to it in your control panel.
- Add the following lines of code to the file:
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
When the browser tells the server it accepts compressed resources (excluding images), the above text tells the server to encode the content in a compressed format (gzip) and send the browser the smaller version of the file. Everyone is happy: the server, the browser, and the user.
- If you’re running WordPress and don’t want to get your hands dirty, I recommend using the WP .htacess Control plugin and enabling mod_gzip in the settings, which will add the relevant code to your .htaccess file for you.
Browsers are lazy and they don’t like to re-download files to render a site that it’s already seen before. So, it caches a lot of these files—images, CSS files, scripts—on the user’s hard drive in order to speed up the process of showing you a web page. Since files like your logo don’t change very often, you can instruct the browser to load the cached version so it doesn’t have to download the same image again from the server. We’ll do this by setting the expiration date for static resources up to a year in advance.
- In IIS, you can enable caching with the IIS Manager. Here’s a tutorial from Brad Kingsley.
- In Apache, add the following lines to enable mod_expiresthe .htacess file:
Then, define the file types it will affect:
Finally, set the time in the future it will expire:
The time is defined in seconds, so these files are set to expire a year in advance. AskApache offers a neat .htacess time cheatsheet if you hate counting.
- Again, if you’re using WordPress, I recommend W3 Total Cache. Just check the box next to “Browser Caching” in the settings menu and you’re good to go.
There are a bunch more ways to speed up your site, and many more resources than I have the space to list, but hopefully this will help get you started on your metaphorical journey to a faster site.
What are your favorite site speed optimization tips? Let me know in the comments!