I have the following code in jsfiddle.  I have been told this this code is messy and not optimised.  My question is, what about this is messy and unoptimised and how can it be tidied up and optimised to reduce file size and so it becomes more responsive?$(document).ready(function() {    $( .column ).sortable({        connectWith: .column,        handle: .widget_header_icon, .widget_header_title,        start: function( event, ui ) {            $('.menu_button.active, .configure_button.active').click();            $('.menu_button, .configure_button').removeClass(active);        }    });    $(document).click(function(event) {        $('.menu_button.active, .configure_button.active').click();        $('.menu_button, .configure_button').removeClass(active);    });    $('.dropdown_left, dropdown_right').each(function() {        $(this).css('left', $(this).prev().position().left);    });    $('.menu_button, .configure_button').click(function(event) {        $(this).siblings('.menu_button.active, .configure_button.active').click();        $(this).toggleClass('active').next().toggle();        event.stopPropagation();    });    $('.widget_configure_button').click(function(event) {        var $nav3 = $(this),            $dd = $nav3.next('.dropdown');        $nav3.toggleClass('active');        $dd.css({            top: $nav3.outerHeight()+10,            right: 10        });        $nav3.hasClass('active') ? $dd.show() : $dd.hide();    });});/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;    font-family:arial;    font-size:12px;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}/**/body{    background:#F5F5F5;}.notification{    background:#FFFFFF;}.inner_notification{    width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/    margin:auto;    padding:10px;    background:#EEEEEE;}.header{    background:#EEEEEE;}.inner_header{    width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/    margin:auto;    padding:10px;    background:#DDDDDD;}.top_menu{    background:#DDDDDD;}.inner_top_menu{    width:1003px; /*1003 max width without horizontal scroll for 1024x768 screens*/    margin:auto;    position: relative;    background:#CCCCCC;}.menu_button {    float:left;    padding:10px;    cursor:pointer;}.configure_button {    float:right;    padding:10px;    cursor:pointer;}.widget_configure_button {    float:right;    padding:10px;    cursor:pointer;}.menu_button::selection, .configure_button::selection, .widget_configure_button::selection { background:transparent; }.menu_button::-moz-selection, .configure_button::-moz-selection, .widget_configure_button::-moz-selection { background:transparent; }.menu_button:hover, .configure_button:hover, .widget_configure_button:hover {    background-color:#ffffff;}.menu_button.active, .configure_button.active, .widget_configure_button.active  {    padding:10px;    background-color:#ffffff;    z-index:1;}.dropdown {    display:none;    background-color:#ffffff;    position:absolute;    top:40px;    padding:10px;    cursor:pointer;}.dropdown_left {    display:none;    background-color:#ffffff;    position:absolute;    top:32px;    padding:10px;    cursor:pointer;    z-index:20;}.dropdown_right {    left: auto ! important;    right: 0;}.clearfix{    clear:both;}.title{    background:#CCCCCC;}.inner_title{    width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/    margin:auto;    padding:10px;    background:#BBBBBB;}.content{    background:#BBBBBB;}.inner_content{    width:993px; /*1003 max width without horizontal scroll for 1024x768 screens*/    margin:auto;    padding:10px 0px 0px 10px;    background:#AAAAAA;}.column{    width:331px;    float:left;}.widget{    background:#EEEEEE;    padding:10px;    margin-bottom:10px;    margin-right:10px;    position:relative;    z-index:10;}.widget_header{    background:#DDDDDD;    margin-bottom:10px;    overflow: hidden;}.widget_header_icon{    padding:10px;    float:left;    cursor:move;}.widget_header_title{    padding:10px;    float:left;    cursor:move;    background:#CCCCCC;    width:210px;}.widget_sub_header{    background:#DDDDDD;    margin-bottom:10px;    padding:10px;    overflow: hidden;}.widget_content{    background:#CCCCCC;    padding:10px;    margin-bottom:10px;    height:200px;}.widget_footer{    background:#BBBBBB;    padding:10px;}.footer{    background:#AAAAAA;}.inner_footer{    width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/    margin:auto;    padding:10px;    background:#999999;}/*-------------*/.ui-sortable-placeholder { background:#BBBBBB; visibility: visible !important; }.ui-sortable-placeholder * { visibility: hidden; }/*------------*/<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd><html>    <head>         <meta http-equiv=content-type content=text/html; charset=UTF-8>        <title></title>         <script type=text/javascript src=jquery.min.js></script>        <script type=text/javascript src=jquery-ui.min.js></script>        <script type=text/javascript src=script.js></script>        <link type=text/css href=style.css rel=stylesheet />    </head>     <body>        <div class=notification>            <div class=inner_notification>                notification            </div>        </div>        <div class=header>            <div class=inner_header>                header            </div>        </div>        <div class=top_menu>            <div class=inner_top_menu>                <div class=menu_button>menu</div>                <div class=dropdown_left>                    <div>icon Default 2</div>                    <div>icon Reports 2</div>                    <div>icon Other 2</div>                </div>                <div class=configure_button>(c)</div>                <div class=dropdown_left dropdown_right>                    <div>icon Default 2</div>                    <div>icon Reports 2</div>                    <div>icon Other 2</div>                </div>                <div class=clearfix></div>            </div>        </div>        <div class=title>            <div class=inner_title>                title            </div>        </div>        <div class=content>            <div class=inner_content>                <div class=column>                    <div class=widget>                        <div class=widget_header>                            <div class=widget_header_icon>( i )</div>                            <div class=widget_header_title>header title</div>                            <div class=widget_configure_button>(c)</div>                            <div class=dropdown>                                <div>icon Default 3</div>                            </div>                        </div>                        <div class=widget_sub_header>                            sub header                        </div>                        <div class=widget_content>                            content                        </div>                        <div class=widget_footer>                            footer                        </div>                    </div>                    <div class=widget>                        <div class=widget_header>                            <div class=widget_header_icon>( i )</div>                            <div class=widget_header_title>header title</div>                            <div class=widget_configure_button>(c)</div>                            <div class=dropdown>                                <div>icon Default 3</div>                            </div>                        </div>                        <div class=widget_sub_header>                            sub header                        </div>                        <div class=widget_content>                            content                        </div>                        <div class=widget_footer>                            footer                        </div>                    </div>                </div>                <div class=column>                    <div class=widget>                        <div class=widget_header>                            <div class=widget_header_icon>( i )</div>                            <div class=widget_header_title>header title</div>                            <div class=widget_configure_button>(c)</div>                            <div class=dropdown>                                <div>icon Default 3</div>                            </div>                        </div>                        <div class=widget_sub_header>                            sub header                        </div>                        <div class=widget_content>                            content                        </div>                        <div class=widget_footer>                            footer                        </div>                    </div>                    <div class=widget>                        <div class=widget_header>                            <div class=widget_header_icon>( i )</div>                            <div class=widget_header_title>header title</div>                            <div class=widget_configure_button>(c)</div>                            <div class=dropdown>                                <div>icon Default 3</div>                            </div>                        </div>                        <div class=widget_sub_header>                            sub header                        </div>                        <div class=widget_content>                            content                        </div>                        <div class=widget_footer>                            footer                        </div>                    </div>                </div>                <div class=column>                    <div class=widget>                        <div class=widget_header>                            <div class=widget_header_icon>( i )</div>                            <div class=widget_header_title>header title</div>                            <div class=widget_configure_button>(c)</div>                            <div class=dropdown>                                <div>icon Default 3</div>                            </div>                        </div>                        <div class=widget_sub_header>                            sub header                        </div>                        <div class=widget_content>                            content                        </div>                        <div class=widget_footer>                            footer                        </div>                    </div>                    <div class=widget>                        <div class=widget_header>                            <div class=widget_header_icon>( i )</div>                            <div class=widget_header_title>header title</div>                            <div class=widget_configure_button>(c)</div>                            <div class=dropdown>                                <div>icon Default 3</div>                            </div>                        </div>                        <div class=widget_sub_header>                            sub header                        </div>                        <div class=widget_content>                            content                        </div>                        <div class=widget_footer>                            footer                        </div>                    </div>                </div>                <div class=clearfix></div>           </div>        </div>        <div class=footer>            <div class=inner_footer>                footer            </div>        </div>    </body> </html>
Web page with draggable boxes in a grid
javascript;performance;jquery;html;css