How to Speed Up Web Pages
Tips and Recommendations for Speeding Up Your Web Pages, Speed Up the Content
The content should make up the majority of your pages. But as the majority of your pages, it is what you should focus on optimizing first. Content includes both text and images. Here are some tips for optimizing non-image content:
Specify a character set early—browsers use a default character set until one is specified, so for pages more than 1KB in size you should indicate the character set as early as possible
Minimize HTTP Requests—the fewer requests you make, the faster your page will load
Minimize the Size of HTTP Requests—ideally an HTTP request should only be one packet
Reduce DNS Lookups—keep the number of host names (unique domains) you point to in a page to as few as possible
Avoid Redirects—a common redirect that many designers use is unintentional — they leave off the trailing slash on a URL which forces a redirect to the directory name with the slash. Redirects also happen when you move a page or site — change the URL to point to the new location when you link to a redirected page.
Preload Page Components—request images, styles, and scripts that may not be needed on this page, but will be used on subsequent pages
Split Components Across Domains—putting different parts of your page on different domains helps increase parallel downloads. But remember to keep the different domains to a minimum (no more than 2-3)
Avoid 404s—while a useful 404 page is important for your customers’ experience on your site, you don’t want to link to them, as they generate another HTTP request that provides no value. This is especially important with images on your page.
Optimize Images
As I mention above, images are content, but they are one of the areas that beginning web designers use a lot of space and download time. Learn how to optimize your images.
Optimize Images—keep the images small
Do Not Resize Images in HTML or CSS—resize images in an image editor, not with the browser
Combine Images into CSS Sprites—one sprite file downloads faster than multiple separate images
Optimize CSS Sprites—keep them small just like images
Make Your Favicon Small and Cacheable—this is an image too
Serve resources like images from a consistent URL—if you use the same image on multiple pages, make sure that the URL that points to it is identical where ever you use it.
Optimize the HTML
The HTML is what makes your page display in the browser, but you need to make sure that it is optimized as well. These tips will help you create faster loading HTML.
Remove Comments from HTML—comments aren’t needed to render the page
Minify HTML—the best way to do this is with a script that minifies the HTML when you post it to your server. So you can still benefit from comments and HTML formatting when you’re editing your pages because extra white space can add download time
Reduce the Number of HTML Elements—the more HTML tags you have on a page the more complicated it will be and the slower it will load. HTML tables for layout add many more tags than a comparable CSS layout.
Don’t nest tables—putting a table inside another table slows the rendering of the page.
Link to Pages and Images with Relative Paths—absolute paths, including the host name, add additional characters that aren’t required for links to images and pages on the same web server
Minimize Number of Iframes—when you link to another site in an iframe, you are connecting your page’s download speed to the one in the iframe.
Avoid Empty Image src—this causes the browser to make another request that will result in no real content
Put Unimportant Content Last—put the least important parts of your page last, especially things that don’t appear immediately like JavaScript rollovers and hidden content
Only Use Critical Meta Tags—while there are lots of meta tags that you can use on your pages, you should limit their use to only the ones critical for the page
Limit Meta Tag Content—for meta tags like description and keywords you should limit their content length to 200 characters or less
Speed Up Your CSS
CSS is another place where your pages can be slowed down. Large CSS files with styles that are never used are a waste of bandwidth. Learn how to optimize your CSS with these tips.
Put CSS in the document head—use the link tag to point to an external CSS style sheet
Combine External CSS—you should only link to one external CSS style sheet
Use CSS for Fonts—images are slower to load
Minify CSS—keep it as small as possible
Remove unused CSS—CSS style sheets can get very cluttered with properties that were once used but aren’t any longer
Use efficient CSS selectors—the more specific your selectors are the more efficient they will be
Avoid CSS @import—Internet Explorer loads @import style sheets last, which slows down the rendering of the page
Use Shorthand Properties—these properties use fewer characters than the standard properties
Don’t Use Filters—Internet Explorer provides a filter AlphaImageLoader to fix a problem with semi-transparent PNGs in versions lower than 7, but this filter blocks rendering and freezes the browser while the image is downloaded
Don’t Use CSS Expressions—Internet Explorer versions 5 through 7 supported using JavaScript to modify the CSS programatically but these expressions are evaluated thousands of times as the page loads, is rendered, even as the scrollbar moves—all of which slows the page down
Speed Up Your JavaScript
JavaScript and Ajax can make pages slower, especially if you have them load right away. Most scripts are not used until the entire page is loaded, and if they load first that makes the page appear slower. The following JavaScript tips will help you speed up your scripts.
Combine external JavaScript—it’s best to have just one external script file that contains all your scripts
Make Ajax Cacheable—add an expires or cache-control header to your Ajax content
Minify JavaScript—remove all extra spaces
Use GET for Ajax Requests—using a POST request requires two steps, while GET only uses one
Put Scripts Last—if possible, put your scripts as the last things on the web page as scripts can often block the loading of other elements on the page until they are done loading
Prefer Asynchronous Resources—by writing asynchronous scripts you ensure that they don’t block other elements from loading
Cookies Affect Speed
Cookies are a powerful tool for web designers and developers, but they can also cause your pages to slow down. These tips can help you speed up your cookies.
Keep cookies small—the larger the cookies are, the more data that must be passed
Eliminate unnecessary cookies—the fewer cookies you set the less that have to be downloaded with your page
Set your cookies at the appropriate domain level—so that only the domains and sub-domains that need cookies, and the rest don’t
Serve static content from a cookieless domain—static content like images can’t use cookies anyway, so serving cookies along with them just adds more requests that aren’t used
Server Level Speed Enhancements
Most of the above tips you can implement right on the pages or images themselves. But if you are serious about improving the speed of your pages, you will need to do some optimization at the sever level as well. These tips can help you improve your web server so that pages are faster.
Gzip Web Pages
Add Expires or Cache-Control Header—when you set the expires HTTP heading to a vastly far in the future date, the web page will be cached so that future accesses will load more quickly
Use Public Proxy Caches—this enables your web page content to be cached on public proxy servers
Use a Content Delivery Network (CDN)—a CDN pushes your content to servers housed all around the world and this speeds up the delivery to customers because they receive your content from servers closer to their location
Configure ETags—ETags or entity tags are used by web servers to help browsers determine if the element requested is the same as the one on the origin server, but some servers can generate incorrect mis-matches because of how they are configured
Flush Buffer Early—if you are using PHP on your pages, you can use the flush function <?php flush(); ?> between the head and body of your HTML to tell the browser to start loading the HTML right away rather than waiting for the HTML to get stitched together
Specify a Vary: Accept-Encoding header—this helps scripts use proxy servers because the proxies store two copies: one compressed and one uncompressed and then serves them up depending upon the request heading Remove query strings from static resources.