How to optimize your website for speed?

  • January 29, 2015
  • blog
3225 Comments

featured11@wdd2x

Since the creation of the Internet, average file sizes have been steadily growing. What started out as kilobytes has progressed to megabytes (yes, plural), and our files are only growing still.

While this phenomenon isn’t disconcerting at first glance, the impact it has on performance and maintainability is awful. Add in aging devices, bandwidth restrictions, or slow speeds in general… and we have a much bigger problem.

Thankfully, we have control over not only our file sizes, but also how our pages are rendered in the browser. This sort of control gives web developers like ourselves a chance to help ease this problem, and optimize our code for better performance in the process.

 

How to OPTIMIZE YOUR WEBSITE FOR SPEED? and WHY BOTHER?

I completely understand a lack of interest when most internet connections in the US are fairly fast these days. I mean, if everything works fine already why bother?

Performance and optimization are about more than how quickly we can download content. There are also quite a few SEO and UX benefits to be had by taking the time to look at our code. Not to mention, decreasing file sizes by optimizing our code for better performance has the added bonus of decreasing our bandwidth costs as hosts, and decreases bandwidth usage (think ISP/cellular data caps) on the user level as well.

 

THINKING MODULAR IS THE FIRST STEP

Modular code typically adds bloat in the form of more options. Here, we want to think modular in terms of combining as many common pieces of our code as possible. If we can combine two CSS classes into one and use less code to provide the same result, we should.

Modularity isn’t as important when it comes to basic HTML and CSS, but when you get into the more complex world of JavaScript, having too much bloat can hurt you — especially on mobile.

 

MINIMIZE HTTP AND DEPENDENCY REQUESTS

Dependency requests are by far the biggest factor in slowing down most page loading speeds. Each additional request adds bloat and another layer of complexity to the parsing and downloading process. It’s often easy to forget that calling images from your stylesheet also count as well, so be sure to limit those and use alternative optimization methods such as sprites or SVG when possible.

While we’re on the topic of external dependencies, if your website is large enough to require a few dozen requests at minimum… It may be time to consider using a CDN. Using a CDN to distribute your content won’t decrease file sizes and/or load times as much as removing extra HTTP requests all together, but it can likely remove any slow server connections out of the equation at least.

 

PRODUCTION VS. DEVELOPMENT ENVIRONMENT CODE BASES

There should be a very stark difference when comparing your development and production level code bases. Taking this step alone can sometimes see the largest decrease in file sizes across the board.

It’s typical today to see developers refer to their “production” or “development” environment, especially on large scale projects. But it’s also useful on the smaller end of things as well. The largest difference between the two environments can be seen with image compression and the minifying/compression of code. In the end, we want our production environment to be as lean and fast as possible while our development environment should be the same, only minus the image/code compression optimization.

Using the built-in tools like Photoshop’s “Save for web” compression can be a good starting point for images. There is a plethora of knowledge to be explored elsewhere as well with conversations on image formats, compression algorithms, quality control, and best practices.

For code, the best use of compression usually depends on the language you’re working with. It’s also highly debatable whether compression of code helps or hurts other people trying to understand your code, but that’s a conversation for another time. When it comes to plain HTML and CSS, I use services like Google’s htmlcompressor and the YUI Compressor for CSS.

 

WRITE SMARTER, MORE READABLE CODE

Sometimes the very code we’re writing is the slowest link in the chain. Inefficient CSS or bloated JavaScript can hurt loading times more than you may think. This Mozilla post goes into great detail about the importance of writing lean CSS selectors and explaining how browsers render them. In short, writing the exact path down a chain of selectors is much less efficient than simply using the smallest uniquely identifiable selector instead. They both direct the styling to the same element, the latter simply gets the job done much, much faster.

JavaScript can be even worse than poorly written CSS, and in many cases it’s easily overlooked. How many times have you copied and pasted an external JS library into your project without really looking in depth at the source itself? Typekit is a wonderful example of this, as when their servers stall it can bring a webpage using their fonts to its knees and cause an additional 30 seconds or even minutes of extra load time.

Thankfully, such events happen rarely, but it’s still good practice to call JavaScript last if possible, as is the case with Google Analytics. Doing so allows the browser to parse through the head files (CSS, HTTP requests, etc) and display the markup, before JavaScript begins to slow things down.

 

KEEP HTML VERY SIMPLE

In keeping with our goal to write leaner CSS selectors and keep bloat to a minimum, writing efficient HTML should also be a priority.

CSS resets often target all common elements and enforce “resetting” styling on them. So even if you aren’t targeting that extra div, it’s likely still slowing things down by having to have its padding and margin reset at a minimum. Typically, an extra div or two won’t really hurt anything though. Only when you start ending up with dozens of them do things get crazy. With the introduction of more elements into the HTML5 spec, we also have much more flexibility in this area as well.

 

GOOGLE LIKES IT WHEN WE WRITE CLEANER CODE

Google has made it a priority to whip the internet collectively into shape. In order to occupy prominent positions within their search results, pages must now pay critical attention to many different attributes about how they’re rendered. Calling too many external resources, having absurdly large images, or even having poorly written JavaScript can pull a site down in ranking.

