Articles

7 Worst Fails in Email Marketing

,

The email channel is known for multiple advantages. It is convenient to implement practically, offers many options, and has a fantastic ROI of up to 4200%.

But we also face problems, the most disappointing of which is people ignore emails, not performing the desired action, or worst of all unsubscribing. Why does it happen?

The web is constantly progressing. It offers many tools like modern HTML template builders, ESP services, and other digital assistants that help us at all stages. But even the best tools are not enough; the secret of success still rests with us.

In this post we’ll cover the 7 cardinal sins of email marketing, to help you avoid them.

1. Being Too Late

I can define this mistake as probably the worst. It’s worse than broken links, incorrect dates, or prices. Even more harmful than ugly design.

We lose a lot when postponing email strategy implementation. Beginners often focus all their attention on the content, social media activities, SEO issues… All that is important, right. But ignoring email campaigns is a hard fail.

Thousands of visitors never come again to your website. In other words, they leave the very first levels of the marketing funnel. While regular emailing keeps them engaged and prevents churn.

So delays here are only profitable for competitors. Don’t wait until you collect “enough” contacts. Start as soon as possible. 

Frequency matters too. Don’t bomb people with emails; it annoys and causes unsubscribes. Email frequency is an individual parameter depending on many factors.

2. Disregarding Clients’ Expectations

A fundamental axiom: people unsubscribe when emails are irrelevant. The same goes for neglected expectations. Even the best content with next-gen features won’t save the situation.

I mentioned the email frequency a bit above. Notice that if you announce the weekly emails but send them every day, this is an example of ignoring expectations. Be honest with readers.

Another typical issue is off-topic. If your subscribers are waiting for content related to smartphones, send them newsletters about smartphones, not dresses or domestic turtles :)

But in some cases, getting off-topic can be good. It all depends on the target audience, actual situation, and communication style. 

3. Bad Segmentation 

Once again, relevance is vital. So we must avoid generic emails. Instead, especially if your contact list is extensive enough, apply all the possible parameters: age, gender, location, customers history, etc.

Where to get the respective data? A typical solution is to use update preferences forms in emails or on the website. Let clients choose the topics that are interesting for them.

Use surveys, sign-in forms, AI-based techniques of segmentation… Smart algorithms are great helpers that track clients’ behavior and then process the data for segmentation purposes. 

The better we know our subscribers, the deeper we segment the contact list. It allows sending precisely targeted newsletters to respective segments.

4. Insufficient Personalization 

As Hubspot stats say, personalized emails’ open rate is 26% higher, and their click-through rate is 14% better. But even besides index data, poor personalization is just nonsense today.

Clients are looking for content that matches their preferences, so marketers have to consider these expectations. Segmentation and dynamic range are essential here, but they are not the only techniques.

Everything is much more sophisticated here, in addition to personalized subjects and content. Another solution is to generate recommendations that include the previously browsed products.

AI-powered automation comes to help. Machines will upgrade the classical personalization to the next level called hyper-personalization.

5. Underestimating Mobile-Friendliness 

It’s simply unacceptable to send non-responsive emails today. With so many people opening email on different devices, this is a huge fail.

The modern world is full of gadgets and devices. Email has been opened on smartphones more frequently than on desktop PCs and notebooks in recent years. Up to 70% of readers will read messages on mobiles very soon. No wonder that responsivity turned into a mobile priority.

Regarding layout and design, there are no problems: modern template editors are featured with automated responsivity. But mobile-first means not only layout/design adjustment for mobiles, full-width buttons, or larger fonts. We have to work with content too. Don’t overwrite text remember that recipients read inbox emails on the run. 

Just imagine yourself reading emails in the cafe or cab. And ask yourself: is everything convenient? Would you take the desired action on the run?

6. Non-Professional Approach 

People are quite skeptical of new brands. We need to do our best to attract them. So everything must be done professionally.

The best solution: be a perfectionist. If newsletters look amateurish, they are likely to repel.  

Being amateurish will also ruin your brand identity and reduce customers’ trust. Pay close attention to design, stick to your corporate style, analyze each detail in the context of overall harmony.

7. Overlooking Tests and Improvements 

Testing is vital. Before sending an email campaign, check it via Litmus or Email on Acid to be sure that message looks just as planned. These tools allow testing email rendering by +90 combinations of email clients, devices, and OS.

Knowledge is power. Always try and test your marketing strategies. Are you satisfied with your actual performance? Run A/B tests and focus on the most significant wins and failures. 

Summing Up

Of course, threats are not limited to these seven failures. The last piece of advice: never ignore trends. 

Accessibility? Don’t forget about clients with special requirements. Get whitelisted and incorporate these technologies in your campaigns.

And constantly strive for perfection. With this doctrine, you’ll win!

 

Featured image via Pexels.

Source

The post 7 Worst Fails in Email Marketing first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

Creative Problem Solving for UX Designers

,

It’s normal to pull up sharp in front of a problem; after all, if there was a known solution, it wouldn’t be a problem. But knowing that it’s normal, doesn’t make encountering problems any less frustrating. So how do we avoid sitting in front of a UX problem for hours, achieving nothing?

That’s what creative problem solving is all about.

In this post, we’ll explore creative problem solving, and how it can help you as a UX designer. Then we’ll analyze how you can solve UX problems in a few, easy-to-remember steps. By the end of this article, you’ll have all the tips you need for UX problem-solving.

What is Creative Problem Solving?

Creative problem solving is a term developed by Alex Osborn, the founder of the Creative Education Foundation. In a nutshell, this term is about overcoming challenges in our work lives through innovative solutions. But, of course, such solutions vary by profession.

