Comparative Study of Website Page Size as Design Issue in Various Websites

Published Online December 2014 in MECS

Website is combinations of related web pages served through single domain. Numbers of different kinds of websites are there but the most widely used categories of the websites are Educational, Commercial, Government, social networking and job portals. These days it has become mandatory for and organization big or small to develop a website to render its services online through different networks. With increase in the number of websites and its popularity it becomes necessary for an organization to put lot of efforts to design websites carefully so that it can easily cater to the need of all the different categories of the users. A number of website design issues are there which needs to be kept into consideration while designing websites. One of the most important issues among all is the total size of webpages. A webpage with considerable overall size not only limits memory requirements but also minimizes the page loading speeds and hence increases the accessibility of the website making it more user-centric and engaging. With the advent of large increase in the size of websites due to newer features and facilities, there has been a massive increase in the loading time of webpages with the result it has becomes mandatory for a website to implement strategies that will result in reduced webpage total size. Numbers of different organizations are there which are responsible for developing and implementation of different website development standards.

To evaluate the website design according to the different standard so that it provide better interaction facilities to users different types of automated tool are available and to evaluate the websites design w.r.t. the standards developed by W3C, an automated tool is developed which will take URL of the website as an input and then parse the complete code of the website and compare it with the website code that it is written according to the standards of W3C or not. The working of the parser / automated tool developed is explained in the below given “Fig. 1.”

Fig. 1: Block Diagram of the parser.

*Determines the total size by first extracting the files of different extensions by parsing the html file received from server and then calculating their individual sizes by request/response methods.

The parser will take URL of the website as input and then send it to the server and from the server HTML code of the website is supplied to the interface for making comparison with the existing standards.

The algorithm of the automated tool developed is given below:

Algorithm 4: For determining total size (in terms of memory requirements) of a website.

Input: URL of the website

Output: total size of website (in kbs)

Method: (steps are numbered for better understandability)

Begin

Step I: Generate a request for obtaining HTML file of the website by passing url to the server.

Step II: Parse the HTML file for various component files on one by one basis.

Step III: For each type (e.g. image, css etc.) of component file

• (i)    Generate a request to the server (as e.g. for each image file as there can be multiple files of same component type).

• (ii)    Calculate the total bytes send by the server for each file.

• (iii)    Add the byte count calculated to the total size for each particular component type to determine the total size of each type of component file

Step IV: Add the total size of component file to get the total size of the website.

End

• II.    Methodology

• A.    Problem Identification

When we talk of website size we mean the total memory required by a server for its storage. A website is comprised of many different components with varying properties and sizes. There are various components of the website that contribute to the its size include size of the total HTML used, total JavaScript, total CSS, static images, CSS images, multimedia, frames and other [1]. Size is of course only part of the “performance formula” for a website i.e. one of the factor for websites overall performance [5]. But it’s often an important one, especially if you’re targeting users that won’t necessarily have optimal Internet connections.

Web pages have been growing in size all along. The Web experience is constantly getting richer, getting more content, and people in general are getting increasingly capable Internet connections. It’s a natural progression.

That doesn’t mean we should stop caring about page size, though. It’s still an important speed factor, and with today’s freely available developer tools there are so many easy ways to analyze and optimize web pages that there really are no excuses for overly bloated websites.

Another important factor that is affected by website size is search engine ranking of websites as now a days search engines like Google are using page speeds in its search ranking algorithms [2] and page loading speeds of websites are directly proportional to size of the web page. As size increases the more time it takes to load a page. The main factors that influences the download time are page size (bytes), number and types of component, number of server from the accessed web [4].Wilson (1998) recommends limiting the total graphics and text for a single Web page to 60KB (HTML page text, background image, logo, navigation bar, navigation buttons, and award logos) for a better page loading speed [3].

• B.    Online tool for testing Websites

The tool Website Design Evaluator developed for the purpose to determine the deviations in the design issues among different categories of websites from the standards provided by the concerned organizations considered various features of the design parameters. As we know total size of a website can be determined by calculating the size of the components of which the website is comprised of. Hence it can be concluded that more the size of a website more is the no. of components employed in it. For website size parameter the features that are considered by the tool are as under:

