HOT TIP to make pages load faster (img background?)

OK this obviously won't apple to everyone but... I managed to DRAMATICALLY reduce the page load time.
Firstly, this tip is for you if you're using a background image on your page - in the content for example - where I'm using mine.
iWeb, for some reason known only to the developers, creates a PNG image the COMPLETE size of your web page!
So if you're site is 700px wide and you've got a lot of photos on a page then it could go say 3000px in height. iWeb will create a 700px X 3300px (or so) PNG with your background.
THIS WAS 1.4MB!!!! for me..... absolutely crazy!
They put in no-repeat on the background CSS.
So how to fix this...
It's actually quite easy
1) Publish to a directory
2) using photoshop or some other image editing tool that can open PNG files, open up the largest background_image1.png - largest being largest in px X px - e.g. 700 X 3300 is bigger than 700X1800
3) crop the image in width from 700px to 5px - yep you read that right - crop it to 5px!
(Now obviously this depends on the image you're using in the background but I am assuming that most images are patterns that repeat horizontally... if you have another image that repeats horizontally and is bigger than 5px then make the image as wide as your repeating image)
4) save the image as a JPG
5) open MassReplaceIt
6) create a query where you replace /background_image1.png) no-repeat with /background_image1.jpg) repeat-x
7) set it to update all HTML pages that use a background
8) copy the JPG to all folders that have the background image (unfortunately as the folder name is different it's difficult to just put the image in the /images directory - and i don't know how to use wildcards in massreplaceit - any tips welcome)
NOTE: I am using the same image background on all pages for consistency therefore I have the same filename - I am assuming that it's like that for everyone - the filename that is - so checkout that the replace will work for you.
Well hope that helps you - I managed to reduce the page load times dramatically and now I can actually consider using iWeb for generating pages for my family in Australia who are still on 56Kbit modems and don't have broadband available.
Cheers
Jason

http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.nmrtubes.com/
Your entire home page is made entirely from
images.....consider using some
use of CSS and background colour, minimal graphics and some
actual text, and
you'll be a long way better off.
Brendon
"s.joy" <[email protected]> wrote in message
news:ejfvjp$j0c$[email protected]..
>I had posted this a couple days ago, but then wasn't
available to check in
> until now...so I'm reposting and this time I included my
web address!
>
> Does anyone know how to make pages load faster? My page
loads
> incrementally at
> the moment. The only images on my home page are .gifs so
I'm wondering why
> it
> still comes in choppy when the files are so small. The
address is
> www.nmrtubes.com
>

