I'm trying to decide whether it might make sense to use modernizr.js.
Does covering all the edge cases that modernizer.js does significantly affect page load speed?
thanks,
Tim
When you download Modernizr, you can customize it to only include the functionality that you need.
http://modernizr.com/download/
That should cover any performance concerns.
Related
We are trying to optimize LCP of our site by implementing "Infinite scroll" on our web pages either using Lazy load using Intersection observer API or CSS content-visibilty rule.
I need to know which one is more effective?
Thanks,
This is somewhat dependent on your site in question. I would immediately say that just setting content-visibility: auto to sections below the fold is a known pattern for improving rendering performance (just be sure to use contain-intrinsic-size as well to avoid layout shifts. Letting the browser to as much as possible with just HTML and CSS will typically result in better performance (provided all is done correctly).
However, the better puzzle may be looking into what is causing the LCP measurements to be slow. If there are multiple images on the page, changing the fetchpriority of images can tell the browser to load the main image first. Looking at script order and making sure all code is deferred when possible is another easy win for LCP. Most of the time, there are other opportunities to more significantly change the LCP measurement (unless the DOM is truly massive, e.g. David Bowie's news page).
Interesting note on the performance of these technologies. Are saying? which choose to do a project? and I'm looking for one of these technologies for a project
http://paulhammant.com/2012/04/12/performance-testing-knockout-angular-and-backbone-with-selenium2/
I don't think that this post is conclusive in downgrading angular.js due to performance problems. So you're question leads basically to comparing these three technologies...
They solve very different kind of problems, e.g. backbone.js is in fact only a library for building event-based MV* architectures, while knockout.js and angular.js are more opinionated frameworks. So it's really comparing apples to oranges... But people try anyways: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
None of the frameworks are made for performance. They are made to give direction to the developer.
Backbone is by far the least performant but even with Backbone if it's tuned right you can get a high FPS on tablets, mobiles and desktop.
Rendering Performance means:
only create DOM elements once, update DOM with new model contents
use object pooling as much as possible
minimize image loading/parsing until the last minute possible
watch out of JavaScript that triggers CSS to relayout
tie your render loop to the browser's paint loop
be smart about when to use GPU layers and compositing
opt out of the Garbage Collector as much as possible to maintain high frame rates
I have a PerfView on github that extends Backbone to make rendering performant. https://github.com/puppybits/BackboneJS-PerfView It can maintain 120FPS in Chrome and 56FPS on iPad with some real world examples.
I plan to build a web site where users can leave some comments (like dig, facebook etc..) I am wondering whether it is useful or not to cache comments.
Do users usually read more comments than they write some?
With your experience, what could be read/write ratio for dynamic comments ?
A properly-designed comments component will have the same interface whether you cache them or not, and cacheing should be trivial to retrofit if you implement it sensibly.
Start without caching, measure the performance for your actual application. If it's a bottleneck, then add cacheing and measure the difference.
Don't waste your effort until you know you have a problem.
Can using HTML5 things increase the speed and performance of website?
Or it will only increase the semanticists and add new technology and user experience.
HTML 5 adds some new controls that browsers can implement natively (like calenders). Using these will improve performance over JavaScript implemented controls (but in general, you will not notice much difference).
No doubt a lot of new elements are introduced in HTML5, but that should not have any direct considerable effect on the overall speed or performance of the website. In HTML5, Strict parsing and lexing rules are introduced to handle any errors, and the introduction of multimedia elements, <audio>, <video> (that wouldn't require support from third party software), the performance or the threshold efficiency is indirectly improved.
Well there is not a lot in HTML 5 to make things faster directly other than the new elements mentioned and maybe local storage. In stead the reality is that most HTML 5 supporting browsers are faster, some significantly. So by going to HTML 5 and forcing a user upgrade your your client part of an app should be faster.
For example look into the bleeding edge browsers acceleration via GPUs and better multiple threading. So your client might be faster by default simply because you would end up executing on a better browser. Combined with new features in HTML you may bel able to speed up Your pages.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Which is the BEST way to optimize a web site for faster download without affecting my ranking?
How do I optimize my CSS file and images?
If you have Firefox download Yahoo's YSlow plug-in for Firefox. It will look at your site and suggest things you can do to speed it up.
http://developer.yahoo.com/yslow/
That's two completely different questions.
To optimize download speed use something like minify.
To rank higher in search engines, provide content that people want to see in an easily accessible way, and the high search ranking will come by itself.
Make pages primarily for users, not
for search engines. Don't deceive your
users or present different content to
search engines than you display to
users, which is commonly referred to
as "cloaking."
Avoid tricks intended to improve
search engine rankings. A good rule of
thumb is whether you'd feel
comfortable explaining what you've
done to a website that competes with
you. Another useful test is to ask,
"Does this help my users? Would I do
this if search engines didn't exist?"
Source
If you use a lot of images in your CSS, the use of CSS sprites can reduce the amount of HTTP requests needed to generate your page. Sprite Me can help build it for you.
As Mark Byers noted, these are two separate questions. In regards to web performance, you might be interested in the Performance Advent Calendar 2009, an interesting series about different ways you can improve the performance of your web site.
Check out Google Page Speed for a Firebug plugin that will test and recommend things you can do to speed up your pages.
http://code.google.com/speed/page-speed/
As far as SEO that is a far more complicated issue.
The best advice I can give you is to make your content the best you possibly can, include your keywords in your page title and page url.
Those 3 things will make the most impact of than all the other advice you will hear.
“which is the BEST way to optimise a web site for faster download”
HTML/CSS/JavaScript
Gzipping. In my limited experience, this tends to reduce HTML, CSS and JavaScript file size by about 60–70%. If you do nothing else, do this.
After you’ve done that, minifying your code can knock off another 5–10%.
Images
JPG for photographs, set the quality as low as you can without it looking unacceptably bad. (You can generally halve image size, with no noticeable visible difference to the image, using 70–80% quality.)
PNG for images with gradients and whatnot. Use pngcrush to get these as small as possible.
GIF for small images that only use a few different colours. Save them with the smallest colour palette. (In PhotoShop, see Save for Web.)
Other
After you’ve done all that, pop your stylesheets, JavaScript files and images up on a CDN, e.g. Amazon Cloudfront. This will almost certainly deliver the files quicker than whatever server you have.
Have as few stylesheet, JavaScript and image files as well, to reduce the number of HTTP requests. Spriting your CSS background images can help with with this.
The Basics
But, as always, measure. Don’t blindly apply anything we’ve told you here. Measure how quickly your site’s downloading. Make a change. See if it speeds up your site, or slows it down. And balance any speed improvement you get against other factors, e.g. how much more difficult the code is to understand and maintain.
“without affecting my ranking”
That’s pretty much up to Google. I haven’t heard of any of the approaches suggested here causing issues for search engines. If you want to show up high in search results, get everyone on the internet to link to you.
For reducing bandwidth I have been using web site maestro for a few years, it's great.