Total HTML used

Total CSS used

Static Image

CSS Images

Java script

There are other features that contribute to the overall size of the website but the features described above are the one that are almost part of every website (other features may or may not be present depends upon whether the developer/designer has employed them in a website or not) and are the ones that determine maximum of the total size of a website.

• C.    Sample Data

The Sample data taken in gathering statistics for the website size parameter is given in the Table 1 below. A total of 100 websites belonging to different categories were considered. Since different categories of websites are designed in consideration with the constraints that apply to them as per the category they belong to. Therefore the diversity among the categories of websites considered helped in better understanding the variations in the features undertaken for the parameter and the statistics collected from the tool.

Table 1. Sample Data

S.No Govt. Websites Educational Websites Commercial Websites Social-Networking Websites Job Portal Websites 1. 2. www.careerbuilder.c o.in 3. 4. .in 5. 6. n 7. 8. 9. n www.monesterindia. com 10. www.placementindia .com 11. 12. 13. in www.findtherightjob .com 14. m 15. m 16. 17. m m 18. 19. www.tweetmyjobs.c om 20.

• D.    Results and Discussion

The statistics obtained on testing the Sample websites shown in Table 1 above with help of automated tool is given below in Table 2:

“Fig. 2,” and the below given Fig. 3 shows the average size for different categories of websites.

%age of websites with size greater than as recommended

Table 2. Stataistics

Size Website Category	Size >100kb (in %)	Size<100kb (in %)
Educational Websites	25	75
Job Portal Websites	55	45
Social Networking Websites	20	80
Commercial Websites	25	75
Govt. Websites	30	70

• ■    Govt.

• ■    Commercial

• ■    Educational

• ■    Social Networking

• ■    Job portal

The percentage of websites with the size greater than as recommended in the W3Cstandards are given below in

Fig. 2: % of Website size with greater size.

Fig. 3: Average Size.

Based on the analysis from the graph shown in “Fig. 3,” above, it can be concluded that none of the website categories follow the standards as far as website size parameter is concerned. Today, the aim is still to confine the sites less than 100 kbps, as that would equate to a rough download time of 30 seconds on a dial-up connection. The 100kB limit is still a great rule of thumb. Broadband is common place now, and yes, many pages are substantially over that. But dialup is still in use, mobile phones are being used more often (and are not as fast as desktop browsers), and people usually get broadband so they can get the same stuff faster, not so you can stuff pages with more pictures. Another important factor is that Google is now using page speeds in its search ranking algorithms. Hence it can be conclude from the above graph the site category that totally diverge from the standards is social networking and the one that diverges least is educational site category [2].

The testing of all the govt. sites was done by using the website design evaluator tool which was developed to calculate the size of parameters like html, css, css images, js and static images. It has been observed that 30 percent of govt. sites are with less than or equal to 100kb rest all does not follow the standard of having a size less than the recommended size of 100kb thus affecting the page loading speed which is very important factor as far as the users are concerned.

The below given “Fig.4,” and “Fig. 5,” shows the deviation of Government websites form the standards already defined and recommended by W3C.

5000 4800 4600 4400 4200 4000 3800 3600 3400 3200 3000 2800 2600 2400 2200 2000 1800 1600 1400 1200 1000

800 600 400 200

^^^^^^ Govt sites

^^^^^™standard line

Fig. 4 Graph showing deviation of Govt. websites.

Sites

Fig. 5 Percentage Graph for Govt. websites

The testing of all the educational sites was done by using the website design evaluator tool which was developed to calculate the size of parameters like html, css, css images, js and static images. It has been observed that 25 percent of educational sites are with less than or equal to 100kb rest all does not follow the standard of having a size less than the recommended size of 100kb thus affecting the page loading speed which is very important factor as far as the users are concerned.

The below given “Fig.6,” and “Fig. 7,” shows the deviation of Educational websites form the standards already defined and recommended by W3C.

