I have speedup my desktop to 82/100, but mobile speed is still 60/100. Can anybody recommend me some tips about improving the mobile speed to 80/100.
Here is link the my current Google PageSpeed Insights:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.lutonairporttaxis.co.uk%2F&tab=mobile
There are a number of things that you could do to improve the score of your application. As PageSpeed Insights suggests, you could turn on your compression. This is an easy win and will make a difference to your files sizes over the wire.
In terms of the render-blocking CSS, why don't you try and automate the process. There is a great plugin called Grunt-Critical that will automatically extract and inline your Critical CSS for you. For more information, I recommend reading this article about Critical CSS.
The website I work for has a lot of overly complex pages. If I was able to use box-sizing on them my job would be made significantly easier in a number of respects. However, before I can just roll up and use box-sizing I need to convince the powers that be that using it does not create a noticeable degradation in page performance.
Now, the page they care about the most is a whopping 2.5 MB of resources (images, HTML, CSS, JS, etc) and the .htc file I'd need to upload is around 4 kb. So 0.0016% of the total file size. No problem there.
However, while this won't add any real rendering overhead to all the modern browsers, it will to IE6 and IE7 due to their needing to reference this behavior file.
The issue is, how do I test the page performance difference caused by using this behavior file?
I tried the CSS Stress Test but after it tested the 500+ other rules already applied to the page it only displayed a scant few results and not one related to the one I actually wanted.
Ideas?
The stress test I used was:
andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
I could not find a single IE+CSS performance tool to cover ie7/ie6.
What I can tell you from my experience using .htc files, namely csspie...is that you want to look at it from a js perspective, not css.
Having said that, to test js performance on ie6/ie7, try these:
DYNATRACE: http://ajax.dynatrace.com/pages/
COMPANION JS: http://www.my-debugbar.com/wiki/CompanionJS/HomePage
FIREBUG LITE: http://getfirebug.com/firebuglite
DEBUG BAR: http://www.debugbar.com/
I'm afraid I can't be more specific given there's no 'sample' live file to work with provided in your original post. Hope this helps.
Regards
G
I don't know much about speeds and all of that, so I'm not sure if a huge stylesheet would show significant changes in the loading of the page or not. To keep it simple, I want to use a stylesheet that covers all areas of the website using IDs, like #forum div.menu or #game div.menu. Knowing that this would make the stylesheet large, I'm uneasy about it being too much. Could someone provide insight on the significance of the size of a stylesheet and perhaps some specs?
If your users are going to be using all those styles anyway, it is usually better to serve it in one stylesheet because it reduces the HTTP requests and allows the browser to cache it all. However, if you have a lot of CSS for only one page that is not commonly visited for your users (and it is enough that including it in the global stylesheet adds a bunch of weight and would add a substantial amount to the file), it may be better to put it in a separate file.
Bigger stylesheets are better than smaller, multiple stylesheets when trying for speed. HTTP requests are one of the main reasons of slowing your webpage down. Its the same with images. One big image is far better than a lot of littler ones. Here is a good link for reducing your http requests: http://www.dailyblogtips.com/speed-up-your-site-reduce-the-http-requests/.
You may find this Yahoo Developer Network article very useful.
It has a number of sections regarding optimization of CSS
for your site.
"Best Practices for Speeding Up Your Web Site"
http://developer.yahoo.com/performance/rules.html
I've recently begun working on a very large, high traffic website. We would very much like to reduce the size and number of our style sheets, minification is one route we will pursue but is anyone aware of any tools for checking ID and class use? Literally scanning the website to see what's active and what isn't?
Alternatively any software for redacting the css to reduce repition and size?
Thanks in advance
Literally scanning the website to see
what's active and what isn't?
Dust-Me Selectors is a Firefox plugin that you can use to show what css rules aren't being used.
http://www.sitepoint.com/dustmeselectors/
I can certainly recommend Page Speed (http://code.google.com/speed/page-speed/) by Google to check the performance (and possible improvements) of your webpages.
Page Speed also checks CSS and usage of classes on your webpages.
It is used in combination with Firebug.
Gzip compression in the webserver.
Expiry dates that lie far in the future to avoid redownloading the CSS files.
Alternatively any software for
redacting the css to reduce repition
and size?
Yet another level of indirection ... You (and your team) should write long CSS files with as many comments as needed and then write a tool that will publish merged files as needed (different templates need different files), stripped comments and minified as http://www.cleancss.com could do (CSSTidy). Readability comes first if you wan't to be able to modify a file in 1 month or keep track of modifications (or worse if sb else must do that!).
Other options are to reduce the number of templates used throughout the site. No need of two templates with 2px differences (grid layouts are a good way to stick to this) or inconsistent ways of displaying error messages. Define a common look and feel to your site and give instructions to webdesigners, if it isn't already done.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
I'm into my first 3 months of web development and I have been dabbling with some server side scripting in the form of ColdFusion, along with some Javascript, JQuery and CSS.
I have read about CSS optimization and would like to know what are the other pertinent factors contributing to the better performance of a website. What all factors can a developer profile and optimize?
How much part does picking (or rather I should say recommending) a particular browser play in this performance hunt?
cheers
Install YSlow and Pagespeed plugins for Firefox. Then start looking at all of the ways your site is unoptimized. This will be much like trying to take a sip of water from a fire hydrant.
Using minified ( and possibly aggregated ) Javascript and CSS along with a good, healthy far-future-expires is a really good way to start.
Don't forget to gzip.
And use Etags.
And put your CSS at the top of the document.
And put the javascript at the end.
And use separate domains for static resources.
And avoid URL redirects.
And remove duplicate javascript and CSS.
And... see what I mean about the fire hydrant!
Just to sum the stuff up from above:
The speed of a website depends on a few things:
Server
Connection
Client
And on each of this part you can do improvements.
Server: if you rely on a database, check if you queries are cached, and more importantly check if your data is cached. For example if on every page you get a menu from the database, then you can cache that result. In addition you can check your code and see if there is room for optimization.
Also the hardware itself plays a role. If you are on a shared hosting plan, maybe the server is full of other not-optimized apps that take a toll on the server.
Connection: Here the YSlow and Pagespeed come in handy, as well as Fiddler. You can do some caching of static content (CSS and JS). Set their expire date far in the future. Using GZIP to make their contents smaller, and combining the static files helps to a certain extent.
In addition maybe the server has a low bandwidth.
Client: if you do wacky javascript or have slow css selectors, this might hurt performance on the client. But this depends on the speed of the client's computer.
I'd recommend reading Best Practices for Speeding Up Your Web Site and all of the content on Yahoo!'s Exceptional Performance page.
If you like books, you may be interested in High Performance Websites (note that a lot of the content in this is in the Best Practices for Speeding Up Your Web Site article) and Even Faster Websites.
Here are a few of my favourite rules from Best Practices for Speeding Up Your Web Site:
Minimize HTTP Requests
Add an Expires or a Cache-Control Header
Gzip Components
Make JavaScript and CSS External
Minify JavaScript and CSS
Also, smush.it is good for compressing images (which have a big impact on how fast a webpage loads).
As far as browsers go, Safari 4 claims it is "the world's fastest browser", and I can say that the Mac version is certainly nice and fast (not to mention elegant!). However, the above suggestions will make much more of a difference than which browser you're using.
Steve
With ColdFusion you will want to make sure your queries are being cached. Use query analyzer (if using mssql server) to make sure a slow loading page isn't the result of a bad query. On the database end you'll also want to ensure proper indexing.
A big factor in performance is how many HTTP requests are sent for images, files, etc. YSlow will show you this info. Its only available for firefox.
I'd recommend this book.
Google is currently collecting all sorts of performance tips on their new 'Let's make the web faster'-page here: http://code.google.com/intl/de-CH/speed/articles/
FYI: Not all information on these pages are valid, particularily the PHP tips are way off.
There is a really great plugin for for Firefox called Dust-Me Selectors. It scans your css files and lets you find selectors that aren't used/have become redundant in your markup.
https://addons.mozilla.org/en-US/firefox/addon/5392
You should also be delivering your static content off a CDN. Parallel downloads of static files will speed up your page renders. A better explanation here: http://www.sitecheck.be/tips/speed-up-your-site-using-a-cdn/
You shouldn't recommend any particular browser, but design your webpage to current standards with some fixes for older models, if necessary. From my perspective everything can have a speed impact, but CSS is the least important one and in real world examples the user will not notice this. In most cases a clear separation of html and style declarations will do the job. What really has an impact? First of all you can simply throw money at the problem by getting a better hosting contract (maybe a dedicated server). Another thing to improve the speed a website takes to load is to reduce the quality of your images and the usage of CSS-Sprites. Very often on dynamic webpages the database is a bottleneck and therefore caching and a good database abstraction layer can improve things (PHP: PDO instead of simply using mysql()). GZip your output to the user. There are so much more things, but a lot of them are very language dependent..
I recommend the use of FireBug and loadimpact.com for testing.
Less files are more - CSS sprites may be something to consider. In my experience, you have to balance your CSS file between speed and maintainability - one rule more or less won't make the difference between night and day...
For IE, see http://www.fiddler2.com/fiddler/Perf/
The new neXpert plugin for Fiddler (http://www.fiddler2.com/fiddler2/addons/nexpert.asp) offers features similar to those found in YSlow and PageSpeed.
The biggest problem I have is creating fast-running, beautifully designed pages with rich content. This is one thing that is extremely hard to do with today's technology.
If you have lots of javascript you might wanna use Javascript compression. Dojo provides one such tool SHRINKSAFE to compress your javascript. Find the link below:
http://www.dojotoolkit.org/docs/shrinksafe
There is another tool open sourced by google called page speed, which can help you optimize the website performance. It was used internally before it was open sourced to everyone recently.
http://google-code-updates.blogspot.com/2009/06/introducing-page-speed.html
http://code.google.com/speed/page-speed/
Hope it helps.
A couple of very basic rules of performance testing:
Performance means nothing if the program/web page/whatever is wrong.
Do not try to improve performance without having a reliable form of measurement.
You must profile your site/program/whatever to find out what is making things slow.
Corrolary: Do not just change things at random to see if things get better.
Cache everything (web server and browser caching).
Statically publish as much as possible (i.e. to reduce the amount of database calls)
Also add multiple waiting icons to your website.
Show icons in such way that every time user should get different waiting icon, which should be effective to engage user. And mean while your website will get loaded.