For UX designers, creative problem solving is about solving UX problems with efficient tactics, that work. And that’s precisely why UX problem solving is so essential because following a specific method can help us avoid getting stuck.

Whether you are a newbie or an experienced designer, you are probably focused on projects that require you to solve problems. If you have never had a problem before, you must be a superhero; for us mere mortals, here are the steps we need to follow to solve a UX problem:

UX Problem Solving in 5 Easy Steps

Delivering a great UX solution is influenced by two key parameters: user research and creative problem-solving. Suppose you have done your user research and are currently looking for an original solution to a problem. In this case, the methodology below will be handy:

1. Identify the UX Problem

I know this may sound obvious, but think about it. How many times have we lost days because we didn’t identify the real problem? If you are solving the wrong problem, it does not matter if your solution is original and innovative.

That’s why the first thing you need to do is think about the problem. Ask yourself what the real problem is, and then get to work solving it. Identifying the problem may take some time, but it will prove beneficial to your project in the long run.

2. Clarify the UX Problem

Now that you have identified the UX problem, it’s time to demystify it. In this step, you could create a user journey plan. It does not have to be perfect; some low-fidelity sketches are more than enough.

Set a timer and start visualizing your solution on paper. Remember, sketching is not about perfection or fine details. Once you have created a customer journey you are happy with, it’s time to move on to the next step.

3. Use Analytics

UX design isn’t about design per se. It’s also about numbers and data. This is why analytics are critical to UX problem-solving. Once you have gathered some data from users and competitors, it’s time to create patterns. This will help you better understand the problem and change your drafts accordingly.

Numbers and data alone can help you a lot if you combine them with an original idea. However, facts alone are not enough, and your original story will not be compelling without them. So what’s better than combining them?

4. Use Your Feedback

So you have come up with an innovative solution to the UX problem. You have successfully combined this idea with essential data. Unfortunately, your work is not yet done. 

The next step is equally important. Once you have polished your ideas, you should share them with colleagues and/or customers.

It’s not easy to get feedback for your UX mapping, but it’s very constructive and will ultimately make you a better designer.

5. Solve the Problem

The last step is also the most fun. Once you have listened to people’s feedback, you can redesign your original solution. Then you are just one step away from solving the UX problem. Now it’s time to digitally redesign your idea.

This is the step where fine details matter. Creating a high-fidelity wireframe is not easy, but most UX designers have the knowledge and tools to get it done.

UX Problem Solving: Useful Tips and Tricks

Be Methodical

In my opinion, this is the most useful tip when it comes to UX problem-solving. You do not always have to be in a hurry. In the early stages of a project, try not to get distracted by other problems. Focus on finding the real problem.

Once you are sure you have found it, you can move on to finding the best solution. Then move on to the next step and so on. It becomes clear that being methodical is a brilliant tactic.

UX Problem Solving is All about the Ecosystem

UX problem solving is not about fine details. So try to care less about the design and more about the ecosystem you want to create. That will help you gather all the data you need, from user opinions to analytics.

Low-Fidelity vs. High-Fidelity Wireframes

Starting with sketches and low-fidelity wireframes is a brilliant thing to do. Whenever I have tried to start a project directly with high-fidelity wireframes, I have gotten bogged down in details.

For this reason, pen and paper should be your best friends in UX problem-solving. Sketches help you explore different approaches and get the feedback you need.

Explore Different Tools/Approaches

When it comes to solving a UX problem, there is usually one efficient solution. But that is not always the case. In most cases, we have to consider different alternatives and identify more than one critical interaction.

For this reason, feedback is also crucial for UX problem-solving. Your colleagues and customers will help you find the best method. Try to accept criticism and be open when listening to feedback. This way, you will ensure that you will find the best possible solution.

Wrap Up

Solving a UX problem is not easy. However, if you identify the real problem and illustrate different approaches, you will be on the right track. Also, do not neglect to use the data and feedback you collect. The more tools you have in hand, the better UX designer you will be.

 

Featured image via Unsplash.

Source

The post Creative Problem Solving for UX Designers first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

Image CDNs: How Edge Computing Provides a Faster Low Code Image Solution

,

Many websites today use some type of traditional Content Delivery Network (CDN), which means improvements in website load times, decreases in bandwidth, and better redundancy and security. But not everything is optimized, specifically when it comes to images, and image CDNs can help with that! 

Traditional vs. Image CDNs

A traditional CDN treats images as static. If you want to tailor images to better match various mobile device types, then you need to create many variants of each image and upload them to your web server. It also means you must develop responsive code that will tell the server and CDN which image variant to deliver. This is clunky, time-consuming, and inefficient. For a large website, the amount of code needed can be astronomical. Using this static image model, there’s just no realistic way for each image to be effectively sized and compressed for every possible device model – at this point, there are thousands of them. The combination of these two unfortunate factors leads to potentially slow load times and poor UX caused by oversized images delivered to mobile devices.

So what is an image CDN? An image CDN builds on the traditional CDN model with the addition of device detection and image optimization. Instant detection of the device model and browser requesting the images is done right at the device-aware edge server (true edge computing!) Additional information, including screen resolution and dimension, pixels per inch, and support for next-gen image formats (such as WebP, JPEG 2000/JP2, and AVIF), provides even more details crucial for superior image optimization. Using this information derived from device-aware edge servers, the image CDN optimizes each image and serves the perfect version for each device and resolution, meaning users get the finest webpage experience faster.