Fig. 6 Graph showing deviation of Educational sites.

Fig. 7 Percentage Graph for Educational websites

The testing of all the commercial sites was done by using the website design evaluator tool which was developed to calculate the size of parameters like html, css, css images, js and static images. It has been observed that 25 percent of commercial sites are with less than or equal to 100kb rest all does not follow the standard of having a size less than the recommended size of 100kb thus affecting the page loading speed which is very important factor as far as the users are concerned.

The given “Fig. 8,” and “Fig. 9,” shows the deviation of Commercial websites form the standards already defined and recommended by W3C.

Fig. 8 Graph showing deviation of Commercial websites.

Fig. 9 Percentage Graph for Commercial websites

The testing of all the social networking sites was done by using the website design evaluator tool which was developed to calculate the size of parameters like html, css, css images, js and static images. It has been observed that 20 percent of social networking sites are with less than or equal to 100kb rest all does not follow the standard of having a size less than the recommended size of 100kb thus affecting the page loading speed which is very important factor as far as the users are concerned.

The given “Fig. 8,” and “Fig. 9,” shows the deviation of Social Networking websites form the standards already defined and recommended by W3C.

Fig. 10 Graph showing deviation of Social Networking websites.

Fig. 11 Percentage Graph for Social Networking websites.

The testing of all the job portal sites was done by using the website design evaluator tool which was developed to calculate the size of parameters like html, css, css images, js and static images. It has been observed that 55 percent of job portal sites are with less than or equal to 100kb rest all does not follow the standard of having a size less than the recommended size of 100kb thus affecting the page loading speed which is very important factor as far as the users are concerned.

The given “Fig. 8,” and “Fig. 9,” shows the deviation of Social Networking websites form the standards already defined and recommended by W3C.

200 0

^^^^^^^^^ Job portal sites standard line

Fig. 12 Graph showing deviation of Job Portal websites.

Fig. 13 Percentage Graph for Job Portal websites.

• III.    Limitations

In addition to the components of the websites considered that have a major contribution towards the overall size of a website; there are also other features that though negligibly but contribute to total size of a website. These features need to be included in order to calculate appropriate sizes to help developers/designers to build websites having better performances. There are other categories of features that are part of the overall size of websites which are described below [1].

• 1)   Multimedia

• 2)    frames

• 3)    iframes

• 4)    logo files

• 5)    Animation and other.

By including these types of files in computing the overall size, the statistics that will be generated by this tool with reference to website size will be more accurate and hence will help in determining the effect of the webpage size on other web designing parameters to more appropriate levels.

• IV.    Future Scope

In future more detailed study of this parameter can help in bring out the flaws that crept into this parameter or the features that has been over sighted due to their negligible effects on this parameter will be taken into consideration. The sizes of the components like multimedia, animation, frames etc. will be computed and included in the total size of the websites to generate statistics that are more accurate and will help the designers to find out the deviations in the sizes of websites from the standards provided by concerned organizations and hence create page that are more efficient and user centric. All the features discussed above are under consideration and will be included in the tool to make this tool a solution for maximum number of webpage design issues related to website size problem.

• V.    Conclusions

Currently page size is one of the important issues in web development process as it is affecting a number of designing areas. Increase in webpage size is a natural progression as more and more content is being added to website with each coming day. From the above results, analysis and discussion it is clear that increase in webpage size is becoming a major obstacle in the web designing process.

Major of the website considered during the webpage size evaluation process on Website Design Evaluator confer that none among them is up to the standards i.e. the 100kb thumb rule provided for the webpage size is followed by a very least number of websites and hence degrading their overall performance.

The growing demands of the clients to employ more features and content are restricting the developers/designers to completely follow the standards recommended. It is clear that more efforts are required to meet with these criteria in the context of webpage size problems for websites.

Acknowledgment

The author wish to thank Academicians and Designers working in different websites development houses for sharing their valuable thoughts related to website design. A special thanks to the world wide web consortium for providing such a beautiful design standards so that websites can be designed in a given set parameters to make website behaviors uniform for all types of different categories of the users.