Optimizing web pages for…
How do you Optimizing web pages for
- quick downloads – network related items?
- quick display – browser performance?
- specific users?
Components outside of your control (note but mostly disregard)
- You have little control over the network path that a network request and delivery takes.
- You have no control over the computing device being used to fetch the resource.
- You have no control over third party content that you use on your pages.
Background on browsers and web servers
A very brief outline of what occurs when you request a web page (many network steps not shown) follows:
- A Browser makes a request for the URL (a user clicks on a link to your site/resource)
- The web server (Apache for example) receives request and sends the ‘page’ – this is typically the text you see when you ‘view source’ for a web page. Note that no graphics or secondary components are sent during this request – just the text. If the URL is for a dynamic resource then the Apache process must activate that resource and wait for it to build the page. If the page is static (i.e. already created HTML file) the Apache simply sends the page.
- The Browser reviews the content in page and then fetches any and all components in the page (text, style sheets, graphics, scripts, other media, etc.) The web page structure affects the order and possibly the speed of fetches by the browser. If the page contains content from a third party resource then this will also affect the time needed for the page components to be downloaded.
- The Browser renders the page – page rendering can begin before all of the components are downloaded. After rendering you see the presentation portions of the files that have been downloaded; hopefully they will look as intended by the creators of the page. At this point plugins may control the actual display (i.e. Flash pages.) In addition, scripts running from the page (i.e. Javascript) can also affect performance of the page in the user’s browser.
General Optimization Suggestions/Considerations
- static pages will always be served faster – use them or use cached dynamic pages for URLS that are performance sensitive
- less is better (small size for ‘hot’ pages; few if any external components)
- sensible structure wins (limit size and number of graphics)
- follow standards & recommendations (i.e. style sheets in <head>)
- optimize CSS with sprites (combine small images into one image and via CSS show the desired section from the combined image – advantage is one file download and most likely overall reduction in bytes downloaded)
- set ‘time of realization’ for scripts (control when scripts become active, i.e. wait until page download completes)
- It’s not just the page size but the CUMULATIVE size of all of the components pulled in by the page (CSS, external data, graphics, scripts, etc.)
- Any third party content in the page? then third party network contention may be a factor…
Ever visit a web site where the final page size is less than 100 KB but, on your mobile device you WATCH/Count the bytes as they climb to 8-900 KB? (I encountered this during a recent visit to a local television station on my mobile device – not a good solution…)
Yes Virginia, I see that your HTML file size is 20KB – but the images, CSS, scripts, external images, external content require the visitor to download 800KB to see that page…
Check the ’size’ of this page
Using Firefox – right-click on the page and select ‘file info’ – it’s probably around 50KB – the image at the top of this page is ~130KB so a more realisic ’size’ for the page is ~200KB – don’t let HTML file size mis-lead you… If my target is a mobile device then smaller images, a mobile-device specific page or custom CSS (without the image) would be a better solution. The current page is for well-connected visitors.
Related posts:
- Migrating Static HTML pages to Wordpress CMS I previously posted about migrating static pages to Drupal –...
- Migrating static html pages to a Web CMS/Blog If you have a number of old web sites or...
- Wordpress – importing images (media) I have not found a simple way to batch import ...
- Zenoss – Open Source Monitoring Solution I have great admiration and respect for Open Source solutions,...
- Apache & mod_security – resolving false positives I recently found that some users could not access this...