A Bit About the Edge (Whoa, Living on the Edge?)

With a single server website, a web request would have to travel from the requestor, back to the origin server (wherever that was geographically located), be processed, and then travel back to the requestor. Depending on the physical distance between the requestor and the origin server, this could introduce a great deal of latency, which means lag time on page loads. 

A traditional content delivery network (CDN) is a global network of servers that optimizes web performance by using the node geographically closest to the user for faster delivery of assets. It takes static content like images and stores them on the edge. But usually, these edge servers are relatively simple in terms of their role in business processes. They mostly index, cache, and deliver content. And traditional CDNs like to keep edge servers simple because of concerns over CPU usage, storage, and scalability.

But what if these edge servers could also provide computing power that enhances performance and business processes? This is called edge computing. Slowly, CDNs are starting to open their edge servers to allow enterprises to deploy apps/services on the edge. Likewise, Cloud computing networks (e.g., AWS, Azure, Google Cloud) provide virtualized server capacity around the world for those who want to use geographically distributed servers. In a sense, Edge Computing is a marriage of the CDN (where edge servers synchronize/work with each other) and Cloud computing (where servers are open to applications). 

Edge computing is a fascinating concept, but what is the killer app that will enhance business processes and improve website performance? The addition of device detection to edge computing provides the ability to transform from delivery of static images to a new model where images are dynamic and tailored exactly to devices. 

Edge computing is computing that is done in a geographically distributed space, with many servers located at or near the source of the web request. This reduction in bandwidth and latency leads to fast processing times, increased site speed, and improved customer experience. And edge computing doesn’t require new infrastructure — it leverages the networks of existing providers to create Points of Presence (POP) around the globe. 

The Edge Servers are…Aware?

Device-aware edge servers, like those used by the ImageEngine image CDN, take edge computing to a new level. Device detection is actually one of the use cases where edge computing really shines. Normally, the edge server would have to send a Javascript query to the device to figure out any information about a requesting device’s model, browser, operating system. But with a device-aware edge server, the User Agent string is captured and decoded. This contains all of the information necessary for device detection without the need for any back and forth – a definite speed improvement. So you’re starting ahead of the game! 

Each time a new request comes to the device-aware edge server, the image is processed by that server (meaning optimized for that specific device parameters) and stored right there in cache, primed for future use. This is done in three stages: changing image size based on device resolution, compressing the image using an image optimization tool, and selecting the most efficient file format for the device. 

If the device-aware edge server has already processed a request from a similar device model before, then it can serve the device-optimized image from its edge cache, leading to a lightning-fast server response — and ImageEngine’s device-aware edge servers can serve up cached images 98% of the time! Not only is there geographical proximity because of the distributed global POP network, but the smaller size of the optimized image compared to the full-sized original cuts up to 80% off the image payload. This can cut up to several seconds off page load times. When almost 70% of people say that page speed influences their likelihood of making a purchase, every single second counts! 

Some image CDNs detect the device information and group the devices into “buckets” of similar types and serve an image based on that type. While this is certainly an advancement over a traditional CDN, and works passably well for some common devices, it still isn’t a truly optimal solution. There are so many variants of browser, screen size,  resolution, etc., even among very similar devices, that images are still often oversized (too large payloads) and lead to poor load speed. A true image CDN, such as ImageEngine, serves the perfect image for every device, every time.

So Now You Want To Get Started (Don’t Worry, It’s Really Simple)

One of the best things about the ImageEngine image CDN is the ease of integration – and it can integrate into any platform that supports a 3rd-party CDN. All you need is to sign up for an account and receive a delivery address during your two (yes, 2!) minute signup process. This delivery address is used to redirect image traffic for optimization and superior delivery performance. Next, you’ll have to make some slight adjustments to img tags on your website, but that’s really all the work you’ll need to do. There are no DNS changes during a standard (generic delivery address) integration. You read that right, none at all. Contrast that to a traditional CDN integration, where there is just no way around some messing around in the DNS – in fact, usually some fairly extensive DNS changes. 

This low-code, virtually no code, integration saves you time. It saves you money. It saves you the hassle of putting multiple team members on a new project. And it means that you can be up and running in about 15 minutes with a standard install. You can be serving optimized images to your site visitors at blazing fast speeds before lunch! And don’t worry, ImageEngine has an experienced integration support team available to answer any questions you might have. 

There’s also no issue with adding the ImageEngine image CDN on top of an existing CDN. Traditional CDNs may have security features that you may prefer to keep for your site. It requires slightly more integration but provides the same benefits of a solo ImageEngine implementation — screaming fast image load times and perfectly optimized images from device-aware edge servers. All that is recommended is that the ImageEngine image CDN actually serve the images directly, not simply process them, to get maximum benefits.

Adopt an Image CDN and See The Benefits

We’ve learned that image CDNs bring numerous benefits to your site AND your business. Using device-aware edge servers, image CDNs provide measurably better UX to your visitors. Pages load potentially seconds faster with perfectly optimized images, meaning your customers get to the heart of your message right away, and you don’t lose potential sales. 

Image CDNs are actually 30%+ faster than most traditional CDNs, improving site speed accordingly. From an SEO perspective, that’s huge! And your SEO gets an additional boost from the improvement to your Largest Contentful Paint scores (which can help you gain valuable rank on Google’s SERPs). Implementation is simple and fast. You get all this, plus cost savings: since you have smaller payloads because of the fully optimized images, you’re delivering fewer gigabytes of data.

Source

The post Image CDNs: How Edge Computing Provides a Faster Low Code Image Solution first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

