5 hacks to improve Front-End experience

In today\\u2019s world, developers and clients have a constant urge to innovate and\\u00a0<\\/span>possess the best technology for their products and services. Be it python frameworks\\u00a0<\\/span>like Django, Flask; java frameworks like spring, struts; or technologies like Kronos, Big\\u00a0<\\/span>Data and Jira. All these smart technologies come with even smarter problems which\\u00a0<\\/span>need to be solved. We, at Consultadd<\\/a>, therefore make sure, that all your problems\\u00a0<\\/span>get solved by our smart IT solutions! This blog is written to give you a picture\\u00a0<\\/span>of what it actually means!<\\/span><\\/p>\”,\”text_align\”:\”j\”},{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”A digital media client of ours, once approached us to resolve an issue they were\\u00a0<\\/span>facing on the front end side of their website and wanted to solve it as soon as\\u00a0<\\/span>possible. We knew that in this competitive age of marketing, a slow website is\\u00a0<\\/span>nothing less than an unforgivable sin! So we grabbed a cup of coffee, rolled up our\\u00a0<\\/span>sleeves, and started on this mission to boost the Front-End Performance of their\\u00a0<\\/span>website.<\\/span>\”,\”text_align\”:\”j\”}],\”fade\”:true,\”text_align\”:\”j\”},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}],\”separator_top_type\”:\”angle-in\”,\”text_align\”:\”j\”},{\”_type\”:\”section\”,\”title\”:\”Section 2\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”text-type\”,\”elements\”:[],\”prefix\”:\”So basically,\”,\”strings\”:\” they needed a site which has to\”,\”suffix\”:\”\”},{\”_type\”:\”skill-bar\”,\”elements\”:[],\”heading\”:\”Be Quick\”,\”percent\”:\”100%\”},{\”_type\”:\”skill-bar\”,\”elements\”:[],\”heading\”:\”Be Secure\”,\”percent\”:\”100%\”},{\”_type\”:\”skill-bar\”,\”elements\”:[],\”heading\”:\”Have Version control\”,\”percent\”:\”100%\”},{\”_type\”:\”skill-bar\”,\”elements\”:[],\”heading\”:\”Occupy lesser memory space\”,\”percent\”:\”100%\”},{\”_type\”:\”skill-bar\”,\”elements\”:[],\”heading\”:\”Have a definite style\”,\”percent\”:\”100%\”}],\”fade\”:true},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}],\”bg_type\”:\”image\”,\”bg_color\”:\”hsl(0, 6%, 87%)\”,\”parallax\”:true,\”bg_image\”:\”httpss:\\/\\/consultadd.com\\/wp-content\\/uploads\\/2017\\/02\\/bg-services-02.jpg\”},{\”_type\”:\”section\”,\”title\”:\”Section 3\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”feature-headline\”,\”elements\”:[],\”content\”:\”The problem of Render Blocking in JS\”,\”icon_type\”:\”line-chart\”,\”text_align\”:\”c\”},{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”Most of the times, the JavaScript in the of the code blocks rendering. This is indeed a problem and could contribute towards a bad user experience. This problem, however, was solved by placing the script at the tail of the website. As a result, the script got downloaded only after the complete HTML was downloaded, therefore, preventing render blocking.<\\/span>\”,\”text_align\”:\”j\”}]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}]},{\”_type\”:\”section\”,\”title\”:\”Section 4\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”feature-headline\”,\”elements\”:[],\”content\”:\”Why custom web fonts?\”,\”icon_type\”:\”magic\”,\”text_align\”:\”c\”},{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”For a unique visual experience, we used a custom text font for the site. However, when certain browsers encounter the font in the site and find out that the font isn\\u2019t available in the user\\u2019s computer, it completely makes everything in that font disappear, which is disastrous (from a reader\\u2019s point of view). Therefore we used a substitution approach in which we tell the browser to display the text content in a rather common font until the custom font gets downloaded. Once the custom font is downloaded, the browser will replace the common font with the custom font and re-render the text.This helped us to provide the client with a site which had a distinct style without compromising on the user experience.<\\/span>\”,\”text_align\”:\”j\”}]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}],\”bg_type\”:\”color\”,\”bg_color\”:\”hsl(74, 2%, 93%)\”,\”separator_top_type\”:\”angle-in\”,\”separator_bottom_type\”:\”angle-in\”},{\”_type\”:\”section\”,\”title\”:\”Section 5\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”feature-headline\”,\”elements\”:[],\”content\”:\” Animations in\\/ Images out\”,\”icon_type\”:\”map-signs\”,\”text_align\”:\”c\”},{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”To make our site uniform and follow a consistent style, we used Scalable Vector Graphics (SVG). SVG is an XML based vector image format, which means that it does not change its quality on resizing and rescaling. Moreover, the basic purpose to use SVG (apart from the fact that it has vector graphics) is that it can easily be styled and animated with CSS.<\\/span>\”,\”text_align\”:\”j\”}]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}]},{\”_type\”:\”section\”,\”title\”:\”Section 6\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”feature-headline\”,\”elements\”:[],\”content\”:\”Must know image format\”,\”icon_type\”:\”image\”,\”text_align\”:\”c\”},{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”Images take about 64% of the total memory space in a website. Therefore, it becomes necessary to find out an image format which has smaller file size than most of the existing formats but at the same time does not compromise on quality. To tackle this, we used an image format called WebP which is 25% smaller than their JPEG counterparts.<\\/span>\”,\”text_align\”:\”j\”}]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}],\”bg_type\”:\”color\”,\”bg_pattern_toggle\”:true,\”parallax\”:true,\”bg_color\”:\”hsl(0, 0%, 84%)\”,\”separator_top_type\”:\”angle-in\”,\”separator_bottom_type\”:\”curve-in\”},{\”_type\”:\”section\”,\”title\”:\”Section 7\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”feature-headline\”,\”elements\”:[],\”content\”:\”Creating our own static site generator\”,\”icon_type\”:\”low-vision\”,\”text_align\”:\”c\”},{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”Dynamic websites take a bit more time to load. This is because every time a user puts in a command, the request goes in to the database (backend) and the result is fetched and then served to the user (frontend).Therefore, we created our own static site using Node.js in which the content is already stored in less-space-occupying flat files which are already prepared for the user even before he\\/she puts in a command. This helped the website to have a greater response to the user\\u2019s queries. Moreover, as there aren\\u2019t any additional plugins for static sites (unlike WordPress), these are comparatively safer and are the least vulnerable to bugs in the code (either intentional or unintentional) which therefore, makes it secure. Also, static sites havethe ability to have version control, which is in fact a great feature when it comes to the development aspect. However, for a particular interactive section of the site, we used dynamic site as it had a better engaging capabilities.<\\/span>\”}]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}]},{\”_type\”:\”section\”,\”title\”:\”Section 8\”,\”elements\”:[{\”_type\”:\”row\”,\”_column_layout\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”column\”,\”_active\”:true,\”size\”:\”1\\/1\”,\”elements\”:[{\”_type\”:\”text\”,\”elements\”:[],\”content\”:\”Hence, all of the above problems were tackled keeping one motive in mind, i.e., to boost the frontend performance of the website and to make it quick, secure, visually pleasing and efficient on the memory aspect. And guess what! The project was completed before time. Although there were some obvious challenges in situations where we got stuck at a dead-end, but we brainstormed and eventually got the solutions which were unique, innovative and impressive. Back here at Consultadd<\\/a>, we plan, execute, test and deliver at appropriate time with technologies to benefit a client with better solutions. And that\\u2019s how we manage to have smart IT solutions for smarter business.<\\/em><\\/span>\”,\”text_align\”:\”j\”},{\”_type\”:\”author\”,\”elements\”:[]},{\”_type\”:\”social-sharing\”,\”elements\”:[],\”facebook\”:true,\”twitter\”:true,\”google_plus\”:true,\”linkedin\”:true,\”email\”:true,\”reddit\”:true,\”pinterest\”:true}],\”fade\”:true,\”fade_animation\”:\”in-from-bottom\”},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]},{\”_type\”:\”column\”,\”size\”:\”1\\/1\”,\”_active\”:false,\”elements\”:[]}]}],\”text_align\”:\”j\”,\”bg_type\”:\”color\”,\”bg_color\”:\”hsl(214, 30%, 34%)\”,\”separator_top_type\”:\”curve-in\”}]

Published On: August 3rd, 2017 / Categories: Technology / Tags: /

Subscribe To Receive The Latest News

    Add notice about your Privacy Policy here.