Robert Dannelly Blog Senior Software Engineer - Dannelly Solutions: May 2015

Thursday, May 21, 2015

Auto load content on scroll down

First Special Thanks to --- Adam Khoury @ www.DevelopPHP.com - https://www.developphp.com/video/JavaScript/Scroll-Load-Dynamic-Content-When-User-Reach-Bottom-Ajax

I extended this a bit to include some back to top feature.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JavaScripAutoScroll.aspx.vb" Inherits="JavaScripAutoScroll" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JavaScript Auto Populate the page | MMWebs.biz</title>

    <style type="text/css">
        div#status{ position: fixed;font-size: 24px;}
        div#wrap{ width: 800px; margin: 0 auto}
        div.newData{ height: 1000px;background: #09F;margin: 10px 10px;}
        .back-to-top {
                        position: fixed;
                        bottom: 2em;
                        right: 0px;
                        z-index: 999;
                        text-decoration: none;
                        color: #000000;
                        background-color: rgba(235, 235, 235, 0.80);
                        font-size: 12px;
                        padding: 1em;
                        display: none;
                    }
 
.back-to-top:hover {    
                        background-color: rgba(135, 135, 135, 0.50);
                    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function yHandler() {
            var wrap = document.getElementById('wrap');
            var contentHeidht = wrap.offsetHeight; // Gets page content height
            var yOffset = window.pageYOffset; //Gets the vertical scroll position
            var y = yOffset + window.innerHeight;
            if (y >= contentHeidht) {
                wrap.innerHTML += '<div class="newData"></div>';
                // Ajax call to get more dynamic data goes here
            }
            var status = document.getElementById('status');
            status.innerHTML = contentHeidht + " | " + y;
        }
        window.onscroll = yHandler;
    </script>
</head>
<body>
    <a href="#" class="back-to-top">Back to Top</a>
    <form id="form1" runat="server">
    <div>
        <div id="status">0 | 0</div>
        <div id="wrap"><img src="framework/images/tempMatrix.gif" width="800px" height="1200px" /></div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
 
    jQuery('.back-to-top').click(function (event) {
        event.preventDefault();
        jQuery('html, body').animate({ scrollTop: 0 }, duration);
        return false;
    });
</script>

Thursday, May 14, 2015

Web site performance - Keys to running a high performance Web site

So you have built your site and lets say it is an eCommerce site which displays tens of thousands of static images and gets 500,000 session per month.

TEST PERFORMANCE
http://www.webpagetest.org/ (Best performance tester on the Web)

However, you are seeing poor performance from servers around the world. How do you fix this. Well in the coming weeks I will tell you. Right now I am doing research on this very thing and I will return to let you know the results.

Test 1 --- Servers hosted in NC and the site being hit from OR--- Currently the site I am supporting has a first hit load time of 6.226 seconds, but with caching this is reduced to 2.750 seconds on the second hit. However the 6.226 seconds is still way to long.

Test 2 --- Servers hosted in NC and the site being hit from NY --- Currently the site I am supporting has a first hit load time of 4.053 seconds, but with caching this is reduced to 1.319 seconds on the second hit. However the 4.053 seconds is still way to long.

Test 3 --- Servers hosted in NC and the site being hit from VA --- Currently the site I am supporting has a first hit load time of 5.211 seconds, but with caching this is reduced to 3.428 seconds on the second hit. However the 5.211seconds is still way to long.

"F" --- Currently the key issues are the First Byte Time --

First Byte Time	Applicable Objects	Time to First Byte for the page (back-end processing + redirects)
First Byte Time	What is checked	The target time is the time needed for the DNS, socket and SSL negotiations + 100ms. A single letter grade will be deducted for every 100ms beyond the target.

The second issue is Cache of static content, however I cannot cache this content as this is an eCommerce site and you have to be sure you follow PCI rules https://www.pcisecuritystandards.org/

How do you decrease this 6.226 seconds issue --- My attempts will be to use Content Delivery Network (CDN) aka EDGE SERVERS.

In the coming weeks I will be updating this blog to give the results.

My work will be to off load the Images, JavaScript Files (JS), and Cascading Style Sheets (CSS), to increase performance of the site.

I will be very curious to see if that 500,000 sessions will increase once we implement CDN to increase the sites performance.

More to come.