WebP and the Impact on Site Speed

With the permanent introduction of the latest site speed parameters into google’s Search Algorithm (Nov 2021), it is more important than ever to speed up your website.

If you want high quality images while speeding up your website, then you should then care about WebP image format. WebP is a hybrid of the PNG and JPEG features and makes websites lighter and faster.

The advantages of WebP over JPEG and PNG are many. For example, WebP includes a more aggressive and better optimized compression algorithm than JPG and PNG with the goal of minimizing file sizes while still providing acceptable quality. As a result, websites that use WebP will load faster and require less bandwidth. In terms of size, WebP lossless photos are 26% smaller than comparable PNGs.

Lossless WebP supports transparency. Transparency is supported by lossy RGB compression, which often results in 3x smaller file sizes than PNG. Lossless WebP compression utilizes visible image augments in order to exactly reconstruct new pixels. It can also use a local palette, if no interesting match is found.

Lossy (2) WebP compression, like the VP8 video codec’s keyframe compression, encodes an image using predictive coding. The values in adjacent blocks of pixels are used to predict the values in a block, and only the difference is encoded.

The WebP image format is supported by Google Chrome, Firefox, Edge, Opera, and many other tools and software libraries. You may modify WebP files using graphics applications like GIMP, ImageMagick, or Microsoft Paint that natively support the WebP format. There are several online tools we can use to convert our JPGs, PNGs, and other file formats to WebP.  There are undoubtedly more to come.

Squoosh – Online image compression and conversion
Online-Convert.com – Online image conversion

WebP offers improved lossless and reduced-quality compression for online images. Web developers and webmasters may use WebP to create smaller, richer pictures that improve the performance of their websites. WebP is good for your site load time and thus good for SEO. You can use WebP to make images that are identical in quality to their JPEG and PNG counterparts, but without the size limitations – resulting in faster loading times for your visitors while maintaining comparable visual quality.

1) Please read our article from January 6th, 2021 regarding Semantic Web (https://thedwgblog.com/what-is-semantic-search-and-what-is-the-context-in-todays-seo/)

2) Lossy vs lossless image compression: Lossy compression permanently removes some of the image data due to compression while lossless doesn’t distort image quality by compressing it, instead it removes non-essential information.

The Vital User Experience

When I (LaMae) do presentations about web design and navigation, the User Interface / User Experience, the discussion is always lively because inherently everyone understands that UI/UX is vital.  I often tell the story of a mirror I installed in our home hallway and how I was so pleased with myself for the handiwork.  Then, I showed my husband who happens to be taller than me,  his head was chopped off and I realized the great job I had done would only work for me … or those very close to being the same height as me.  Missed the mark on that one.

A simple UI problem

Paper Towel Dispenser with sign

This picture is a  more analog example of the user experience.  Imagine how many folks had difficulty using this paper towel dispenser for someone to have taken time to make and tape up an additional explanation?   My experience was just as confusing.  I read the sign, “PLACE HAND RIGHT BELOW THE GREEN LIGHT …” but the green button was nowhere to be found unless you moved your hand under the dispenser, and then it was intermittent.  Most of us would eventually figure this out and frankly, it is only an annoyance, but how many people are choosing someone else because of an annoyance?

UI/UX on your site

The user interface (page design including the look and its ease of use), as well as the user experience (how do the site pages flow work together to get things done), should be the primary, or at least one of the primary planning considerations.  Can the visitor find what they want, is it aesthetically pleasing, can they/will they buy?  These questions are your goals (or should be).  There are probably others, too.

If someone wants to buy – let them.  Heck – make it easy for them.

Finally, this brings me to Quality Assurance.  Check your site (or paper towel holder) based on real users and not your own expectations and assumptions and minimize annoyances.

 

TB We haven’t changed and that is OK

During my annual computer ‘refresh’, I ran across some old content.  I smiled when I saw the below – happy to still put customers first. — LaMae
(ok – so our writing style has changed a bit – that’s ok too)

As a leading Los Angeles based web design company with global web development offices, we are committed to maintaining a one on one relationship with you and providing a team you can count on right here at home. We are dedicated to creating an environment of trust that will keep your project moving, on time and on budget.

We understand that along with being one of LA’s top web design companies, comes our responsibility to assure that our design is inextricably balanced with functionality. Whether we are designing an eCommerce site or the latest app, we will make sure our creative team delivers your message with style and ease of use.

Whether we are designing and launching a new website or app, our Los Angeles team of web developers, marketing hot shots, and analytic gurus will arm you with an integrated marketing strategy that will achieve your goals.

Whether we are designing an app to interpret whole-genome sequence data and identify disease-related mutations, programming an image recognition platform, or connect a plethora of social media platforms in a single application, our team of technology mavericks is working 24-7 to bring innovation and functionality to everything we do.

