In this post you will learn about Website Optimization. Website optimization can offer many measurable business benefits if done correctly. First, the process of website optimization determines the best version of web page elements that help visitors to accomplish a certain goal. Optimization improves the efficiency of the website at converting visitor traffic into email subscribers, readers, or paying customers.
What is Website Optimization?
Website optimization is the process of systematically improving the performance of your website to meet your business objectives. Whether your goal is to get more leads, sales, or reduce customer service phone calls, website optimization can be used to make your website more effective at meeting those goals. It helps your website visitors be more successful with their visits to your website.
Why is Website Optimization required?
Website optimization is required because it helps your website visitors to be more successful with their visits to your website. Every visitor comes to your site hoping to answer a question, find a solution to their problem, or complete a task of one kind or another. When you optimize your website you are making it easier for your site visitors to accomplish those tasks.
For example, if you have an ecommerce website that sells clothes, you can optimize your website to increase the number of purchases made by people visiting your website.
When you optimize your website, your site becomes more effective for your business. A more effective website can increase revenue for your business through new sales or leads, and reduce cost, through better conversion rates on existing marketing spend, or by reducing customer support needs through better information and clarity for visitors with questions.
Recommendations for website optimization:
Speed ensures that a visitor’s limited attention span and time are spent on actual content and not wasted waiting for images and scripts to load. Studies have shown that users will not tolerate more than a 4 second load time. If your site fails to offer a quick response, your users will leave.
Two of the major speed analysis tools are Google’s PageSpeed and Yahoo’s YSlow. Here’s a run down of each:
PageSpeed
PageSpeed Insights measures the performance of a page for mobile and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop user-agent. PageSpeed Insights checks to see if a page has applied common performance best practices and provides a score, which ranges from 0 to 100 points, and falls into one of the following three categories:
a.Good: The page applies most performance best practices and should deliver a good user experience.
b.Needs work: The page is missing some common performance optimizations that may result in a slow user experience. Please investigate the recommendations.
c.Poor: The page is not optimized and is likely to deliver a slow user experience. Please prioritize and apply the recommendations.
Terms that comes under PageSpeed Insights:
1.Avoid a character set in the meta tag: According to best practice, you should avoid a character set in the meta tag in order to improve loading times and avoid information duplication. Additionally, if your users are using Internet Explorer 8 to browse your website, specifying a character set in the meta tag disables the use of the lookahead downloader. Consequently this incompatibility issue causes increased loading times for users.
How to Avoid a Character Set in the Meta Tag?
There are a few options available to defining a charset without using a meta tag. Depending on your server side language or web server you can define the character set so that it will be displayed within the HTTP response header. If you are using PHP code and want to include the charset header, simply add the following code to the top of your PHP file.
2. Avoid bad requests: Sometimes your HTML or CSS will request a resource like an image or a html file that doesn’t exist. When this happens, it makes the browser and server make more round trips that serve no purpose because the thing being requested isn’t there.
How to Avoid bad requests?
If you find you have one or more bad requests, just remove the code that is calling the resource, or replace the missing resource. For example if your webpage is calling for an image, but the image isn’t there, just change the image “src” so that it points to the image you want or remove the image entirely.
3.Avoid CSS @import: Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content:
The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.
How to remove & replace CSS @import?
Firstly you have to remove all the @import rules from your CSS code. Then open all the CSS files you use for the web page including the ones you don’t use @import for, copy & paste all the codes within those files, combine them all in one large CSS script and call it from a HTML header within style tags (the same can be done with Javascripts). Combining all CSS scripts in one bigger script and inlining it in the HTML markup is the best way to deal with CSS scripts when it comes to page speed.
4.Avoid document.write: In order to display or call anything via document.write a browser must take wasteful steps. It must download the resource, then read the resource, then it may have to call another resource just to do the whole thing again.
It then has to run the javascript to know what it needs. This is very wasteful as far as page speed goes because anything called by document.write can also be called via HTML (which displays much faster and is already downloaded). Since browsers can’t know what is being called, they will have to display the page slower.
For more about document.write and how to avoid it go to our post – How to avoid the use of document.write
5.Avoid landing page redirects:Redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single roundtrip, and in the worst it may result in multiple additional roundtrips. As a result, you should minimize use of redirects to improve site performance. Redirections on landing pages add delays to the page load and while the redirections are occurring, nothing is shown to the client. In many cases, redirections can be eliminated without changing the function of a page.
How to avoid landing page redirects?
If your service requires redirects, perform the redirection server-side rather than client side, in order to reduce client-side round trip requests. Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.
6.Avoid Plugins:Plugins help the browser process special types of web content, such as Flash, Silverlight. Most mobile devices do not support plugins, and plugins are a leading cause of hangs, crashes, and security incidents in browsers that provide support. It’s because of this that a lot of desktop browsers limit plugins. One way Google decides whether a page is mobile friendly or not is by checking for plugins on your page. If your site has plugins Google deems it not mobile friendly and therefore lowers your ranking.
How to avoid plugins?
Most content that once required plugins can now be created using native web technologies, including content requiring first-class support for audio and video, advanced graphics and presentation effects, network connections, local storage, and file access. Using these web platform features will help ensure that your rich content can be accessed on all devices.
7.Combine images using CSS sprites:Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page. For more about combining images using CSS sprites go to our post – Combining images using CSS sprites
8.Defer parsing of JavaScript:In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.
How to defer parsing of JavaScript?
The simplest and preferred technique is to simply Defer loading of JavaScript until it is needed. A second technique is to use the <script async> attribute where appropriate, which prevents parsing from blocking the initial page load by deferring it until the browser’s UI thread is not busy doing something else.
9.Enable Gzip Compression:When a user hits your website a call is made to your server to deliver the requested files. The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen. Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller. For more about gzip compression we recommend this link – GZIP compression
10.Enable Keep-Alive:Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request. we can grab more than one file at a time by enabling keep-alive.
How to enable keep-alive?
Keep-alive is enabled using the “Connection: Keep-Alive” HTTP header. If keep-alive is not enabled it is likely your HTTP headers are stating “connection: close”. Change that to “connection: keep-alive” to enable keep-alive. Enabling keep-alive depends on what server you are using and what you have access to.
Enable keep-alive using .htaccess
If you do not have access to your webserver config file you can enable keep-alive yourself using an .htaccess file.
Header set Connection keep-alive
</ifModule>
Adding this to your .htaccess file will add keep alive headers to your requests, which will override most webserver or host limitations.
11.Improve Server Response Time: This rule triggers when PageSpeed Insights detects that your server response time is above 200 ms. Server response time is the amount of time it takes for a web server to respond to a request from a browser. No matter how optimized your web pages are for speed, if your server response time is slow your pages will display slow.
For more about server response time and how to improve it, go to our post – How to Improve Server Response Time
12.Inline small CSS: Inlining small external CSS files can save the overhead of fetching these small files. A good alternative to inline CSS is to combine the external CSS files. The Inline CSS filter reduces the number of requests made by a web page by inserting the contents of small external CSS resources directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.
How to inline CSS?
For this, you just need to copy the contents of your external CSS file and paste them between style tags in the head section of your HTML file. Like this:
YOUR CSS CODE GOES HERE
</style>
The important thing to remember is to place this css code in the head section of HTML page. You must also use the proper HTML style tags. Copy and paste the contents of your external CSS file inbetween the style tags.
13.Inline small JavaScript: Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files. The benefit this provides is the reduction of files the browser has to download prior to displaying your web page. The thing is, most of those files only have a few lines of code. If you find you have such files they should likely be inlined into your HTML to save the external file calls.
How to inline JavaScript?
To make your JavaScript code inline, simply copy the contents of your external JS file and paste them between script tags into your HTML. Like this:
YOUR JAVASCRIPT CODE GOES HERE
</script>
Putting your JavaScript code into your HTML will save the web browser a round trip to the server, since you are no longer asking for a seperate external file for the browser to load to see and execute your JavaScript.
14.Leverage browser caching: Browser caching stores webpage resource files on a local computer when a user visits a webpage. When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources. Browser caching saves the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them saved. For more about browser caching go to our post – Leverage browser caching
15.Minify CSS: Minify CSS is used to compress your stylesheet code. Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time. lets see an example: this is a normal CSS code:
{
background-color:cyan;
color:blue;
padding:10px;
margin:0;
}
when you minify it looks like:
16.Minify JavaScript: Similer to minify CSS, minify javascript is used to compress javascript code. Compacting javascript code can save many bytes of data and speed up downloading, parsing, and execution time. lets see an example: this is a normal javascript function:
function editField(id){
//hello hello hello
var a = 1;
var b = 2;
var sum = a + b;
}
</script>
when you minify it looks like:
17.Minify HTML: Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time. Example for minify HTML: this is a normal HTML code:
<strong>Example for minify HTML code for website optimization</strong>
<p>
minify HTML is used to compress HTML code by
removing extra spaces and extra lines
from the code.
</p>
</body>
when you minify it looks like:
18.Minimize redirects: Redirects are instructions or methods that automatically take visitors of one file to another file or location. They are accomplished in many ways. Each way hurts your pagespeed.
Avoid redirects
If you do not use any redirects, you are serving your content significantly faster. Redirects are likely the one single most time waster in your code especially when you consider mobile networks. They dramatically affect your page speed in a noticeably bad way.
19.Minimize request size:HTTP requests are requests that get sent to the server whenever someone visits your website. These requests can contain a variety of information for the server to process and act upon. The most important part of such a request is the URL. Based on this information, the server will try to return a valid response, such as a file. The first stable implementation of HTTP, HTTP/1.0, does these requests in series. This means that a group of requests needs to be finished before the next group is sent. Keeping cookies and request headers as small as possible ensures that an HTTP request can fit into a single packet.
20.Optimize images: The main reason why it’s so important to optimize your images is because 90% of most websites are graphics dependent and therefore there are a lot of image files. Leaving these images uncompressed and in the wrong format can drastically slow down your web page load times. For more about Optimizing images go to our post – Images Optimization for Website Optimization
21.Optimize the order of styles and scripts: When a browser is loading your webpage it gets the HTML and then it starts calling all the things your HTML is asking for like css, scripts, images, etc. When browsers start to download a script they stop loading anything else until the script is loaded. Google states “Typical web pages spend 80-90% of their load time waiting for the network. A powerful technique to reduce the amount time spent blocked on the network is to get rid of patterns that cause some browsers to serialize resource downloads.” For more about Optimizing the order of styles and scripts go to our post – Optimizing the order of styles and scripts
22.Prefer asynchronous resources:When a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it. With an asynchronous script, however, the browser can continue parsing and rendering HTML that comes after the async script, without waiting for that script to complete. When a script is loaded asynchronously, it is fetched as soon as possible, but its execution is deferred until the browser’s UI thread is not busy doing something else, such as rendering the web page.
How to add asynchronous resources?
To add asynchronous resources, simply add the async attribute to your scripts as given below:
Provided that these resources are not required for the initial loading of the web page and also do not need to be executed in a particular order, the async script attribute will help improve the overall deliverability and speed of your site.
23.Put CSS in the document head:Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance. Specifying external stylesheets and inline style blocks in the body of an HTML document can negatively affect the browser’s rendering performance. Browsers block rendering a web page until all external stylesheets have been downloaded. Inline style blocks can cause reflows and shifting of content. Therefore, it’s important to put references to external stylesheets, as well as inline style blocks, in the head of the page. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page.
24.Remove query strings from static resources:Query Strings are the URLs which contains “?” or “&”. Query strings prevent caching of Static Resources like CSS and JavaScript on Proxy Servers and CDNs, which results slow loading speed of a website. You must have remove query strings which content “?” or “&” in their URLs from Static Resources to enable caching on Proxy Servers.
How to Remove Query Strings form Static Resources?
To Remove Query Strings form Static Resources like CSS & JavaScript, you need to add a filter hook in your functions.php file to modify Static Resources URLs i.e. CSS and JavaScript. Filter hooks are used to modify various types of internal data in WordPress.
Add the following code in your functions.php file to Remove Query Strings form Static Resources:
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘remove_css_js_ver’, 10, 2 );
add_filter( ‘script_loader_src’, ‘remove_css_js_ver’, 10, 2 );
25.Remove unused CSS:The unused entries in your CSS files increase the page load time of your website and also affect the site’s performance as the browser has to do extra work parsing all the extra rules. And even if the impact on performance is minimal, it would make your task of maintaining CSS easier if the files are kept clean and well-structured. Opera and the Firefox browser have a popular add-on called Dust Me that scans your current web page and lists all the unused CSS rules that are defined in the stylesheet but not used on the page. Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner.
26.Serve resources from a consistent URL:Sometimes it’s necessary to reference the same resource from multiple places in a page – images are a typical example. Even more likely is that you share the same resources across multiple pages in a site such as .css and .js files. If your pages do need to include the same resource, the resource should always be served from a consistent URL. Ensuring that one resource is always assigned a single URL has a number of benefits. It reduces the overall payload size, as the browser does not need to download additional copies of the same bytes. Also, most browsers will not issue more than one HTTP request for a single URL in one session, whether or not the resource is cacheable, so you also save additional round-trip times. It’s especially important to ensure that the same resource is not served from a different hostname, to avoid the performance penalty of additional DNS lookups.
27.Serve scaled images:Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on mobiles. Sometimes you may want to display the same image in various sizes, so you will serve a single image resource and use HTML or CSS in the containing page to scale it.
For example, you may have a 10 x 10 thumbnail version of a larger 250 x 250 image, and rather than forcing the user to download two separate files, you use markup to resize the thumbnail version. This makes sense if the actual image size matches at least one – the largest – of the instances in the page, in this case 250 x 250 pixels. However, if you serve an image that is larger than the dimensions used in all of the markup instances, you are sending unnecessary bytes over the wire. You should use an image editor to scale images to match the largest size needed in your page, and make sure that you specify those dimensions in the page as well.
As written in post’s title, this is the first part of website optimization. For another part go to our link – Website Optimization Techniques Part-2
[…] Minify JavaScript – How to minify JavaScript […]