Modern web design trends require designers to be exceptionally creative. After all, everything “has been done already”, while new projects need to astonish, inspire, or at least dazzle the users with a “WOW” effect. OK, at FROGRIOT, we have skilled graphic designers who have heads full of innovative ideas. We can combine graphics, videos, animation and content in order to create beautiful designs. Next, we go from an ingenious design to execution – we need to code everything. OK, at FROGRIOT, we have adroit programmers, who know how to do that. Graphical design comes to life with thousands of lines of code and the website gets made. The graphics and HD videos are easy on the eyes, while impressive animations encourage interaction with the site. Everybody is proud of a job well done – let the champagne flow 🙂
“What about optimization of the website’s speed?” – you may ask
Our answer is simple – if the developers did not respect the rules of optimization during coding phase, before champagne corks fly, they need to optimize the website so that it works swiftly and quickly on any device.
In a world, where a significant part of the traffic is generated by mobile devices (smartphones, tablets), website optimization becomes even more important than usual. Mobile users are not always in the range of LTE or 3G, which can often render opening “heavy” sites impossible. Also significant is the fact that heavy websites also tend to quickly drain internet data reserves.
How can we optimize a website and improve its performance? I have listed below a few key tips that will help you find the best solution.
What can we optimize to improve performance?
1. First of all – images
An impressive slider on the home page, a bulky portfolio with large images in great resolution, hundreds of graphical elements which make your site look simply fabulous – all of these are elements integral to an effective layout. However, the price in load time is sometimes too steep to pay. In the case of mobile phones we also pay with precious 3G/LTE transfer. Therefore:
2. Critical rendering path – the most important element of “heavy” site optimization.
Although this sounds arcane/terrifying – well, OK, it isJ. The matter of optimization of critical rendering path is a topic for a different post. Now it’s sufficient to explain what this path is. Google defines critical rendering path as “code and resources needed to display the initial view of a website”. In other words “rendering path” is a “event list” that need to happen in order for the browser to display “above the fold” content (i.e. the part of the website that is visible for the user before scrolling down). Below is a sample sequence of events needed to display a very simple website on browser (1 CSS, JS script, one image):
Surely, your website is significantly more complex and requires more than one CSS style, JS script and an image. That’s why the browser will need to perform considerably more actions than listed above. If you optimize critical rendering path, your website will work smoothly and quickly.
3. Minimizing Server Response Time – make sure your server “sends” websites to the browser quickly.
Your browser requests various resources (e.g. images) from the server. The server responds to the browser and provides resources as requested. If you minimize server response time, your website will run considerably faster.
How can you go about doing it? If your website requires a lot of resources (images, videos, music), the only solution is to buy good hosting, which undoubtedly means higher costs.
4. Browser caching – help the browser to “memorize” resources, so that it can load them faster.
The browser can “memorize” resources it once downloaded. Their further use then becomes very quick. You yourself can decide which resources should be memorized and for how long. If the mod_expires module is installed on your server, you can define the parameters for “memorization” in your .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month "
ExpiresByType image/gif "access 1 month "
ExpiresByType image/png "access 1 month "
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
If you want the browser to memorize resources for your website differently, you can freely modify the code (e.g. access 1 month >> access 1 year).
5. Scripts that block rendering – make sure that no script blocks loading of the website.
In point 2, I mentioned “initial view” and “above the fold” content, that is, the part of the website that is first displayed in the browser (without scrolling). If possible, load scripts that are not necessary to display initial view as late as possible, i.e. move their loading before the </body> tag.
6. Priorities of visible contents – decide which contents are the most important for the user.
Very often, there are elements in the code that are not visible in the foreground. These include pop-ups, sidebars, footers, social media buttons. Put these elements at the “end” of the site – this will make the most relevant contents to load sooner.
7. Optimization of CSS loading – CSS needs to make website rendering faster, not slow it down.
Your website will work faster if you follow as many of the below guidelines as you can:
<link rel=”stylesheet” type=”text/css” href=”http://yourwebsite.com/style.css” media=”screen” title=”style” />
<html>
<head>
<style>
H1 {color: #FF0000;}
</style>
</head>
<body>
<H1>Hello FROGRIOTERS!</H1>
</body>
</html>
@import url(“style.css”)
<h1 style=”line-height: 20px;”>
<div style=”color:#000000;”>
If you use the inline code, you should be aware that this is not a good solution from the point of view of maintenance of the application. Such an approach makes it difficult to efficiently navigating the source code. You can decide whether or not to go in that direction.
8. CSS – use sprites
Designers very often put in their designs many small graphic elements, like icons, arrows or navigation elements. These elements are an integral part of a good layout, but when each of them is stored in a separate file, their loading surely takes us precious (milli)seconds.
Combine the small images into a single file, reducing the amount of references to resources – this will also make your website load faster.
9. CSS and JS sequence
If in your code you first refer to CSS and then to JS, your website will load faster 🙂
10. Combine external JS scripts
References to a smaller number of files are faster. It’s easier to download one large file than ten smaller ones, and therefore, if you use several plugins, put them in one JS file and load all of them at once.
11. Minify CSS, JS
In this case, smaller is better ;). Smaller files mean faster load time of the website. You can use online tools that will help you delete useless characters (spaces, tabs, etc.) from the file and considerably reduce the weight (up to 20%) of JS and CSS scripts:
http://jscompress.com/
http://refresh-sf.com/
12. JS inline
Similarly to CSS, small JS scripts put directly into HTML code will “load” faster.
<html>
<head>
<script type="text/javascript">
function welcome(){ alert('Hello FROGRIOT! '); };
</script>
</head>
<body>
<a href=”#” onClick=”welcome();”>KLIKNIJ</a>
</body>
</html>
The above script is too short to bother with creating a separate JS file for it. Unfortunately, the weak point of this solution may be subsequent difficulty in maintaining an webpage with the inline code.
13. Delaying of JS loading (Analytics, Social media buttons, widgets) – the site will display faster, if you delay loading JS scripts.
If possible, load JS scripts only after the website has been displayed. Many of the site’s elements don’t have to be immediately visible, and therefore it is advisable to load them after the site is displayed in the user’s browser.
Combine a couple of smaller scripts into one myscripts.js and load it after the page is displayed. For this purpose we can use a short JS script. The code should be put before the </body> tag.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "mojeskrypty.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
14. Avoid bad requests
Make sure that the code does not contain any references to resources that do not exist on the server (images, scripts, style). The fewer references to the resources, the shorter load time of a site, so it’s definitely something to pay attention to.
15. Delaying image loading – postpone loading of images.
Images that are not visible in “initial view” can be loaded a bit later. One of the ways of doing this may be displaying a replacement image first, and later the right graphic. IMG element may look as follows:
<img src=”data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=” data-src=”image-that-should-be-loaded”>
Such kind of image will be loaded very quickly. Now you just have to replace the image and add the right graphic:
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src' ));
}
}
}
window.onload = init;
</script>
16. Delaying video loading – postpone loading of videos.
Similar to images, you can also delay loading of videos (YouTube, Vimeo).
<iframe width=”560″ height=”315″ src=”” data-src=”// www.youtube.com/watch?v=c3fvp2E1COM” frameborder=”0″ allowfullscreen></iframe>
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src' ));
}
}
}
window.onload = init;
</script>
17. Web fonts
There are several ways to add beautiful fonts to your website. You can use ready-made external solutions such as Google Fonts, but unfortunately this method is not the most efficient. You will obtain shorter load time by hosting fonts on your server. You just have to initialize fonts in your CSS file as follows:
@font-face {
font-family: Montserrat;
font-weight: 400;
src: url("/fonts/Montserrat-Regular.otf") format("opentype");
}
@font-face {
font-family: Montserrat;
font-weight: 200;
src: url("/fonts/Montserrat-Hairline.otf") format("opentype");
}
@font-face {
font-family: Montserrat;
font-weight: 300;
src: url("/fonts/Montserrat-Light.otf") format("opentype");
}
@font-face {
font-family: Montserrat;
font-weight: 600;
src: url("/fonts/Montserrat-Bold.otf") format("opentype");
}
@font-face {
font-family: Montserrat;
font-weight: 700;
src: url("/fonts/Montserrat-Black.otf") format("opentype");
}
18. Compression/ GZIP/Deflate – compression speeds up loading and limits data transfer usage which is very important for mobile devices.
Compression may save 50-70% of file size. In order to turn compression off, appropriate commands should be entered in the code of the file .htaccess:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
OR
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript </IfModule>
19. Do not use redirections
Redirections on websites are special commands that automatically redirect the user to another location. They generate subsequent requests, which, of course, takes its toll and has a negative impact on page load time. Redirections are often the source of performance problems, so you should avoid them.
20. CDN – Content Delivery Network – locate website files “closer” to users
CDN is a network of servers located in different places in the country or the world, which store your website files. Users visiting your website receive data from the nearest server, which allows the website to be displayed faster. CDN services are offered by many providers, below you can find some of them:
https://www.ovh.pl/cdn/
http://www.highwinds.com/
https://www.cloudflare.com/
https://www.fastly.com/
http://www.edgecast.com/
http://aws.amazon.com/cloudfront/
http://www.maxcdn.com/
http://www.cachefly.com/
Final comment.
The above list does not exhaust the topic of website optimization, but is a strong “pill” that will stimulate a drowsy website. Each project is different and each solution will require an individual approach. When creating a project plan, it is worth to devote some time for optimization of a created website. This will allow, in comfortable conditions, to locate all those “bottlenecks” in the website and take proper steps to eliminate them. I invite you to test your websites by using the tool https://developers.google.com/speed/pagespeed/insights/ and I wish you fruitful optimization.