While the “rules” keep on changing, you don’t need to worry about that, we will stay on top of them for you, making sure your website is found by people who are relevant to your business and likely to use your services.

If there is not a software out there that can meet the needs of our client, we create it. We have programmed and customized software specifically for the unique requirements of many of our customers.

            Long before World Wide Web, software development has been an integral part of our business. We created software for devices ranging from etching equipment, to movie data management. Please take a look at one our best wares – ARTdynamix for a glimpse of what is possible. 

Acronyms for the Rest of Us!

I promise technology is not a language all it’s own even thought I think that some days.  But tech folks do love Acronyms/Jargon.  I’ll share two examples as insight into technical minds.

WYSIWYG — I had used this acronym for quite sometime before I understood the origins.  To me it is simply the ability to enter content via text and then there is a toolbar to select things such as bold, italics or creating a link.  I later learned it is What You See Is What You Get.  I find this both odd and beautifully simple at the same time.

Hardening — As you can probably imagine, this word is used often at Dream Warrior Group since we have such an array of servers.  My impression was that this was a precise series of steps to secure a server – which it is and we have a team of folks who do just that.  But the actual origin of the word is much less process oriented:  Hardening — to make the server harder to hack.   This seems like it would be a great word to use in other cases like hardening my lawn (to make it harder for weeds to grow) or maybe I can harden my cell phone number (to avoid SPAM calls).

Anyway, I’ve come to appreciate the actual simplicity behind technology speak — it is very literal.  I’ve complied a list of some common terms below and I’ll update it from time-to-time as well.  And, if there’s one you’ve been dying to understand, Let me know and I’ll figure it out. — LaMae

SaaS – Software As A Service — This is typically a could based software application that you subscribe to rather than own.  The advantage is that you do not have to host,manage or secure.  The disadvantage is that you do not own it.

PaaS – Platform As A Service — While similar to SaaS in that it’s cloud-based, this is more goal-oriented and often includes many software tools combined in one ‘platform’.  For example, Zoho software includes about 15 different software elements and if you subscribe to the platform – you can use them all.

CMS – Content Management System – This is the interface on your website that is the master controller for placement and display of content and can range from WordPress, a great general tool, to ARTdynamix(R) that has been specifically created for Arts Organizations.

WP – WordPress – The most used Content Management System that began as a blogging tool.

CRM – Customer Relationship Manager

AI – Artificial Intelligence

MA – Marketing Automation – It’s likely you have already used some form or marketing automation such as autoresponders in your Constant Contact account or thank you emails from your shopping cart.

CSS  – Cascade Style Sheet – This is where your website gets a consistent look…a style sheet defines your design element in code format.

iOT – Internet of Things –

SEO – Search Engine Optimization – On and off-site work to make sure you name or offerings reach the top of the Search Engine.

Mother of Invention

If there has ever been a necessity, it was 2020.

We all have lots of stories, ours includes knee surgeries, burglary and our need to quickly help our clients with some technologies they never thought they would need, but had become their new paradigm.

Technology brought us many great things in 2020. And it was more than medical-related items – although medical technologists made so many things possible.

Looking closer to our own work, zoom expanded capacity and improved its security quickly.   Desktop and web streaming technologies, and services bloomed and became a life saver.  Over ten months ago, we did an article LinkedIn about an interesting read on a new technology that was saving live symphonic music. The article referred to Dan Tepfer and Michael Dessen who had worked with a decade-old open-source software – JackTrip – which due to necessity was coming to its own.

To quote NPR, “[…] when it comes to playing music online with any kind of rhythmic integrity, latency quickly becomes a total dealbreaker […] The solution: an open-source software called JackTrip, developed by Stanford University researchers Chris Chafe and Juan-Pablo Cáceres over a decade ago, that can transfer high quality audio data across the Internet at low enough latencies, within a geographic radius, to mimic someone playing music roughly 30 feet away […]”

Full circle I just read a series of new articles about the  JackTrip Foundation which was helping singers and musicians collaborate online.  The little engine that could has proven mighty and is going strong.

This was only one of the many stories of technological accomplishments in face of the dreaded 2020.  During the same period, we worked with Clients and friends to bring quality live performance to the public: from simplicity of using DaCast, to the more complex Kaltura, to Isadora or OBS with zoom, and for many others using OBS with Youtube or Vimeo and even a couple of other very esoteric combinations that proved themselves.

And while we helping clients with their web streaming, we had to jump on the bandwagon and build up and expand on the technology behind our systems.  Stay tuned for the next release of ARTdynamix™ which will knock your socks off.

-LaMae