Similar Messages

  • IWeb make it load faster

    Hi!
    Could you please recommend me a program or give a solution how to make iWeb page load faster?
    OMG, 14 seconds to load a template with some text on it... broadband 1mbps
    I have already search half of the Internet but couldn't find any perfect answer at all.
    I converted or png images to JPG and changed the filename back to .png (using automator). The size of files was smaller but insted of transparency I got white colour space. What is strance I didn't find any option in automator to convert to gif.
    I have just tried to use some programs: PngOptimizer, PNGCrusher, OptiPNG, iWeb-optimizer, ImageOptim. Some of them doesn't work (Leo 10.5.6) others work not enough good. ImageOptim in my surprise compresed files saving up to 50% of original filesize... but 50% was only for files below 1kB, for those above 50 I get only 0,03%.
    I can't wait to try your solutions.

    I use Web Site Maestro which will optimize PNGs as well as everything else.
    http://www.tonbrand.nl/

  • When I add pictures into MUSE , do the pictures resize for web quality (And so the page loads fast enough) or do I have to do this using an external software like photoshop, etc. ? Thank You

    When I add pictures into MUSE , do the pictures resize for web quality (And so the page loads fast enough) or do I have to do this using an external software like photoshop, etc. ?
    Also is there any way I can change the contact form email for all of my contact forms at once.
    I have over 100 contact forms and i want to make them reach the same email anyway I can do that without going one by one?

    If you have placed the image in Muse using File > Place and then scaled the image down in Muse while editing, then Muse publishes/exports the scaled down/optimized image in final output. When using as a Fill, the output size depends on the Fitting option you setup in the Fill options.
    As for the contact form email, you would need to specify the email address for each form individually. There is no workflow to edit the same for multiple forms at a time.
    Cheers,
    Vikas

  • How can I make Privoxy load faster?

    I'm using vimb and it works well except the only way to block ads is to use privoxy. Privoxy takes about 5-10 minutes to start after my computer boots. This means I can't access the internet when I first start my computer. How can I make it load faster?

    https://wiki.archlinux.org/index.php/Hostsblock
    https://aur.archlinux.org/packages/hostsblock/
    Also e.g. https://aur.archlinux.org/packages/hosts-update/

  • Make iWeb pages load Faster - DIY tips

    Like many other "i" apps from Apple iWeb is an "abstraction layer" builder which is what allows it to be a mostly WYSIWYG site creator. But the downside is that because you can't edit code (and personally I don't want to be an HTML code monkey) that means iWeb has to use some hidden, under-the-hood tricks to create some of the "pretty" graphic elements we all like to see, such as shadows, borders, reflections, etc.
    After building a couple sites that weren't very complex I noticed photos and other graphics were taking far too long to load compared to other, similar sites and wondered what was causing the slow page-loading times. By using tools like RAGE iWeb SEO Tool and, the built-in page inspector in Safari I was able to see exactly what was going on under the surface: iWeb has to use JavaScript code to create and build things like borders on objects or photos, reflections, shadows and even non-web-safe colors.
    For example, a simple colored border around a box gets converted into several segments of lines that are individual PNG's! That means instead of a single boxed-element the browser has to instead load all these separate PNG files and literally "builds" the border around the shape - or photo image. That takes a lot of extra time to process - and some browsers can't even read the code properly and don't build them at all during display.
    So here's how you can build a better graphics-heavy page in iWeb and reduce this JavaScript processing time:
    1. Try to reduce the use of borders around graphic elements as much as possible.
    2. When you want a reflection, shadow, border or even perspective change on a photo or image file, use this application to create those effects instead: http://www.acqualia.com/picturesque/. This can build all those elements INTO the image file and can output it as an optimized PNG. Otherwise, every effect has to be built in Javascript separately by the browser - and also explains why some browsers like FireFox are unable to even display shadows created by iWeb.
    3. Although iWeb '09 will do it's best to scale-down large photo files it's best to do that work in a photo editing program first. Image files - unless they are going to be really huge - should be 150k in size, or smaller.
    4. When possible use web-safe colors for page color, backgrounds, shape-objects etc. only. This is especially important for Windows browsers which can easily get confused with iWeb created code.
    If you've noticed slow loading times on your iWeb sites these tips should help speed things up quite a bit - especially when it comes to images with effects.
    Cheers.

    Like many other "i" apps from Apple iWeb is an "abstraction layer" builder which is what allows it to be a mostly WYSIWYG site creator. But the downside is that because you can't edit code (and personally I don't want to be an HTML code monkey) that means iWeb has to use some hidden, under-the-hood tricks to create some of the "pretty" graphic elements we all like to see, such as shadows, borders, reflections, etc.
    After building a couple sites that weren't very complex I noticed photos and other graphics were taking far too long to load compared to other, similar sites and wondered what was causing the slow page-loading times. By using tools like RAGE iWeb SEO Tool and, the built-in page inspector in Safari I was able to see exactly what was going on under the surface: iWeb has to use JavaScript code to create and build things like borders on objects or photos, reflections, shadows and even non-web-safe colors.
    For example, a simple colored border around a box gets converted into several segments of lines that are individual PNG's! That means instead of a single boxed-element the browser has to instead load all these separate PNG files and literally "builds" the border around the shape - or photo image. That takes a lot of extra time to process - and some browsers can't even read the code properly and don't build them at all during display.
    So here's how you can build a better graphics-heavy page in iWeb and reduce this JavaScript processing time:
    1. Try to reduce the use of borders around graphic elements as much as possible.
    2. When you want a reflection, shadow, border or even perspective change on a photo or image file, use this application to create those effects instead: http://www.acqualia.com/picturesque/. This can build all those elements INTO the image file and can output it as an optimized PNG. Otherwise, every effect has to be built in Javascript separately by the browser - and also explains why some browsers like FireFox are unable to even display shadows created by iWeb.
    3. Although iWeb '09 will do it's best to scale-down large photo files it's best to do that work in a photo editing program first. Image files - unless they are going to be really huge - should be 150k in size, or smaller.
    4. When possible use web-safe colors for page color, backgrounds, shape-objects etc. only. This is especially important for Windows browsers which can easily get confused with iWeb created code.
    If you've noticed slow loading times on your iWeb sites these tips should help speed things up quite a bit - especially when it comes to images with effects.
    Cheers.

  • Why do firefox pages load faster if I switch to different application on the taskbar?

    Using XP sp3, Firefox 27.0.1. Firefox spikes resources usage. I've tried resetting firefox. Granted, my pc is older, and only has 2.25 gig of ram, but until recently the loading time was acceptable. Now it's not. This seems to happen occasionally after firefox is updated.
    Pages are loading much more slowly recently, maybe since security update on 2/14? The odd thing is, if, while the page is loading, I click on another non-firefox application, like the task manager, in the taskbar, the firefox page seems to load faster. Is this possible? The delay seems to be when the spinning circle (I don't know what it's called - favicon?) with the ball has turned green and is rotating to the right. I'm not talking just a few seconds of difference. It could be a minute's difference.
    Thanks for any help you can give.

    Ok, so I installed a program called Process Explorer, which is like Windows Task Manager, but with a bit more information. When Firefox is loading a new page, and is the current window, the page is slow to load and firefox takes between 65-80% of the cpu. If I click off firefox, it can take as much as 97% of the cpu, giving some up to AVG's avgrsx.exe, vprot.exe and sometimes plugin-container.exe, but loads the page faster.
    Your instructions:
    "let your firewall ask again for permission to get full, unrestricted, access to internet for Firefox and the plugin-container process and the updater process. "
    I'm not sure what you mean - should I see this happening (as in it asking permission from me to grant access)? Because I don't.
    I've attached a screenshot of Process explorer top cpu processes while the page is loading.

  • Javascript makes page load forever in IE

    I'm using this function (
    http://homepage.ntlworld.com/bobosola/pnghowto.htm)
    to make a png file use alpha transparency proerly in IE. It
    works great,
    except the page loads forever. The stupid MS logo at the top
    right keeps on
    animating and the info bar always says downloading 1 item
    (the file in
    question is the one PNG file I have on teh page) Anyone know
    why this
    happens or how to fix?
    My page is
    http://dev.dosomething.org/
    ... the png file in question is the
    black logo. (I know its in teh wrong place right now, but
    thats a different
    problem)
    Ideas?

    I would duck the whole issue by using a transparent GIF
    "Alexander Ross" <[email protected]> wrote in
    message
    news:edn43j$lm2$[email protected]..
    > I'm using this function
    > (
    http://homepage.ntlworld.com/bobosola/pnghowto.htm)
    to make a png file
    > use alpha transparency proerly in IE. It works great,
    except the page
    > loads forever. The stupid MS logo at the top right keeps
    on animating and
    > the info bar always says downloading 1 item (the file in
    question is the
    > one PNG file I have on teh page) Anyone know why this
    happens or how to
    > fix?
    >
    > My page is
    http://dev.dosomething.org/
    ... the png file in question is the
    > black logo. (I know its in teh wrong place right now,
    but thats a
    > different problem)
    >
    > Ideas?
    >

  • Hello. As I can make my pages load faster.

    Hi I'm new to this community. I created a page in iweb but I think it loads a bit slow. I hope I can help. www.webworldpr.com

    thank you very much for the reply. Which one is better with iweb optimizer.
    Web Site Maestro
    WebCrusher

  • OnyX has made my page loading faster! Yeah!!! How?

    In the process of installing and useing Onyx for the first time, I noticed that in the program under "Perameters>Safari>in the option (Speed of display of web pages NORMAL or FAST." I choose Fast, and it loads Web pages faster!!! I made a comparision loading web pages with the function alternating between normal and fast, using Toast.Net. I also loaded pages from AOL, and Yahoo and the Fast function is faster!!!! First, I want to know how this works??? Incidently, Firefox has an extension called Faster Fox, I wonder if they're the same type app. Second, If "Normal" is slower and is the default setting, am I doing any harm to my wonderfull iMacby using the Fast setting? Thanks, Bill

    Hello,
    Saw your other post and replied here:
    http://discussions.apple.com/thread.jspa?threadID=649139&tstart=0

  • IWeb loads slowly.  How can I make it load faster?

    G4 Dual PowerMac   Mac OS X (10.4.9)  

    jcoda95:
    See QuicktimeKirk's post about Poster Movies in this thread: Movies on iWeb. The movie file size is probably the prime contributor to the slowness of loading. Some other tips I've learned in the forum are:
    1 - do not use and frames or borders, etc. around photos.
    2 - don't use any reflections.
    3 - create your own navigation bar with linked text* and turn of the iWeb Navigation bar. The nav bar is all png based.
    4 - use only the web safe fonts from the Font pane.
    5 - do not use drop shadow on fonts.
    6 - turn off smart quotes.
    7 - don't let text boxes overlap with other objects or put graphic files in a text box with the text.
    The above will reduce the number and size of files associated with a web page quite a bit. Photos with fancy frames and reflections can generate a thumbnail png of around 110KB whereas the plain version will be a jpg of only 28KB. Although it doesn't sound like a lot, it can speed up loading of the page and be more darkside (i.e. PC) friendly. But it takes away some of the fancy stuff that iWeb can do.
    Run a test with a test site and publish to a folder. Then follow the hints above and publish to another folder and compare folders.
    *Put your linked text directly under the Navigation bar. Then turn off the nav bar in the Inspector window. The nav bar will disappear and the linked text will move up to the top of the page.
    Do you Twango?

  • I need faster page loads

    Does anyone know how to make pages load faster? My page loads
    incrementally at the moment. The only images on my home page are
    .gifs so I'm wondering why it still comes in choppy when the files
    are so small.

    Just because an image is a GIF doesn't mean it is also
    small....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "s.joyful" <[email protected]> wrote in
    message
    news:eisp7k$ism$[email protected]..
    > Does anyone know how to make pages load faster? My page
    loads
    > incrementally at
    > the moment. The only images on my home page are .gifs so
    I'm wondering
    > why it
    > still comes in choppy when the files are so small.
    >

  • Slow page loading

    I just finished my first-ever website, but the few people I have sent the url to for critiquing all have the same complaint: The pages load slowly.
    I reduced all of the images to between 8 and 15 KB, but I noticed after publishing, that checking the activity window in safari shows most of those images had grown to 40 KB or more. How do I keep these file sizes small, and does anyone have any other suggestions to make the pages load faster?
    Are there any guidelines to determine image dimensions before I drop them into iWeb, so I don't have to resize them once they are on the page? I suspect that is one reason the files sizes grew - correct me if I am wrong.
    I have a satellite connection that maxes out at 1.5 mbps + latency, so it's difficult for me determine whether a page is loading slowly for people with real broadband or if it's just my sucktastic connection.
    I use Photoshop's "Save for web and devices" to compress image files, btw.
    Here's a link to my site:
    http://www.geigarts.com
    Thanks for checking it out for me.

    I see 4 images that look the same to me :
    http://www.geigarts.com/GeigartsSite/Welcomefiles/navfill-v2.jpg (105kB)
    http://www.geigarts.com/GeigartsSite/Welcome_files/navfill-v21.jpg (99kB)
    http://www.geigarts.com/GeigartsSite/Welcome_files/navfill-v22.jpg (99kB)
    http://www.geigarts.com/GeigartsSite/Welcomefiles/navfill-v3.jpg (47kB)
    Plus a background image :
    http://www.geigarts.com/GeigartsSite/Welcome_files/backgroundimage1.jpg (306kB)
    See if you can prepare smaller images before adding them to iWeb and skip a few navfill images.

  • Speed up image / page loading

    I've done a remake of the website for my company.  I'm a hobbyist web person - not my full time job here.  My boss wanted lots of images.  Well - now that we have them, he says the page takes too long to load.  Any pointers on how to get the images / page loaded faster?  The template I have based the site on has an ajax pre-loader but it doesn't seem to actually pre-load all the images.  The galleries still take a while to load when you view them.  The site is up at http://www.morgansmithllc.com.  Any suggestions on how to speed things up that a hobbyist user of DW can implement?  Thanks!

    This is one of the downfalls of a single page layout. In that type of layout, everything must be loaded because it all exists on the single page.
    As a result I tried running your page through some analyzers and found there are some extremely large files that are being used.  The backgrounds are huge and could likely be further compressed.  Right now your top 6 images are 10MB of the 20+MB page size which is far too large.  Also I see a lot of parallax javascript hanging around.  Just because a website is a single page does not mean it needs to be a parallax site.  In fact, for this type of site I would recommend removing the parallax because there is no need for it.
    If you simplify the site in those ways, that should help a good deal with the loading and scrolling speeds.

  • Faster Page Loading

    After getting my web page published I had some friends who do web design look at it and they said it loaded slow and the pics were a bit too large, which they thought was slowing it down.
    After talking to some helpful souls here on the Apple Discussion groups, I can see where their sites loaded faster because they used an external web program to design their site. Well, I'm not near so advanced and just learning iWeb.
    How can I get my site to load faster? Re-do all the pics. using ones I have reduced in size before importing?
    Also, is there a way to get rid of the album names that are at the top of each page? Ideally I'd keep a welcome page, then go to a photo intro page where I could have small thumbnails of each pic and have that pic link to the album.
    But there is no reason to do a photo intro page with links if I can't get rid of all the albums listed at the top of each page. They automatically link the name to the next album.
    Here is my first attemp at our family web page:
    http://web.mac.com/allie1254/iWeb/bnsrv/Home.html
    Thanks for any input.
    Allie

    Allie
    I have about 200 pages and 3 Gb of space used up, altering things at this stage is a major headache, so my first tip would be plan your site well.
    I started by creating a site called say 'main', in that site I created my main pages that appear in the nav bar (welcome, photos, movies etc).
    Taking the example of my photos, I created a second site called photosS in to which I created all the pages that load when you choose any of the links in the photo page ( ie photos00-02, photos03-05 etc) I turned off the nav bar in this site
    Then I created a third site called photos00-02 and a fourth site called photos03-05 and so on. In each of these sites I created pages for each photo album associated with that grouping all with the nav bar off.
    I elected to create images and links within the site to navigate, rather than rely on the nav bar (ie return to all photos)
    You create your links through the inspector pallette
    So if I've been reasonably clear you will see:- from my photo page, if you select archives/00-02 you are taken to that page (which lists all my photo albums from 00-02) which resides in the site photosS, if you choose 'my birthday 01' you are taken to that photo album page which resides in the site photos00-02
    make sure all your site and page names are unique and don't contain spaces, there are instances when you get away with not doing, but it's easier to just avoid doing so all together.
    Yes I started with a blank page, well I essentially stripped everything out of a template. Some text boxes won't delete, but the text will.
    Hope this helps, hope you can read and understand what I've said, my eyes don't work so well at this time of night and I can't read much of what I have written.

  • Anyway to make a swf load  faster on a site?

    Does anyone know if you can make a swf load faster, a friend
    of mine has a flash scene on his website but it takes forever to
    load the page its on, is there anyway to fix this or make it loa
    faster? thxs.

    Yes you can change the speed which you burn CDs.
    http://docs.info.apple.com/article.html?artnum=304711
    Look at the Advanced section, Burning tab.
    Regards,
    Colin R.

Maybe you are looking for