You’ve made a webpage, but people are complaining that it’s too slow to load.
It may be that they have a slow computer, or it may be that your webpage has too many large files in it, and it should be made smaller. Safari can tell you how many files it needs to load, and how big they are. Here’s how.
1. First enable the developer menu in safari. To do this QUIT SAFARI, open the terminal and type in the following and hit return:
defaults write com.apple.Safari IncludeDebugMenu 1
OR
Download Onyx and under ‘Parameters’ ‘Safari’ select the ‘Enable Debug Menu’ option.
2. Load your page in Safari, and under Develop select ‘Show Web Inspector’
3. This will open a new window down the bottom. Click the Resources Tab, then the Size Tab.
You will now see a graph of all the files on your webpage and how big they are. It will look something like this:
You can see in this example (wpcc.org.au) that the entire webpage is 1.028 MB – reasonably large, most of it images. The best way to reduce it would be to go back and find the original images on your computer and compress them to make them smaller. Lots of these images are quite small and yet are 70KB – they could be reduced to 10 or 20KB probably without muck loss of image quality.
As a comparison:
Apple.com uses about 600K, notice it’s reasonably graphic rich and yet only 250Kb of images.
macintoshhowto.com uses 963Kb – a bit big.
google.com uses 177Kb – very slim!
If you click on ‘time’ instead of size you can see a graph of how long the various parts take to load on your computer.
What’s the best way to compress the images so that their dimensions are the same but their size is reduced?
I think I’ve answered my own question above… using Preview.
I’ve also discovered that the biggest images on my web page were part of the iWeb template that I was using. The background image was 124kB. I’ve used Preview to reduce that down.
Further to my above comments… the .png files that iWeb creates are big too… so I’ve used Ping to compress those
wpcc.org.au down to 717K…. less than macintoshhowto.com !!!
Now you’re just showing off!!!
This is really a great and informative post. Just curious. So what will be the preferable size limit for a web page? I am going to test my page now.
There’s not right or wrong for the size of a page, but you can compare yourself to what the good web developers are doing (Apple, Google etc) and see how you measure up!
Any suggestions on how to manage video?
server vs youtube vs other?
any ideas would help.
Did you really create the sliding doors blog page? Man that is cool! I can’t wait to dive in and make my new blog. I was told this sliding door theam was a little tougher for a novice to handle. Do you know where I can get help if I need it..willing to pay.
David McElveen.
For images, generally speaking, consider using PNG instead of JPEG where ever possible. If the graphic is a chart, consider using a GIF instead. You should be able to get smaller sizes and yet still maintain good quality images.
Our front page is 72kb. The other pages are about 30kb. (It was designed for slow internet, but doesn’t look as good!!)
People now think of 700kb as a small page, but that would take over 5 minutes on our dial-up connection. I think it is a problem because it cuts off many people from the internet (e.g. many in the developing world).
Mobile devices are almost creating an alternative standard of slim web pages, and I find the internet works much better when I change my mac browser identity to iPhone!!!