Tilda – The Website Builder That Disrupted The Way We Create Websites

,

Tilda website builder combines everything we liked so much about constructors when we were kids – you can experiment, test out and build myriads of new creative ideas out of ready-to-use blocks. Tilda is that type of constructor that allows you to own your creative process and create pretty much any website: landing page, business website, online store, online course with members area, blog, portfolio, or event promo page.

Founded seven years ago, Tilda is a website builder that completely revamped the way we create websites. Tilda has been the first website builder to introduce block mechanics that allows users to create websites out of pre-designed pieces. This breakthrough technology allowed all users – not only designers – to create professional-looking websites. Just like in kid constructors, you can drag-and-drop and mix-and-match blocks on Tilda to let your creativity flow and build a dazzling website, at extraordinary speed. 

When you ask designers why they love Tilda, they usually say it’s because the platform provides the ultimate balance between choosing from templates and being able to fully customize and create from scratch to bring any creative idea to life. Here’s what else they say:

Tilda has been a game-changer for us. It allows our team to quickly spin up new web pages, make edits, and ship new programs. We left WordPress for Tilda and after being with Tilda for 2 years, I don’t ever want to go back.

~ Andy Page, Executive Director, Forge.

I built my first website in 2001. Since then I’ve used countless platforms and website builders for customer websites and my own business. Tilda is the perfect combination of ease of use with powerful features at an unbeatable value.

~ Robby Fowler, Branding and Marketing Strategist, robbyf.com & The Brand ED Podcast.

Let’s dive deeper into core functionalities you can leverage on Tilda. 

#1 Cut Corners With 550+ Pre-Designed Blocks And 210+ Ready-Made Templates

The beauty of Tilda is that it provides 550+ blocks in the ever-growing Block Library designed by professional designers. Thus, you can quickly build a website out of pre-designed blocks that encompass virtually all elements you might need for your website: menu, about us page, features, contact, pricing, etc. 

Customizing each block is a breeze with Tilda: You can drag-and-drop images, edit text right in the layout, alter block height, background color, padding, select the style of buttons, use custom fonts, and assign ready-made animation effects to specific parts of it. Also, Tilda provides a built-in free image library with 600K+ images, so you can find images that are just right for you without leaving Tilda, add them to your website with just one click, and use them for free.

Finally, all blocks fit together so well that it’s almost impossible to create a bad design on Tilda – even if you are a stranger to website building.

For a quick take-off, you can use 210+ ready-made templates for different kinds of websites and projects: online stores, landing pages, webinar promo pages, multimedia articles, blogs, and more. Each template is a sample of modern web design and consists of blocks. It means that templates don’t limit your creativity: you can modify them to your liking by playing with settings, adding extra or removing existing blocks, and embedding images and text. 

Each of the templates and blocks covers over 90% of use cases you’ll ever require and is mobile-ready, meaning that your website will look great on desktop computers, tablets, and smartphones by default.

#2 Jazz Up Your Site With Zero Block: Professional Editor For Web Designers 

To better meet the demands of a creative brief and unleash your creativity, you can use Tilda’s secret weapon called Zero Block. It is a tool for creating uniquely designed blocks on Tilda.

You can control each element of the block, including text, image, button, or background, and decide on their position, size, and screen resolution on which they’ll appear. For example, you can work with layers to create depth with overlay and opacity techniques or set a transparency level on any element and shadow effects below them. Additionally, you can also insert HTML code to add more complex elements, such as calendars, paywall, comments, social media posts, and so much more.  

Finally, Zero Block allows you to fool around with basic and more advanced step-by-step animation for a more individual look. Here’re some animation examples that you can make on Tilda:

Animation on scroll (position of elements is changing on scroll).

Trigger animation (animation is triggered when pointing at or clicking on an object).

Infinite scrolling text.

#3 Import Designs From Figma To Tilda In Minutes

Creators love using Figma for prototyping, but when you have to transfer every element and rebuild your website design from scratch – that’s what’s killing the party. With Tilda, you can easily turn your static designs into an interactive website in no time. 

All it takes is to prepare your Figma design for import with a few easy steps, paste the Figma API token and your layout URL to Tilda, click import and let the magic happen. Once your design is imported, you can bring your project online just by clicking publish.

#4. Make Search Engines Love Your Website With Built-In SEO Optimization

Thanks to the consecutive positioning of blocks on the page, websites designed on Tilda are automatically indexed well by search engines. There is also a set of SEO parameters you can fine-tune right inside the platform to ensure that your web pages rank high even if you don’t have an SEO specialist in-house. These parameters include the title tag, description and keywords meta tags, reader-friendly URLs, H1, H2, and H3 header tags, alt text for images, and easily customizable social media snippets. 

As an additional value, Tilda provides an SEO Assistant that will show you what errors are affecting the indexing of your website and will help test the website for compliance with the search engines’ main recommendations.

#5. Turn Visitors Into Clients

Tilda gives you the power to set up data capture forms and integrate them with 20+ data capture services, such as Google Sheets, Trello, Notion, Salesforce, Monday.com, etc., to ensure seamless lead generation.

For more fun, Tilda developed its CRM to manage your leads better and keep your business organized right inside of a website builder. This is a very easy-to-use tool that automatically adds leads from forms and allows you to manually add leads you captured outside of the website. There is a kanban board that gives you an overall view of how leads are moving through your sales funnel and allows you to move leads between stages easily.

#6. Build A Powerful Online Store In One Day

