How to know the real size of a web page? - performance

I wan't to know the real size of a web page (HTML + CSS + Javascript + Images + etc.) but from the browser side, maybe with a software, Firefox Add-On or similar?

Use firefox, and get FireBug.
Then get the YSlow addon for firefox.
For IE, you can get the DebugBar which comes pretty close to giving the same information.

YSlow is a FireBug plugin (Firebug is a FireFox plugin), and it works great.
If you meant the entire website, you could get HTTrack (Software) and download the entire site... just be careful.. people don't like it when you do that!

I think the Firefox Plugin Extended Statusbar can do that for you.
It will give detailed information about what has been downloaded, including the size of the downloaded data.

If you can't or don't want to use firefox and its plugins, you can use Pingdom Tools.

Firefox now embedded developper tools (in the tools menu, or Ctrl+Shift+S) has a "Network" tab which allows for detailed monitoring of size and load time of a webpage. The context menu (right click) allows to save data in HTTP archive format (HAR).

Related

Check the performance of Chrome Extension

I want to check the performance of Google Chrome extensions of Chrome (like the loading time of backscripts), its loading time, and memory requirements. This means I've added an add-on and want to check after adding it their is a decrease in the performance of Chrome or is same. I there any tool for that.
Chrome provides useful tools to monitor your extension through the built-in Chrome DevTools.
If your extension is a popup, right click in it and choose Inspect element.
If your extension runs in background, go to the extensions page and click on the link background page of your extension.
In there you can:
evaluate network performance
profile the application Timeline
profile the JavaScript execution
Google Developers' ressources are the best way to learn more about these tools.

why is yslow not showing the page load time

so I installed yslow firefox extension and it's on my statusbar...but it's not showing any page load time info and just says 'yslow' whenever I go to any page
do I have to do some configuration or something?
what am I doing wrong?
Check the YSlow User Guide for a walk-through of using the Firefox extension.
If you're having trouble making the Firefox extension work, you can also try the bookmarklet version.
Activate the Fire bug by hitting F12 key and after that you will be able to view the response time along with YSlow icon in status bar.

Google chrome frame - how does it work?

I'm looking into chrome frame and I'm wondering how it works.... http://scriptsrc.net shows that it's a javascript that can be embedded on the page....
http://code.google.com/chrome/chromeframe/ shows it as an install file... does the JS prompt for an installation or something?
Google chrome frame is a plugin (think Adobe Flash) for Internet Explorer, that replaces core modules of IE (unlike Flash), like layout/rendering and javascript. But the UI remains. Then there is some javascript that can detect if this is real IE or IE+Chrome, and also offer an install option to the user. Also there is a HTTP-header and a meta-tag that are required to switch IE to chrome mode, when available.
The JavaScript is to detect it and enable it if it's there. (scriptsrc is just giving you the link to the file, which is on the Google CDN.) The end user does have to do a one-time install of it, it's a plug-in (like Flash or Java). Quoting from this page in the Google documentation:
In Internet Explorer, check() determines if Chrome Frame is installed. If not, the user is prompted to install it.

Browser extension: is there a way to stop the loading of images?

In either Firefox/Chrome extension, is there a way to stop the loading of <img> before the browser actually starts loading them from a page?
The popular Web Developer extension for Firefox has this feature, under its images menu
In Firefox it is possible, in Chrome it in not possible yet, but this is a common request from extensions developers, so they are working on it (Chrome devs are mainly worried about performances hit).

Pasting an image from clipboard to a website

I need to come up with a solution for users to be able to paste an image on to a website, then upload that image on to the web server. I'm not sure what the right solution for this - I am pretty sure javascript is out of the question because I don't think it can handle binary clipboard data (or any clipboard data?)
So, I'm not sure which way to go with this. Is this something possible with a Java applet? Or maybe a Flash SWF? Any other alternatives?
Or this free one (via another StackOverflow question)
You can use pure JavaScript for this, assuming either Chrome or Chrome Frame. Since most other plugins or applets require a specific install action you might as well require installing Chrome Frame as that will fix quite a bit more than just pasting events.
View a live demo of a jQuery plugin that cleanly wraps the HTML Clipboard API. This demo requires the Chrome browser.
Rad Upload (java applet). It's not free, but it is relatively cheap.

Resources