Thankfully though, this is all with good intention as their requirements for a good search ranking are built around good development practices. Google also offers in very in depth guide to optimizing different aspects of your site for better SEO — which also happens to promote fantastic development practices at the same time. This is how you optimize your website for speed.

 

CONCLUSION

When optimizing our code, we have to not only think about file sizes but also consider how it will be read; either by browsers or even other humans. Mobile use should also be taken into consideration, with many service providers enforcing very constraining data caps these days.

So while it may take extra time to perform all this optimization, it’s certainly a worthwhile endeavor since it not only offers better performance in the browser and on mobile, but also has the chance to promote better development practices and even get your content a higher rank on search engines like Google.

Next time you prepare to launch, throw your images into a compression engine… You may be surprised how many megabytes it can shave off!

Redefine Infotech is a web development | training company based in Rajkot, Gujarat (India). We design beautiful and qualitative website, which are easy to navigate and have clear functionality. Contact us for web solutions at affordable price.

Source: WebDesigner Depot

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

Fields marked with an * are required

More from our blog

See all posts
3225 Comments
  1. I pay a quick visit each day some web sites and blogs to read articles, except
    this web site gives quality based articles.

  2. Hello! I could have sworn I’ve been to this blog before but after reading
    through some of the post I realized it’s new to me. Nonetheless, I’m definitely glad I
    found it and I’ll be bookmarking and checking back often!

  3. Wow, wonderful blog layout! How long have
    you been blogging for? you make blogging look easy. The overall look of your site is great, let alone
    the content!

  4. What’s Going down i’m new to this, I stumbled upon this I have discovered It positively helpful and it has aided me out loads.

    I’m hoping to give a contribution & help different users like its
    helped me. Good job.

  5. Sweet blog! I found it while searching on Yahoo News. Do you have
    any tips on how to get listed in Yahoo News? I’ve been trying for a while
    but I never seem to get there! Appreciate it

  6. Excellent post however , I was wondering if you could write a litte more on this topic?
    I’d be very grateful if you could elaborate a little bit further.

    Many thanks!

  7. My spouse and I stumbled over here coming from a different web page and thought I might
    as well check things out. I like what I see so i am just following you.
    Look forward to going over your web page repeatedly.

    • W88
    • October 14, 2018

    But wanna remark on few general things, The website style and design is perfect, the subject matter is really good. “If a man does his best, what else is there” by George Smith Patton, Jr..

  8. hi!,I like your writing so so much! proportion we keep in touch extra about your article on AOL? I require an expert in this house to solve my problem. Maybe that is you! Having a look forward to look you.

  9. For most recent information you have to pay a quick visit world
    wide web and on world-wide-web I found this web page as a most excellent
    web page for latest updates.

  10. Hi there, yup this piece of writing is actually good and I
    have learned lot of things from it regarding blogging.
    thanks.

  11. Helpful info. Lucky me I discovered your site by chance, and I am stunned
    why this accident didn’t came about in advance!
    I bookmarked it.

  12. I have to thank you for the efforts you have put in penning this website.
    I’m hoping to view the same high-grade blog posts from you in the
    future as well. In fact, your creative writing abilities has motivated me to get
    my own, personal blog now 😉

  13. It’s perfect time to make some plans for the future and it’s time to be happy. I have read this post and if I could I wish to suggest you some interesting things or suggestions. Maybe you could write next articles referring to this article. I desire to read even more things about it!

  14. Arms down, Apple’s application retail store wins through a mile. It is really a substantial conclusion of all varieties of programs vs a alternatively unsatisfied choice of a handful for Zune. Microsoft consists of systems, primarily within the realm of online games, nevertheless I’m not certainly I’d need to have in the direction of guess upon the potential if this aspect is significant in the direction of on your own. The iPod is a much improved option within just that situation.

  15. I have learned some important matters through your website post. One other point I would like to convey is that there are many games out there designed in particular for preschool age youngsters. They involve pattern acceptance, colors, creatures, and designs. These normally focus on familiarization as an alternative to memorization. This helps to keep a child engaged without experiencing like they are learning. Thanks

  16. Someone necessarily assist to make significantly articles I’d state. This is the very first time I frequented your website page and to this point? I amazed with the research you made to make this actual post incredible. Wonderful process!

  17. My wife and i got joyful that Michael managed to deal with his reports because of the ideas he obtained when using the site. It is now and again perplexing to simply choose to be offering hints which usually others could have been making money from. And we all do know we’ve got the writer to thank for this. Most of the explanations you have made, the straightforward site menu, the relationships you will make it possible to promote – it’s got everything unbelievable, and it’s facilitating our son and the family reckon that that subject matter is entertaining, which is rather indispensable. Thank you for all the pieces!

  18. I keep listening to the news update talk about getting free online grant applications so I have been looking around for the top site to get one. Could you advise me please, where could i get some?

  19. You actually make it seem so easy with your presentation but I find this matter to be really one thing that I think I might by no means understand. It kind of feels too complicated and extremely large for me. I’m looking forward in your next submit, I¡¦ll try to get the hang of it!

 

Leave a Comment