December 24, 2014

Front End Optimization: Tips To Make Apps and Websites Work Better in The Browser

Maintaining an up to date website has become a necessary price for running a business

It seems like everyday you read about changes in online web development you come across a new term. For those looking to improve their website or app, Front End Optimization may not feel new, but its importance certainly brings new value to a business.

Front End Optimization (FEO) is a phrase first coined by the team at Yottaa, a web testing cloud solution and development firm, in their holiday survival guide. FEO means a renewed focus in improving how a website works within a browser. It means inspecting elements rendered in the browser and improving how they are called in the DOM. The DOM is the document object model, the set if instructions that tell the browser how to render an app page or a website page.

Optimization is usually conducted through a browser development tool. Google Chrome DevTools and Firefox Firefly are popular with developers.

In addition, Microsoft offers the F12 Development Tool for the Internet Explorer 11 browser, complete with an online verification tool/support community called Internet Explorer Development Channel.

These tools are designed to inspect website elements while a page or app appears in the browser. These tools also permit live adjustments to the elements and how each element is exposed in the DOM.The following tips can organize an FEO effort to make a website or app sustainable.

Compress images - minifying images can save time when they are loaded into a browser.
Expose variable and audit how they functions within a Javascript function.
Locate calls for Javascript code at the end of a page, where logically or functionally possible. Many analytics codes are designed to be placed last, so that they can count when a page is loaded into the browser.
Consider asynchronous scripts, where practical, to aid page rendering performance. use page loading testers such as the tools described in this Zimana post (App developers may also find this Zimana post on latency worth a read, too!)
Minify Javascript - if the Javascript has to be located on the page, minify it! This has been done in many cases where jQuery is applied, but Don Juckett in his book Javascript and JQuery notes that balancing the degree of minification is necessary. A minified script permits faster loads, but it can also misfire if the code has been minified too extensively.
Check for buggy performance across browsers. If performance exist across the major ones, the clearly the issue lies somewhere within the code. Validator.W3.org can validated code.

One comment on “Front End Optimization: Tips To Make Apps and Websites Work Better in The Browser”

Soumya Roy says:

January 24, 2015 at 9:38 am

All good and useful suggestions to make a site perform better and faster at user end. Additionally CSS Sprites, GZip compression and CDN can be used to make websites load faster on web and mobile browsers. Even minimizing HTTP calls help a lot.
Site loading speed has a huge impact on user experience, conversion rate, optimization and finally organic ranking.
Good topic, actionable points and a really good read.

Regards
Soumya Roy

Reply

Front End Optimization: Tips To Make Apps and Websites Work Better in The Browser

One comment on “Front End Optimization: Tips To Make Apps and Websites Work Better in The Browser”

Leave a Reply Cancel reply

WHAT WE DO

WHO WE ARE

LET’S CONNECT