Websites sure have changed dramatically since the rise of the internet, wouldn't you agree? When competition for winning User's attention with gorgeous design and high quality, interactive content intermingling with online marketing strategies/tools has become so fierce, what do you do?
How do you resist the temptation of overloading your website so much that it will end in annoying your visitors since it will load all its "awesomeness" way too slow for their high speed lifestyles?
Here is where we come in, lending you (or just reminding you of, since we're sure that many of the following "tips and tricks" on optimizing your website for gaining some more speed are no news for you) some helpful advice on how to regain control over the speed of you site (and to gain the amounts of traffic you've been fantasizing about and the conversion rates that you've dared hoping for and not just a beautifully looking website for your (and your friends' maybe) own pride and joy only.
1. Is it Really Worth the Effort?
First things first! Before you even put together your action plan you should realize and accept that optimizing your site is not just about speeding it up: it's also about the UX and SEO benefits that it comes with.
It's about improving your users' experience while on your website and thus turning them from first-time visitors into loyal visitors (and from visitors into to customers).
Just think about it: the quicker content on your site loads, the less bandwidth your visitors use (it will reduce your bandwidth costs).
2. Aim for High Speed, Not Size
Aim for the (apparently) impossible: while your site gains (inevitably) more weight, strive to keep it optimized and efficient!
Constantly monitor its speed, while keeping up with the trends (which are building websites with rich-content pages and outstanding imagery, which risk to weight them down).
3. Go for Modular Code
You might think now: "But, wait a minute: modular code will just add even more bloat to my website!"
It's true, it will "load" it with more options for you to choose from, BUT think about modular code this way: you get to put together multiple common pieces of your code using less. Take combining two CSS classes, for instance: module coding gives you the same results with less "resources" that could bloat you website.
And that, my friend, it how efficiency looks like!
4. Draw A Line Between Development and Production Level Code Bases
Handle the two environments differently! In short: realize the difference between compressing the code and compressing the images on your website.
- the code's compression depends a great deal on the language you're using (go for Google’s htmlcompressor, for YUI Compressor for CSS, or any other method that suits you)
- the images' compression could just as well mean using Photoshop's "Save for the Web" tool. Keep diving into the "sea of tools and best practices for image formats, compression algorithms, quality monitoring and so on” available online.
5. Keep It Super Neat
It's a common sense practice not to "abuse" your server, don't you think?
Just imagine it "exhausted", trying to efficiently handle all the messages you send it: web fonts, JavaScript, CSS style sheets. If you "empathize" (and you should) with it, then start applying these tips for easing all its hard work:
- load stylesheets at the top and scripts at the bottom
- bundle up your images, nice and neat, so that it should be easier for your site to load them
6. Go From Poorly Written To Readable Code
Besides "heavy", large images, un-optimized code is another major factor that slows down your website. So, as regards best practices for writing you code (for reaching top speed), we have 2 tips for you:
- if possible, call JavaScript last (by the time JavaScript starts slowing everythinf down, your site will have already displayed the markup, processed the HTTP requests, the CSS. etc.)
- write identifiable, short CSS selectors: they will be far more speedy in doing "accomplishing their mission"
7. Optimize Your Fonts
Remember that we've talked about beautiful typography being forecast as one of the UI trends in 2017? Well, looks are not enough when you're approaching your site from its efficiently/speed perspective.
You need both beautiful and optimized fonts if you want to keep your site's performance high, all while enticing your visitors with gorgeous design. Here are a few tips for optimizing your fonts:
- compress, compress, then compress your fonts some more (use FontLoading Api for instance)
- juggle with maximum 2 fonts
- go for font-face (whenever you need to access external font resources)
- select only the variants you need (no need to overload you website with all the available weights and styles)
- ease your site's job: go for WOFF2, WOFF, TTF, and EOF formats
- use CSS inlining
8. Do It For Google
Pleasing Google and pleasing the User are (or at least it should be) the goals that drove you when you actually built your site (or your client's) in the first place, right? Well, then if you've already started to draft a “How to speed up my site” plan in your head while reading this post, you're on the right path: Google rewards developers/site owners like you!
The almighty search engine will always appreciate (and thus rank better) optimization-oriented developments practices. It's pretty logic: a happy user (“happy” for the web pages he/she accesses load content really quickly and doesn't make him/her lose valuable time) means... “happy Google”, so to say.
And how does this impact you? You do the math!
9. "Tame" Your Third Party Scripts
In a few words: don't let the “little ones” run the show on your website!
Mind you monitor all those third party scrips (Facebook “like” buttons, analytics trackers etc.) lest they should considerably slow down your website!
10. Limit Your Dependency Requests
How do you limit all those dependency requests adding bloat to your website and slowing down the downloading process? There are a couple of good practices that you should consider starting today:
- use a CDN (especially if you're website's a large, heavy-content one)
- use SVG or sprites methods for handling images from your style sheets
This is it, our “decalogue” of good practices for optimizing your website for higher speed. One more thing we'd like to add: there's no such thing as “a too fast website”, there's always room for even more optimization!
