A-Z of Website Optimization
It is well-recognized fact that sluggish page load time prompts users to leave a site. Website speed has emerged as the most crucial factor to gain success in the present competitive online marketplace.
Here at TemplateToaster website builder, I am going to discuss some tweaks to improve your website’s front-end performance considerably:
Reduce load time
IE, Firefox, and Safari come with HTTP pipelining switched off by default and Opera is the sole browser which keeps it active. No pipelining implies every request has to be replied and its connection loosened before the following request can be dispatched. This results in an average additional latency of the ping time to the user divided by the quantity of connections permitted. Or when your server has HTTP keepalives deactivated, conducting another TCP 3 way handshake creates one more round visit, doubling this latency. You can also minimize HTTP request size and HTTP response size by allowing gzip compression for HTML and XML for compatible browsers.
After collecting a few page-load times & effective bandwidth for actual users all around the world, you can try out modifications which will better those times. You can try some of these tips:
- Switch on HTTP keep alives for outside objects. Else you add an additional round-trip to perform one more TCP 3 way handshake and slow-begin for each HTTP request.
- If you are anxious about breaking global server connection restrictions, configure the keepalive timeout brief, such as 5-10 seconds.
- Also, view supplying your static content from a separate web server as against your dynamic content.
Reduce download size
Browsers use up time to download the code that constitutes your page. The HTML, style sheets, your scripts, and images have to be downloaded which can take quite some time.
A site’s resource files size will increase as web users go for more interactive site designs. Every new feature needs a fresh script or stylesheet addition which pulls down your site slightly.
You should consider the following aspects to reduce your download size.
Images comprise among the most popular bandwidth issues on the internet. The first method to optimize your images is by scaling them adequately so as to minimize their size.
The second way to optimize your images is by compressing them. Free online image compression tools can decrease your image size considerably without compromising on quality and size reductions can be from 25% to 80%.
Activating browser caching enables you temporarily hold some data on a user’s computer, so they don’t have to look for it to load each time they visit your site. The duration for which the data is stored is based on their browser configuration and your server-side cache settings.
By activating compression you effectively place your website in a zip file. Compression can significantly decrease your page size and make it faster. Compression can take away 50-70% from HTML & CSS files which eliminate data for your visitor to download.
Place your scripts beneath the fold
Reduce HTTP Requests
When your browser retrieves data from a server it achieves so employing HTTP (Hypertext Transfer Protocol). It constitutes a request between a client and a host. The greater HTTP requests your web page does the slower it will take to load.
You can decrease the number of requests by these means:
- Reducing assets like third party plugins which comprise a big number of external requests.
- Don’t employ third party frameworks unless absolutely essential.
- Utilize less code
- Combine your CSS files
- Combine your JS files
You can optimize assets to improve your website’s performance by following means:
Employ a Content Delivery Network
A Content Delivery Network (CDN) includes a network of servers in various geographical locations. Every server carries a copy of a site’s static files like images, stylesheets, and JScript. When a file is requested by a visitor to your site it is dispatched from the nearest server (or one which carries the least load at the time).
80-90% of the end-user response time is used up in downloading all the components of the page images, stylesheets, scripts and Flash. Instead of beginning with the complex job of rebuilding your application architecture, it’s advisable to initially distribute your static content. This not just brings a greater decrease in response times, but it’s simpler as a result of content delivery networks.
Make use of Optimization tools
Google PageSpeed Insights
Your web page loads quickly by employing optimization tools. Optimization tools like Google PageSpeed Insights permit you to assess the loading time of resources and evaluate whether the portal’s user experience is at par with present global standards and practices. Components such as large graphics and CSS files are traced very fast and helpful suggestions on resolving such issues are also accessible.
Web page test
It is a great website speed tool and more exhaustive and feature driven compared to PageSpeed Insights. It shows finite details in waterfall graphs types about your portal’s HTTP requests.
Google Chrome Developer Tools and Firebug
Finally, you can use the Developers tools offered in Google Chrome and Firebug to trace and fix the bugs in pages. These tools offer a plethora of options that are a lifeline of web developers.
The tool displays a visual feedback and timestamps for each event and object parsed by the browser. Though PageSpeed Insights and Webpage test form excellent tools but the detailing from applying the Google Chrome Developer Tools exist within your browser. It measures first and optimizes later.
Create optimized websites in minutes using drag and drop interface TemplateToaster