| SitePoint Sponsor |
Hi there guys,
I am currently looking into making my websites lighting fast and I wanted to list ways in which we can do this.
Minifying CSS and HTML
Optimizing Images
Reducing HTTP requests
Content Delivery Network
Avoiding empty image alt tags
Use CSS Sprites where possible
Are there any other ways we can speed up our websites.
PS: One of my websites has thousands of CSS declarations, are there any ways you can speed up your declarations?
Preston Web Design | follow me on ayyelo
Share the CSS and JavaScript between pages as much as possible so that it will be cached when the second and subsequent pages are accessed.
Attach any JavaScript at the bottom of the page so that the page can be displayed while the JavaScript is still loading.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
Some people like to concatenate files such as CSS file and JS files:
http://robertnyman.com/2010/01/19/to...-environments/
Choosing good and stable web space is also very important.
Single line CSS, and all CSS in one fileOriginally Posted by Sega
same with JS, all into one file, and put the JS file at the bottom of your html file
Preston Web Design | follow me on ayyelo
In addition to what you and others have listed, I'd also take the backend into account. It's equally important in terms performance. Whatever language, web framework or CMS you're using, there are always ways to improve performance and trim the fat. Some CMSes are hopelessly bloated, so your options are somewhat limited and dependent on the developers who created the CMS/Web Framework.
Still, there's quite a lot you can do, so I'd scan the web and look for bottlenecks and how to improve on them.
Same goes for databases, what kind of database you're using, whether or not you're applying extra layers. Depending on what you use, perhaps there are options to implement other ways to store your data.
I can recommend Steve Souders as the ultimate source in regards to performance: http://stevesouders.com/
His books are great, too, and I can wholeheartedly recommend them.
Well, you can group selectors and use as much shorthand code as possible. Thousands of declarations does sound quite a lot to me and I have the feeling you could reduce that a lot by approaching the markup differently, i.e. creating basic containers and styles and making those reusable.
In my mind, the best approach is a solid balance between scalability and performance.
I'm not sure. But the alternative would be to put all your scripts into one file, I guess.
I guess you could try different minifier tools to see which works best, such as this one:are there any ways to safely minify your script without it breaking. From experience when you minify your JS it ends up breaking.
http://fmarcia.info/jsmin/test.html
It might be worth looking into YSlow if you want to reduce your page load times.
http://developer.yahoo.com/yslow/
However, all of the suggestions raised are to do with front-end optimisation. In my experience it's definitely worth using a profiler on slow parts of your website to see if there are any issues with your code. For compiled frameworks like .NET this can help tremendously.
»» My Articles: Putting your users' trust in Facebook Connect, Why Email is not broken
In order on of speed results you'll likely see...
1. optimize images (Photoshop > Menu > File > "save for web and devices" > usually best is between 40% - 60% optimization)
2. put js scripts at bottom http://uxmovement.com/content/why-yo...efore-scripts/
3. GZIP and compress files at server level http://www.visibilityinherit.com/cod...ur-website.php
4. combine css and js scripts into one file (one .css and one .js - keep the order originally on page)
5. Compress js - dont worry about css http://compressorrater.thruhere.net/ (use YUI Compressor - prob the best and safest)
6. sprites http://www.visibilityinherit.com/cod...tion-image.php
Ha! Apologies for missing your reply. I blame my missing glasses!
»» My Articles: Putting your users' trust in Facebook Connect, Why Email is not broken
I'm always in invisible mode. It's a setting I found deeply nested in My Sitepoint.
Sorry for the late reply guys.
It's mainly due to the CSS switcher, it comprizes over 200 different backgrounds with over 8 variations styles and 7 different colors. To add to all that it's both responsive and retina-ready, so this did get a little bit complex. Normally I would not have so many declarations, but with everything said I hope it's understandable that this was not my choice. Typically I would end up with 50KB for the CSS, for this template it's over 100KB! So we need to fix this somehow.
I also found that when placing the external jQuery on the bottom of the page (just above the closing body) I get FOUC, something which I did not get before.
There are around 15 different script files. I used the minified version of them where possible. In addition to this I used head.js. I was recommended another tool by a friend - jQuery validation plug-in. I don't know how to use this and it's not something I feel will be straight-forward as it's purpose is validation and not minifying.
What I liked about head.js is that I could still keep the files in their natural state and it would run them in a single file one it's own. The only downside to this plug-in is that it does not minify the scripts. I could minify each CSS and JS individually which would probably save more space. A dream plug-in would be one that combines and minifies at the same time.
@EricWatson ;
I have used spites a couple of time. This would be another cool way to speed up the website. Anything helps at this stage. Not entirely sure you'd do the CSS. Having spites would limit the http requests to files. Maybe another plug-in might be the solution here. CSSSpites are good, but from what I found you'd end up downloading a huge image you can do without. For instance, the template comprises of over 200 different backgrounds, some small other's big. A single CSS spite would limit the request but force a complete download.
The trouble is that there seams to be plug-ins for everything, and including all of these would further reduce the speed of your web page. A little like downloading a program to speed up your computer, which indoubtedly further slows your machine down.
For the images I use FastStone Resizer, which works wonders. It manages to reduce the file size of those images to something a little more acceptable. Maybe this combine with CSS Spites might further help the situation.
Because it's a template there will be no database. As far as I know the only thing I can do from the server side it to GZIP it and have it run on a CDN, something like CloudFlare. The CSS is as short as it could be, but maybe there is a little more I can do. Might also be worth using prefixfree, which would probably further reduce the file size of the overall CSS file.
@ULTiMATE ;
I've used YSlow before. It's a great tool for isolated different issues. I will certainly use this tool. The only drawback I found with this is that it needs to be uploaded to a live environment to see it fully working.
Just wondering, would validation also play a role to the download speed of a web page. I tried to see what Facebook and Yahoo do, but they all have unvalidated web pages, and they seam to have some strange scripts going on there. Certainly not what I would call readable.
Preston Web Design | follow me on ayyelo
"I also found that when placing the external jQuery on the bottom of the page (just above the closing body) I get FOUC, something which I did not get before."
This will solve your fouc problem - number 7 is the best - http://www.visibilityinherit.com/cod...javascript.php
you can use the css and js to make the code more clean and short. You can code it manual. For the small image like button you can use it spirit technology as background. have a good luck.
If you are running a wordpress blog then install w3 cache plugin.
Cheers,
Facebook - www.facebook.com/ashishthakkar
Article writer - http://ezinearticles.com/?expert=Jimmy_Thakkar
These are the easy steps to be followed, when developing a website to create it run faster. Here are some of them….
1. Use minified Javascript and CSS, Avoid copy JS and CSS.
2. Put your CSS at the top of the document.
3. Put the javascript at the end.
4. Use divide domain for images, javasripts etc...
5. Avoid URL Redirections
6. Use Image Sprites to Minimize HTTP Requests
7. Add an Expires or a Cache-Control
8. Use Gzip Components
9. Compress your images using Smushit or good image compressor.
10. Compress your css and javascripts using Yahoo User Interface Compressor.
If you are using Wordpress you can install some very useful plugins like W3 Total Cache
Go here http://compressorrater.thruhere.net/ and use the YUI compression and you will never have any problems.
Breaking up long pages into small pages can help in website loading fast. Remove the needless points from your web page. Reducing image size is also useful in loading website faster.
I am using blogger to host my website. how can I improve my website opening speed. Still is opening in 1.6 Seconds. Is this good speed or it could be more better than yet...
I cache all my files. Unlike others I cache my php/html files too. This makes my pages open instantaneously. That is after you have visited once before of course.
Aside from that another big speed thing is to move your JS to the bottom.
Check out my site in my sig. Fasted on the web. I CHALLENGE ANYONE!? That bad boy is the Ferrari of sites.
Posting Permissions
Bookmarks