Nick Bernard // May 7 2013
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:
How to implement:
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:
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.
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.
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.
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!
By day, Nick helps make websites better for users and search engines. By night, he's learning all he can about front-end web development so he has something to talk about with the cool kids at work. Read More