Tilda provides a set of convenient features to create a remarkable online shopping experience. The platform gives you the power to sell online using ready-made templates or build an online store completely from scratch, add a shopping cart and connect a payment system of choice — Stripe, PayPal, 2Checkout, etc. — to accept online payments in any currency.

If you are looking to run a large ecommerce business, you should also consider Tilda. Thanks to the built-in Product Catalog, you can add up to 5000 items, import and export products in CSV files, easily manage stock, orders, and keep track of store stats.

And thanks to adaptive design, your store will look good across all devices, including tablets and smartphones. 

#7. Bring Your Project Online For Free

Tilda offers three subscription plans: Free, Personal ($10/month with annual subscription), and Business ($20/month with annual subscription). When you sign up for Tilda, you get a lifetime free account. It allows you to publish a website with a free subdomain and gives you access to a selection of blocks and a limited number of features that offer enough to create an impressive website. 

Personal and Business tariffs allow more advanced options, such as connecting custom domains, adding HTML code, receiving payments, and embedding data collection forms. The business plan also allows users to export their website and create five websites (while personal and free plans allow one website per account). 

To discover all features and templates on Tilda, activate a two-week free trial – no credit card required.

Source

The post Tilda – The Website Builder That Disrupted The Way We Create Websites first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

4 Steps to Improve PageSpeed Insights Score and SEO

,

PageSpeed Insights is a free performance measurement tool provided by Google. It analyzes the contents of a web page for desktop and mobile devices. It provides a single number score (from 1 to 100) that summarizes several underlying metrics that measure performance. If you have not run PageSpeed Insights on your website, then you should stop and do it now. It’s an important indicator of how Google scores and ranks your site.

If your PageSpeed Insights score is below 80, don’t panic. You are not alone. Many websites are not optimized for performance. The good news is that you can take steps that should immediately improve your score.

You will notice that PageSpeed Insights highlights issues that cause slow page loading. However, you might need more guidance to resolve these issues. Below, we walk you through how to resolve four common issues related to images. We also show you how ImageEngine, an image CDN, can simplify, automate, and deliver the best image optimization solution possible.

Performance Drives Google SEO Rankings

Why does the PageSpeed Insights score and performance matter? Isn’t SEO ranking all about content relevance, backlinks, and domain authority? Yes, but now performance matters more than it did a year ago. Starting in 2021, Google added performance metrics to the factors that impact search engine rankings. In a market where websites are constantly jockeying to match their competition’s pages (for content relevance, keywords, and other SEO issues), performance is making a difference in keyword search engine rankings.

What Are Core Web Vitals Metrics?

PageSpeed Insights relies on a set of performance metrics called Core Web Vitals. These metrics are:

Largest Contentful Paint (LCP): Measures the render time (in seconds) of the largest image or text block visible within the viewport, relative to when the page first started loading. Typically, the largest image is the hero image at the top of pages.

First Input Delay (FID): Measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Cumulative Layout Shift (CLS): Measures the layout shift that occurs any time a visible element changes its position from one rendered frame to the next.

Images and JavaScript are the Main Culprits

PageSpeed Insights breaks down problems into categories based upon how they impact these Core Web Vitals metrics. The top two reasons why you might have a low score are driven by JavaScript and images.

JavaScript issues are usually related to code that either blocks or delays page loading. For example, lazy-loading images might involve JavaScript that blocks loading. As a rule of thumb, do not use a third-party JavaScript library to manage image loading. These libraries frequently break the browser’s built-in image loading features. Lazy-loading may make above-the-fold images load slower (longer LCP) because the browser starts the download later and because the browser first has to execute the JavaScript.

Another JavaScript issue involves code that is large or unnecessary for the page. In other words, code bloat. There are good resources for resolving these issues on the web. However, in this blog, we will focus on image problems.

Images are a major contributor to poor performance. The average website payload is 2MB in 2021, and 50% of that is images. Frequently, images are larger than they need to be and can be optimized for size with no impact on quality…if you do it right.

Four Image Issues Highlighted by PageSpeed Insights

Largest Contentful Paint is the primary metric impacted by images. PageSpeed Insights frequently recommends the following four pieces of advice:

  1. Serve images in next-gen formats.
  2. Efficiently encode images.
  3. Properly size images.
  4. Avoid enormous network payloads.

That advice seems straightforward. Google provides some great advice on how to deal with images in its dev community. It can be summarized in the following steps:

  • Select the appropriate file format.
  • Apply the appropriate image compression.
  • Apply the right display size.
  • Render the image.
  • Write responsive image code to select the right variant of the image.

We call Google’s process the “Build-Time Responsive Syntax” approach. If you have a relatively static website where you don’t generate new pages or switch out images frequently, then you can probably live with this approach. However, if you have a large and dynamic site with many images, then you will quickly feel the pain of this approach. Google itself stresses that developers should seek to automate this image process. Why? Because the process has some serious workflow drawbacks:

  • Adds storage requirements due to a large increase in image variants.
  • Increases code bloat and introduces more code complexity.
  • Requires developers’ time and effort to create variants and implement responsiveness.
  • Requires logic to account for different browser’s support for next-gen image formats.
  • Doesn’t adapt to different contexts. It relies on best-guess (breakpoints) of what device visits the web page.
  • Needs a separate CDN to further increase delivery speeds.
  • Requires ongoing maintenance to adapt to new devices, breakpoints, image formats, markets, and practices.

Key Steps to Achieving High-Performance Images

Instead of using the Build-Time Responsive Syntax approach, an automated image CDN solution can address all of the image issues raised by PageSpeed Insights. The key steps of an image CDN that you should look for are:

  1. Detect Mobile Devices: Detection of a website visitor’s device model and its technical capabilities. These include: OS version, browser version, screen pixel density, screen resolution width and height, support for next-gen image and video formats. This is where ImageEngine is unique in the market. ImageEngine uses true mobile device detection to further improve image optimization. It has a huge impact on the effectiveness of the image optimization process.
  2. Optimize Images: An image CDN will leverage the device’s parameters to automatically resize, compress and convert large original images into optimized images with next-generation file formats, like WebP and AVIF. Frequently, an image CDN like ImageEngine will reduce the image payload by up to 80%.
  3. Deliver by CDN: Image CDNs like ImageEngine have edge servers strategically positioned around the globe. By pushing optimized images closer to requesting customers and delivering them immediately from the cache, it often provides a 50% faster web page download time than traditional CDNs.

Easy Integration Process for Image CDN

After signing up for an ImageEngine account and free trial, you will receive a Delivery Address. After adjusting your <img /> elements to include the Delivery Address, ImageEngine will start to pull the original images from your website (no need to move or upload them), automatically optimize them, and deliver them.

You can automate the addition of the Delivery Address to the img src tag by using plug-ins for WordPress and Magento. Developers can also use ImageEngine’s React, Vue, or Angular JavaScript frameworks to simplify the process.

Additionally, there are many ways to simplify implementation via adjustments to templates for many CMS and eCommerce platforms.

Results: Improved Performance, Better SEO

Most ImageEngine users see a huge improvement in LCP metrics, and consequently, a big improvement in the overall PageSpeed Insights score. ImageEngine provides a free demo analysis of your images before and after image optimization. In many cases, developers see improvements of many seconds on their LCP and Speed Index.

In summary, performance drives higher search rankings, and better UX, and increases website conversions for eCommerce. The steps you take to improve your image performance will pay for themselves in more sales and conversions, streamlined workflow, and lower CDN delivery costs.

Source

The post 4 Steps to Improve PageSpeed Insights Score and SEO first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Using the Cloud as a Sandbox for Server Consolidation

,

A server consolidation project is a significant undertaking, and IT teams will need to answer several weighty questions while planning for one. Can servers be consolidated more efficiently? If so, what is the cost and timeline for doing so? How can we adjust parameters like CPU, memory and storage if our estimates turn out to be incorrect? How will we handle R&D and testing for the new systems? And, most importantly, if we answer any of these questions incorrectly, how much will that impact the timeline and budget for the project?

It’s possible to answer these questions by using the Cloud as a sandbox environment to test design assumptions and validate ways of re-organizing and consolidating servers. Ultimately the servers will remain hosted on-premise, the cloud is just used as a placeholder in the planning and design phase of the project. Here’s how I recommend approaching the project. 

Source de l’article sur DZONE

/par

Client-Side Perf Testing Using Lighthouse CI With Puppeteer

,

Whenever we need to do performance testing, mostly it is the APIs that come to mind. 

Testing the performance of an application by putting load on APIs or on servers and checking out various metrics or parameters falls under server-side performance testing.

Source de l’article sur DZONE

/par

Start Using a Smart DAM and Image Optimization Stack

,

Asset management and website performance optimization are two of those unavoidable headaches faced by every website owner.

A digital asset management (DAM) platform can provide centralized asset repositories with intuitive dashboards to help you manage assets. On the other hand, an image CDN can help you get rid of that messy responsive syntax and provide dynamic asset optimization with huge performance boosts.

The problem is that website performance has become such a competitive factor that DAMs with other priorities tend to fall short. On the other hand, specialized image CDNs don’t solve the problems associated with image management, particularly within organizations.

With that in mind, I propose solving these problems for good by putting together image management and optimization stack using ImageEngine and Cloudinary. Instead of being a comparison between these two tools, this article describes the benefits of using them to complement each other.

Features and Asset Management Capabilities

As a DAM, Cloudinary provides you with a visual interface to store, manage, and edit your image and video assets. In that way, it’s not much different from any other professional image managing software such as Adobe Bridge, except that it’s an online, browser-based service.

Using the Media Library, you can upload, delete, and organize images in folders, for example. The visual image editor allows you to make advanced transformations and image touch-ups and see the results instantaneously using tools like sliders, dropdowns, etc. You can even chain transformations together for multi-layered effects.

Cloudinary also allows you to manipulate images and videos this way using their URL-based API.

Cloudinary has additional auxiliary features that make asset management easier (especially in organizations), such as backups, role-based multi-user admin, and feature extensions via third-party integrations and add-ons.

This is something most image CDNs don’t provide. Instead, they allow you to access and transform images using URL manipulation. Transformations are usually made using string-based parameters or directives. A serverless, headless DAM, if you will.

However, the advantage of using a dedicated image CDN like ImageEngine, is that it can usually provide enhanced asset optimization. ImageEngine, for example, is an intelligent image CDN that uses WURFL device detection to finely read the context an image is accessed from (device model, PPI, OS, browser, resolution, etc.) and then chooses the optimal image for that configuration.

This frees up website owners from having to do any additional optimization. This business logic is also built-in to all of their global PoP servers, and ImageEngine specifically delivers cache-hit ratios close to 100%. The following performance section will illustrate the difference this can make in practice.

Check out the key differences between ImageEngine and Cloudinary. And, for a deeper insight, see the comparison with other similar CDNs, like imgix and Cloudflare

Performance

Just to cover our bases and prove that this is an effective asset management and optimization stack, I’m also going to affirm it using a Lighthouse performance audit. Here is a quick summary of the results:

For this test, I built a web page with a tonne of images with overly large file sizes. In this first Lighthouse audit, I didn’t apply any optimization to the images. Here’s the result:

As you can see, we had some major problems when it came to the loading time of our assets. Overall, the page took more than 10 seconds to load. One of Google’s crucial user-centric performance metrics, LCP, scored a miserable 7.5s. Lighthouse suggested that some of the main problems encountered were the asset file size, inefficient cache policies, using non-optimal image formats, and improperly sized images.

Both Cloudinary and ImageEngine are supposed to address all of these factors with their auto image optimization. In the next audit, I used the same page and content but served my images via Cloudinary:

As you can see, there is improvement in most factors. FCP is now in the green, and both the Speed index and LCP times have almost halved. Even TTI and CLS improved slightly. That being said, it’s still nowhere near optimal, and we’re still falling short of the all-important 3-second loading time ceiling.

So, finally, let’s do another Lighthouse audit – this time using ImageEngine on top of Cloudinary. Here are the results:

With ImageEngine, I finally scored in the green with 95. All the metrics that have to do with the sheer speed at which image content loads improved. The Speed Index and LCP, which is the most important, improved dramatically. CLS scored worse, but this typically varies from test to test.

You can find another and more extensive breakdown of the performance and pricing comparison here.

Transformations, Bandwidth Utilization, and Cost

Cloudinary’s pricing plans work on a credit-based system. Starting with the free account, you get 25 credits/month. Each credit can be used for 1,000 transformations, 1 GB of storage, or 1 GB of net viewing bandwidth. The other two packages cost $99 for 225 credits and $249 for 600 credits, respectively.

You should plan to generate a minimum of 5 transformations per image. In effect, that limits you to around 200 images with the free plan, excluding whatever manual transformations you make.

ImageEngine’s Basic plan costs $49 and provides you with 100 GB of Smart Bytes. Smart Bytes are based on optimized image content and translate to roughly 400-500 GB of raw images.

So, with Cloudinary, you have to compromise between bandwidth and storage usage as well as the number of transformations you can make. Transformations for Cloudinary are counted as they are dynamically generated on-demand.

However, if you use ImageEngine for optimization, you can switch off Cloudinary’s auto-optimization. When a new image variant is needed, it will be generated and delivered via ImageEngine. Considering variant count isn’t limited by ImageEngine, this will drastically cut down on the number of credits you’ll need to spend on transformations.

Effectively, that means you could use the bulk of your Cloudinary credits purely for storage and specific transformations. For example, advanced cropping, applying effects, or color adjustments. These are, after all, the main functions of a DAM.

With this setup, ImageEngine’s Basic plan and Cloudinary’s free plan should be adequate for most websites, saving around $50 a month.

How to Implement Cloudinary with ImageEngine

Signing up for Both Services

As it will house all of your image assets, the logical place to start would be to sign up with Cloudinary.

Create a (free) account, and make sure to take note of your “cloud name” during the setup wizard. This will be the name of your designated storage location on the Cloudinary platform and is usually a garbled string like di2zgnxh0 by default. However, you can change this to something more meaningful.

Once you’ve signed up, you can start uploading your image assets and creating different versions/transformations of them. Setting up Cloudinary integration on a CMS, like WordPress, is usually straightforward. Just indicate the CMS you’ll be using, copy the API key, install the plugin, and activate it.

Next, sign up for a free trial with ImageEngine. There will also be a short setup wizard during which you will:

  1. Provide ImageEngine with the website where your images will be delivered.
  2. Supply your image origin (in this case, your Cloudinary web folder). For now, you can only add the Cloudinary, e.g., res.cloudinary.com.
  3. Get your ImageEngine image-serving domain, e.g., {randomstring}.cdn.imgeng.in

When in your ImageEngine dashboard, you’ll see this domain listed under “Engines” as well as an entry for Cloudinary under “Origins.” Edit the latter and under “Advanced,” add your Cloudinary folder to the “PATH” field.

That’s it, you should now be able to store and manage images via Cloudinary and serve them via the ImageEngine CDN.

Dynamically Loading Specific Image Variants

Let’s take a look at a use case for loading different transformations of individual images on your site. This example will showcase how you can use Cloudinary’s advanced image editing tools to transform images while still reaping the optimization rewards of using ImageEngine as your image CDN.

A popular practice today is to use rounded images for team, client, or profile portraits. Using Cloudinary, you can load this transformation using the following URL:

https://res.cloudinary.com/myimages/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpg

This will resize the image to 400 by 400px, focus on the face, and apply the maximum amount of radial cropping around it – to a width of 200px.

The same image can then be accessed via your ImageEngine delivery engine simply by swapping out the domain:

https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpg

NOTE: I added my Cloudinary folder designation (“myimages”) as the path to my image origin. With that config, I don’t need to include it every time I use the image URL.

For example, you can set up the origin like this:

And, then under advanced:

If I specifically wanted to load the profile picture in WebP format (for transparency support, for example), I could add the ImageEngine directive f_webp:

https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/?imgeng=/f_webp/profile.jpg

ImageEngine and Cloudinary – The Wrap Up

Both ImageEngine and Cloudinary are superb platforms that can make managing image and video assets easier and improve your website maintenance. However, both services have their specialty in which they outperform each other.

For ImageEngine, it’s delivering blisteringly fast image loading times in next-gen formats and with a minimal loss of visual quality.

For Cloudinary, it’s providing a visual interface to organize, store, and edit your image and video assets.

