HTML frames and iframes are a great way to manage your website navigation. By putting all your navigation in one frame or all your content in an iframe, you can keep the navigation consistent across your whole site and only need to edit one file. But framesets can take more time to load, especially the first time the site loads. This is because instead of having to request one web page, the browser has to request n+1 web pages, where n is the number of frames.
Of course, once a frameset is loaded, the site will perform as well, and sometimes better than a non-framed site. This is because once a frameset loads, frames with navigation and other static content won't load again.
What Makes HTML Frames Slow
Web pages are delivered from the web server in a request-response model. This means that the web browser sends a request to the web server to get a web page. The web server then sends the HTML for that page. The browser parses the HTML, and sends more requests to the server for additional files like images or media files that are embedded in the page.
When a browser requests a frameset web page, it doesn't know it's requesting a frameset, it's just requesting a standard HTML document. The server sends back the frameset which includes a number of frames. Each frame has a URL that the browser then downloads into that frame in the frameset.
So, the first time a frameset loads, the browser makes several HTTP requests to the server for the HTML files that build the frames in the frameset. And each HTTP request adds time to the download of the entire page.
What Makes Frames Fast
But once that initial frameset is loaded, framed sites can be faster than the same site without frames.
This is because framesets are generally intended to keep information like logos and navigation consistent, but without having to edit every page in the site. If you have a website with logo and header information in one frame, navigation in a second frame, and content (that changes) in a third, the only thing that channges when a user clicks on the navigation is the content in the content frame. And that content doesn't need to include any logo, header, or navigation HTML. So, the content pages are going to be smaller in framesets. And smaller pages load more quickly.
How to Improve Frames Speed
If you use HTML frames for your website, there are a few things you should do to make sure that that initial load is fast.
- Minimize the number of frames in your frameset—every frame adds another HTTP request to the download, which slows things down
- Keep the frame pages fast—use the tips I provide for speeding up web pages to optimize the pages in your frameset as well as you can
- Optimize the images—keep the images as small as you can
How do IFrames Impact Speed
Iframes work just like HTML frames in that they require a second HTTP request to get the content of the frame. The same rules apply—keep the content inside the frame optimized and use the fewest number of iframes you can.
Where iframes get tricky is how many people use them. They are often used to load external web pages and advertising. And whenever an iframe loads a page from a different server, you are tieing your websites optimization to that other site. In other words, if you put a page that is faster than your site in an iframe, you won't have any problems, but if you put a slow page in, your page will only be done loading when that page is done. Plus, if the server for your iframe URL is having network issues, your web page will suffer too, even if your server is having no trouble.
Read more web design articles: Current Web Design / HTML Articles.