Your customer’s really happy with the latest website you deployed as their web developer. One day, they contact you and complain the website is sluggish, it’s even timing out.
So you check the error logs and notice a few fatal errors, but those scripts were exceeding the timeout limit. Probably because something else is slowing down the site.
So you check the “slow query MySQL logs” and find nothing. One query three weeks ago — oh yeah, that was a test query for a report during dev. What the heck is going on?!
What scripts were changed since it started acting sluggish? You check the latest code commits in your Git repository (or SVN) and see they indeed had made quite a few changes and alterations to the code you had left them with.
Hmmmm, but the logs weren’t showing any “smoking guns”. Chance are, during page load the order of certain resources have changed and things that could be loaded asynchronously are loading synchronously so one resource, like the JQuery library and a few JQuery plug-ins and perhaps a social widget are all loading synchronously on the page. Of course, the order of resources being loaded matters, especially when one resource depends on the other, like JQuery. You can’t load a JQuery plug-in or execute custom JQuery code without loading the JQuery library first.
So here are 3 basic rules that can help you get out of a jam quickly:
- Combine and minify as much CSS as possible and have it loaded after any meta-tags but before any other tags within the page’s <<head>> tag.
- Combine and minify your JS into two groups — synchronous and asynchronous.
- Then have the JS scripts load as late as possible on the page, often just before the close <<html>> tag
- Lastly, check the images, very frequently customers will add new images and they won’t be optimized.
- Combining images into a single images and “slicing” them with CSS is much more efficient. Google “sprites” and while you’re at it, make sure you are optimizing your images by tailoring the format and compression for optimal display and load time.
Like this:
Like Loading...