As a further incentive, letting each of these services handle what they’re best at can lead to lowering your long-term operating costs.

 

[– This is a sponsored post on behalf of ImageEngine –]

Source

The post Start Using a Smart DAM and Image Optimization Stack first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Get Ready For Next Month’s Google Shakeup

, ,

Google has been talking about the Core Web Vitals tool and the Page Experience Update for about a year now.

With the update scheduled to roll out in May 2021, now is the time to make sure your websites are prepared for it. It’s taking a lot of the best practices Google has recommended over the years and making them an official part of the search algorithm, so not taking this seriously could negatively impact your sites’ rankings.

Today, we’re going to look at everything Google has told us about the update and how to use the Core Web Vitals tool to ensure your site rankings don’t drop once it rolls out.

What We Know About the Google Page Experience Update

Google first told us about the page experience update back in May 2020. Here’s what we know about the upcoming update:

Google’s Search Algorithm Will Change in May 2021

Although there’s no specific day given, we do know that the page experience update will go live sometime in May 2021.

The Goal is to Reduce Friction on the Web

It’s not as though user experience is something that designers and developers overlook when building websites. Heck, there’s an entire disciple of UX design dedicated to it.

That said, Google hasn’t taken too hard line of an approach in enforcing its page experience suggestions, like mobile-first design, removing intrusive pop-ups, or improving page speed. With this update, though, Google is now telling every site owner that performance, accessibility, technical best practices, and SEO must be built into their websites.

Of course, the goal isn’t to create more work on your side of things. Google believes that by encouraging developers to build better web experiences that consumers will experience less friction and businesses will be more profitable as a result.

The Update Will Include Older Signals

According to Google, the page experience update is going to combine a bunch of older signals with the new Core Web Vitals:

The Core Web Vitals tool will now merge all of that data we once had to gather from various Google apps. That’ll make it more convenient for designers and developers to improve the on-page experience across a variety of areas.

The Page Experience Algorithm Will Change Over Time

Per Google:

Because we continue to work on identifying and measuring aspects of page experience, we plan to incorporate more page experience signals on a yearly basis to both further align with evolving user expectations and increase the aspects of user experience that we can measure.

So, don’t expect this to be a one-and-done thing. You’ll have to rely on the Core Web Vitals tool, and pay close attention to updates out of Google, to ensure your sites are keeping up with Google’s page experience standards.

Your Other Google Apps Have Already Been Updated with Core Web Vitals

If you hadn’t noticed, Google has already updated its other apps in anticipation of the page experience update.

Google PageSpeed Insights, Search Console, and Lighthouse all have Core Web Vitals data in them.

Here’s an example of how Lighthouse’s report on the Amazon website now looks:

By including these metrics within the tools you’re already using, you don’t necessarily have to add the Core Web Vitals tool to your growing toolbox. That said, there are some really valuable reports in there, so I’ll show you why you may want to add it anyway.

Google’s Top Stories Will Be Affected

In the past when someone did a news-related search on Google, they’d see “Top Stories” results like this one:

Until now, the only pages shown here were AMP-enabled ones. 

Once the page experience update goes live, though, the AMP requirement is going away. So long as a page meets the page experience criteria along with Google News content policies, it can now rank in this section.

Google Search Results May Show a Page Experience Indicator

In the Top Stories example above, notice the AMP indicator I highlighted in yellow. Google is thinking about adding something similar to any search result that fulfills its page experience criteria.

While I think a small, eye-catching icon might draw a little more attention from Google users, I’m not sure if it’ll be that big of a deal to them. People working in this industry certainly know what that lightning bolt means, and we’ll also be the ones who recognize the page experience indicator, but I’m not convinced it’ll matter to users. 

That said, this is something Google is thinking about rolling about, so it’s something to be aware of. At the very least, you can consider it a badge of honor when showing your websites to clients and prospects who want to see what you can do for them.

Content Is Still More Important Than Page Experience

Even if a website checks off all the page experience boxes, there’s no guarantee that it’ll start to rank better than websites that haven’t. The quality and value of the content on the page still matters greatly.

Using Core Web Vitals to Measure Page Experience

Alright, so let’s take a look at this Core Web Vitals tool. Here’s what the tool looks like when you enter the “Measure” tab:

It’s like most other Google analyzer tools. You enter the URL you want to audit and let the tool run. The results then spit out something that looks like this:

Core Web Vitals are graded on four categories:

  1. Performance measures the loading speed, interactivity, and stability of the page.
  2. Best Practices focus on the technical aspects of the page, including things like having an SSL certificate and making sure images fit within the parameters of the mobile screen.
  3. SEO checks on the typical SEO signals like metadata, structured data, and so on.
  4. Accessibility reports any issues with visitors not being able to see or access parts of the page.

If you scroll down just a little bit on the page, there’s more data available. It mainly has to deal with the technical stuff, like page speeds and unoptimized code:

Now, this isn’t really anything new. We can get this data about load time, interactivity, and content stability from Google’s other apps.

The real value is in the report, which you can access up top next to the date of your audit.

Open the report and you’ll find specific suggestions and pro tips to optimize each part of the page experience, like this SEO report:

Just like other Google tools, this one can teach you a lot about what makes one site more rankable than another. So, make sure you update your web design strategy going forward to integrate all of these ranking signals.

While you’ll have to do annual audits on your sites to see how much Google has changed the page experience signals, you’ll create less work for yourself if this baseline set of criteria are met with every site you build.

Source

The post Get Ready For Next Month’s Google Shakeup first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par