Website Improvement for a Speedier Internet
The most important aspect of your company’s webpage is whether it loads properly and within an acceptable time. End users will not be impressed with effect-heavy sites with customizable options if they won’t load. However, your page can achieve faster loading times without losing functionality by following the industry’s best practices:
- Reduce End User HTTP Requests – Approximately 80% of end-user response time is used to download various webpage components, such as scripts, Flash applications, images, etc., so reducing their number will lead to faster page rendering. Webpages with combined files, such as scripts or style sheets, load faster. Similarly, merging background images into CSS Sprites or multiple images into Image Maps reduces the number of HTTP image requests and subsequently loading time. These methods quickly improve website performance1.
- Image Optimization – There is debate about which file type is best for speeding up your website, but generally JPEG is for photographs and GIF is for low-quality images; while PNG is for everything else2, as this formatting provides the best trade-off between quality and file size. Additionally, leaving the image sizing to the code puts unnecessary strain on the server. When the creator does the task himself, he saves valuable loading time. Finally, optimization tools, like ImageOptim (Mac), and Riot (Microsoft), can further reduce image-loading time.
- Using a Content Delivery Network – Download and connection speeds vary geographically, so for the best loading speed, utilize servers in close proximity to your end users. However, designing a distributed architecture is a daunting and thankless task. Therefore, by distributing your static content over CDNs, you will achieve great reduction in response time without having to drastically change your application code. The CDN method is cost-efficient and worthwhile both when used by bigger websites, and as a service3.
- Efficiently Utilize the Cache4 – Cache optimization makes no difference for first time viewers, but for returning users it can significantly reduce loading time. As a rule of thumb, mark static components with a far-future expires header—for example, ten years into the future—and mark dynamic components with the necessary cache-control header. Using this technique, your site will receive fewer HTTP requests and load faster. Beware that if you have to change a static file, you must alter its name, usually by adding a version number at the end.
- Reducing Response Size – It makes sense to decrease not only the number, but also the size, of the HTTP responses. The most popular and widely supported method for compression is Gzip, as it reduces sizes by 70%5. Generally, web sites compress their HTML documents, scripts, style sheets, or other texts such as XML and JSON. Images and PDFs are already compressed so it is pointless to try and compress them further.
- CSS and JavaScript Optimization – First, CSS offers fantastic capabilities for image designers, so they should take advantage of them. CSS has mockup capabilities and can be a partial substitute for Photoshop. Not only is the result “lighter,” it also means you needn’t slap things together in HTML. Second, leaving in-line code (both CSS and JavaScript) will delay server loading. The application will have to read the HTML and CSS simultaneously, and may cause other functions to be unable to properly start. That is why programmers should leave these as separate files. An exception to that is with homepages, such as Yahoo!’s6, where inlining actually decreases the response time. Third, put JavaScripts at the end of the HTML file. This will let the whole page be loaded before the JavaScript and enable the end user to browse. Also, this positioning reduces the risk of bugs affecting the performance of the entire website.
If you want to receive more great advice or get a personalized expert quote, you can find us at https://www.infintechdesigns.com/.
References:
