Smaller Page Footprints Lead to a Better SERP on Google

Yusuke Sawaya is a prolific user of codepen.io, which is an online outlet in which creative forms of applying syntax in the HTML, CSS, and JavaScript languages to create sophisticated animations are displayed and exhibited for the benefit of web designers. Contemporary web design rewards having scripts instruct clients' browsers to structure and animate effects that would previously have been exported out of animation software as large files because clients' browsers take much less time to parse code than load such files. A common criterion for a given website to fulfill in its efforts to place high in relevant SERPs is the minimization of its pages' "footprints" in terms of file size; Google's ranking algorithms penalize websites that perform more sluggishly than necessary on account of their pages taking a long time to load.

Animations with dynamic elements that respond to the user's cursor can be accomplished within HTML and CSS syntax, but some projects on codepen demonstrate how specialized extensions of the two scripts can be used to create even more elaborate displays than what is normally possible. Through use of the Pug engine, a designer can choose various templates that have previously been authored and structured to bring together sophisticated code in its own right and use the templates in unison to create compounded and layered functions. Meanwhile, support for an extended library of CSS-like syntax can be installed in the form of the SCSS pre-processor.

The linked codepen project created by Sawaya shows a complex animation resembling a cube made out of wire-like lines containing a sphere made out of narrow circular outlines. Each individual circular outline is emitted from an invisible point and spreads while remaining technically stationary, and it subsequently contracts back into nothingness. The illusion that these outlines come together to make a "sphere" results from each given outline expanding and contracting slightly before the one following it. Clicking the "View Compiled" options in the HTML and CSS windows' drop-down menus reveal that the Pug and SCSS syntax involved are shorthand representations of much longer stretches of traditional HTML and CSS code. For more information click here https://codepen.io/YusukeNakaya/pen/OGwmOV.