Site Speed

luroConnect Image Optimization Support : Watchimage

Image Optimization is a basic requirement to have a faster website. Photo images used in websites are generated with too large a size to be served over the internet on a web page. Also browser support for different, more modern and efficient (by storage) formats vary, requiring an image optimizer to be used on a website.

Generating images in different formats may be required in websites to support different browsers. This is part of image optimization.

luroConnect WatchImage service, “watches” a set of directories where images may be generated or saved and automatically generates different formats for the same image – keeping the base file the same and renaming the extension appropriately.

For example for Magento, if one wants to generate avif and webp images, the following settings work :

luroConnect WatchImage Configuration

How does it work?

A watch is setup for the folder mentioned and when a new image is saved in any folder or subfolder, the image conversion will automatically be launched and the formats specified will be generated, with the same base name and corresponding extension.

For example If we are watching

pub/catalog/product/cache folder and an image with the name 3af406316384c53a5f29d3772fa411e5_2.jpg is saved the following images will be generated

pub/catalog/product/cache/3/a/3af406316384c53a5f29d3772fa411e5_2.webp

pub/catalog/product/cache/3/a/3af406316384c53a5f29d3772fa411e5_2.avif

The developer can generate the picture element with srcset for mime types image/webp and image/avif with the same base file name but with the corresponding file extensions.

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like Image Optimization, ~0 downtime code deploy and autoscale to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for Magento.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimized hosting costs
Click here to schedule the call

Use of luroConnect WatchImage Service

This is best suited when the HTML code uses <picture> element with fine tuned image sizes (and mime types).

Information about <picture> element is found here.

HTML supports the picture element which allows a developer to define various image sizes and formats and specify conditions – much like css media query – for the browser to decide what is the closest match.

Briefly, using <picture> as the parent tag and <srcset> to specify conditions and alternatives.

<picture>
<source srcset="catalog/product/cache/xxx_for_600_width/m/y/myimage.jpg" media="(min-width: 600px)" />
<source srcset=" catalog/product/cache/xxx_for_600_width/m/y/myimage.webp" type="image/webp" media="(min-width: 600px)" />
<img src="myimage.jpg"/>
</picture>

January 23, 2024 By Core Web Vitals, Image, Magento, Site Speed 0 Comments Read more...

Do you know what size server you want for your eCommerce site?

Leaving the toughest question unanswered

When signing up for your Magento hosting, the first question you see asked, before you place an order, is what size server you want. It has become so ubiquitous, that everyone just expects to answer it looking at the cost.

But this is much like Mathematics books leaving tough problems as exercise to the readers!

It should not be that way! The size and architecture of the server you need depends on many factors.

Factors to consider

  1. The traffic and pattern. We routinely ask for 2 google analytics graphs – one for a typical day and one for a high sale day. This drives the architecture and server size.
  2. Your hosting stack – are you vanilla magento? or do you use headless / PWA? or use some software for image optimisation on your server?
  3. If the live site is already hosted, current CPU and memory usage.
  4. The size of the magento database.

luroConnect always starts an engagement with a server sizing sheet that is filled on behalf of the merchant. This allows us to propose a hosting plan on the customers cloud account and an appopriate luroConnect support plan.

Take the guesswork out of server sizing with horizontal scaling

A classic 3-tier architecture.

  • The web layer (WAF, apache / nginx /varnish, cron, rabbitmq),
  • the application layer (php, nodejs) and
  • the database layer (mysql, elasticsearch, redis).

Horizontal Scaling :

  • app servers can scale independently – indeed they can be autoscaled.
  • Low traffic websites can fold either the app or the db layers or both into the web layer
  • The db layer can be extended to have master slave
  • A proxy layer can load balance read traffic between master and slave, giving scalability at the database level

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like ~0 downtime code deploy and autoscale to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for Magento.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimized hosting costs
Click here to schedule the call
March 28, 2023 By hosting, Magento, Site Speed 0 Comments Read more...

Improving PDAStudio performance : Cache more

PWAStudio makes many “storeConfig” calls that – depending on the website – be made cacheable in varnish as they are unlikely to change. This will reduce cookie blocking – or reduce load on php if the authorization is used.

What is the session blocking problem?

When Magento (php) processes a request, the cookie passed is mapped to a session in Magento. Sessions are stored either in var/session or on production systems, in redis.

Magento will lock the session until the php code processes this request. At the end of the request the session is unlocked.

When the session is locked, any hit with the same cookie, is kept in wait state, waiting for the session lock to be released. If there are more than one hits, all hits wait. These are not kept in a ordered queue – instead they each check the state of the session every x seconds and the first one breaking in gets the session lock.

Session lock is important to process hits that update the session – login, cart operations, checkout operations can use sessions. But, the problem is that, not all hits need this lock, and Magento gives no way for a developer to hint that the hit being processed does not need a lock.

The problem with ajax calls – especially PWAStudio – is even more severe. To display a page, many calls for each component on the page are made. If all of these are to be processed by magento, they will all be queued and a single slow query can bring down the site performance.

A PWAStudio Example

As can be seen in the screen below, a page refresh of a PWAStudio website hosted on Magento Commerce Cloud, The arrows highlight the hits that are marked by Magento as non cacheable.

Analyzing the content returned by the getStoreConfig hit.
https://www.soch.com/graphql?query=query+GetStoreConfigForCarouselEE{storeConfig{store_code+product_url_suffix+magento_wishlist_general_is_enabled+enable_multiple_wishlists+__typename}}&operationName=GetStoreConfigForCarouselEE&variables={}

It is clear that these values are unlikely to be changed and can be cached by TTL alone – with a potential ability to clear varnish with a URL / regular expression to help clear the url if an occasion arises.

Improve caching

The hits marked in Blue on the right have been analyzed by luroConnect and we can suggest to cache in varnish on TTL of 1 day. Note : Varnish cache is already hashed with the store key. This is important as some of the data is store specific.

This requires a vcl change.

Yet recommending Magento Commerce Cloud for hosting?

Think again! Analysis like this is only available from luroConnect. Moreover, we will implement the vcl changes.

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like ~0 downtime code deploy and autoscale to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for Magento.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimized hosting costs
Click here to schedule the call
March 3, 2023 By caches, Magento, PWA, Site Speed, varnish 0 Comments Read more...

Meet Magento India 2023 – Speaker Talk – Improve PWA Performance

On Feb 3, 2023, our CEO Pradip Shah presented a talk titled “Improving Headless / PWA Performance” at Meet Magento India in Mumbai, India.

The premise of the talk was the observation that the Headless / PWA eCommerce world promised lightning fast websites but many have ended up with slow performance, especially as measured by Google’s metrics.

This talk discussed issues and solutions that have been implemented in real eCommerce websites to increase page speed.

There are 2 versions of this for you to download

  1. The pdf version (5MB)
  2. The powerpoint version (23MB) – it has a few videos, and hence recommended to download.

Summary

Section 1 : Legacy HTML page technology is not stagnant – with Hyva and on page optimization from technologies like Nitrogen, page speeed scores of Magento traditional HTML page has improved. However, many traditional websites suffer from slower response speeds with uncached pages. Example : www.kalkifashion.com is a Hyva theme with Nigrogen front end caching and optimizaion.

Section 2 : PWA is not magic – the promise of “lightning fast” website needs work. Basic page speed principles apply and so do some new ones.

Section 3 : It is possible to make websites using Magento REST and Graphql. Each one has different challenges. REST by default does not cache and Graphql uses sessions.

Section 4 : When using graphql, avoid POST graphql for queries – use them only for mutations.

Section 5 : Study your application and you can add caching to Graphql’s that Magento may mark as not caceheable.

Section 6 : Custom graphql queries result in database queries that may need optimization. A step by step method to get the underlying mysql query generated is a useful process. We used that to achieve great results. www.mysoresareeudyog.com has a custom default filter for a listing page – latest.

Section 7 : Magento 2.4.5 allows method to prevent session locking using authentication. But by default, authenticated graphql calls are not cached – an approch similar to one presented earlier will be required to ensure optimal caching is achieved.

Section 8 : Go beyond. Add logic in frontend and cache GraphQL results in the browser. This is the ultimate power of headless / PWA. It may not help with page scores that are measured without browser cache, but user experience will improve.

Section 9 : Bulid can improve page loads. Appropriate sized chunks and using hashes instead of version. Another improvement build can give is use of cookie free domains. A static domain for example for js and css bundles allows the main domain to not go through a caching layer, improving page load speed.

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like ~0 downtime code deploy and autoscale to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for Magento.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimized hosting costs
Click here to schedule the call
March 3, 2023 By Magento, page speed, performance, PWA, Site Speed 0 Comments Read more...

Improve page speed with Hyvä Themes

Modern Page Speed Metrics

Modern Page Speed Metrics as defined by Google are called “Core Web Vitals“.
This measure focusses on 3 aspects of user experience.

Largest Contentful Paint or LCP that measures loading performance.
Content Layout Shift or CLS that measures visual stability.
First Input Delay or FID that measures interactivity.

This obsoletes previous measures such as First Contentful Paint (FCP) or even Page load time reported by many measuring tools.

Core Web Vitals

Site speed has evolved and needs an evolution in the technology stack

The change in metrics means the technology stack has to evolve.
Many storefronts have adopted a more agile approach moving to a headless architecture.

Deploying headless adds complexity – for Magento stores, you now are dealing with two or more builds – Magento and headless. (Some headless stacks may need more builds). As a result, a headless stack is not for all stores.

There is nothing wrong with a monolithic stack – however, the Magento theme uses rather old technology that has aged.

The frontend technology world has accepted Adam Wathan‘s tailwind css as a great solution for both easing frontend development and improve page speed.

Much like jquery was the javascript library of choice for older UI, alpine.js is the library of choice for user interfaces developed using tailwaindcss.

What is Hyvä?

Hyvä Themes is a Magento theme based on tailwaindcss and alipe.js. Much like the Adam Wathan with tailwindcss, Willem Wigman the pioneer of Hyvä, believes in simplicity and componentization – making it ready for the future.

Hyvä Themes is not based on Magento’s default Luma. It is completely rewritten with modern a UI framework. The results are astonishing UI with a better page score.

Moreover, moving to Hyvä Themes is a re-theming project. Most of your existing functionality will work as is – until a module was written to be dependent on the older theme. A large website was moved by our partners Aureate Labs in under 3 months.

luroConnect partners with Hyvä

luroConnect will support Hyvä build as part of our standard Magento build process.
The luroConnect build is generally done in a dockerized container without access to the database. This ensures our build does not consume resources of the live site while running composer, setup:di:compile and static:content:deploy commands. It also makes our build easy to deploy and rollback.

luroConnect is a Managed Hosting Platform for Magento – giving a development, staging and live environment on your cloud account. With infrastructure-as-code principle used in its stack and a CI/CD inbuilt into the platform, luroConnect gives unprecedented confidence of the hosting environment on any cloud – and now use our kubernetes stack option.

Limited Time Offer for Hyvä customers

Signup with us between Jan 1, 2023 and March 31, 2023, with a go-live date before May 1, 2023 with Hyvä and get
first 3 months free of luroConnect fees (US $900 – US $3000 value depending on the plan chosen), if customer signs up for a 1 yr contract with luroConnect.

Signup with the consultation link below and see how kalkifashion.com with Hyvä is hosted on luroConnect.

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like ~0 downtime code deploy and autoscale to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for Magento. Now with out-of-the-box support for Hyva.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimized hosting costs
Click here to schedule the call
October 6, 2022 By Core Web Vitals, page speed, performance, Site Speed 0 Comments Read more...

Should I move to shopify from Magento?

The platform battle of Magento vs Shopify rages on. Increasingly merchants are moving to Shopify from Magento due to easy of operations and website management.

For many, where the decision was a no-brainer, the move has already been done.
For others, this question rages on, as shopfiy adds more features from itself and its partners in an easy to manage.

This article is written in 2022 for the “others”.

The “others” I refer to have some of these characteristics

  • A working eCommerce business – one that makes money, increasing the risk of a move
  • Migrated to Magento 2 and hence have invested in the technology
  • Customizations that differentiate the store and would be difficult to achieve in Shopify. These may include custom attributes, use of custom options, personalization technology, etc.
  • Headless frontend
  • Worried about data ownership

What are the pain points in Magento that makes merchants look at shopify

  • Managing the Agency or Magento Agencies are expensive!
  • Website speed scores or Magento website speed scores can be bad.
  • Everything is so hard in Magento compared to Shopify

What options you have to ease the pain and stay on Magento?

  • Managing the Agency.In my conversation with merchants unhappy with Magento, the main reason to consider a move is the performance of the Agency – i.e. they have an agency problem, not a platform problem.
    • Agencies have powerful marketing presentations that appeal to the heart of an eCommerce merchant. But, a merchant should pay attention to the compatibility between of the agency to how the business operates before choosing one. Infact, it may be even desirable to manage multiple agency relationships.Some factors to consider.
    • If you have an in-house project manager, you need developers – an strong in development. One of our customers has 2 agencies – a cheaper local and a more established one. Depending on the complexity of the project, they decide which agency will be best. They have their own project manager.
    • Some agencies have a delivery manager that acts as a single point of contact. They work with you on your requirement, discuss with the developers and are responsible for the delivery. Ensure they communicate with all teams – including business and SEO.Some agencies offer a full eCommerce service – including SEO to development. These are very suitable for growing eCommerce arm of a omni channel merchant. Such agencies can work on outcome basis – with a profit share for example.
    • A point of conflict between merchants and agencies is the business model – Agencies like an hourly billing model as it closely matches their biggest cost – the manpower used to execute the project. Many merchants may think of a fixed cost model best suits them – with outcomes well defined. Software on the other hand is very difficult to estimate, especially in an agile development world. Merchants wanting a fixed cost model should be more acceptable to cost escalations due to change requests.
    • Use an expert to interface with an agency. If you have a complex project and do not have an inhouse eCommerce manager, it will be a good idea to hire an consultant to interface with the agency. The consultant can act as a project manager communicating the business needs to developers and ensuring the delivery meets the quality goals.
  • The user interface. From a competitive perspective, UI is the most crucial part that can help you differentiate from your competitors. A more personalized website or an emersive experience will attract more visitors to stay and purchase.But, magento websites are slow on page speed scores, especially those developed on the original Magento 2 theming, which is archaic by todays UI technology standards.The Magento UI stack is evolving. Apart from the many headless options, Hyvä Themes has completely rewritten the theme to be fast and modern.Infact, in my opinion, UI should be the main reason to stay on Magento – the ability to give the best user experience. Rather than have a single page speed goal for the website, have a more user experience view. Even google suggests to have targets for faster website and work towards achieving them.
  • Ease of Shopify vs Magento. A big complaint against Magento is its bloat – too many features, not many, easy to use. A customer recently made this comment when they were trying to enable the watermark in Magento. Turns out, while the watermark feature is shown in Magento’s admin dashboard, enabling it will immediately remove all images – until the developer had accounted for this in their development. The feature bloat meant the developer did not really understand why it would not work. While this feature just works out of the box in shopify.

Magento has a community

Magento has over the years grown to have a very vibrant community. Some estimates put it at over 300,000 strong. Mainly tech professionals, it also consists of many areas of eCommerce business.

For some merchants, it is important to know they (or their online business) is not beholden to a single corporation. A Shopify network for example, though very cohesive, is orchestrated by Shopify. Shopfiy does whet these vendors, but there is no assurance of quality given by Shopify on their behalf. Moreover, Shopfiy can decide to compete with one of the features with any partner in that network, making your favourite plugin obsolete.

Magento on the other hand has independent plugin developers, some of who have made a name for themselves. The agency and merchant have the task of ensuring every plugin they use is good in terms of quality and functionality.

Migration to shopify may not be all roses

On the other hand, shopify’s ease of administration can get in the way of large changes. A process has to be used including using staging site for UAT, git and tools like ThemeKit, Beanstalk and/or the shopify github app. Which brings back the agency and project management question.

Getting feature parity with a Magento website may also not be easy. One merchant moved to Shopify and lost some upsell opportunities as they had used custom options in Magento. They commissioned some custom development and realised that the agency would launch a server and store some data there. This added to a vendor lockin (their agency) they did not want.

luroConnect easing the pain of Magento and Headless/PWA

luroConnect is a managed hosting platform for eCommerce – including Magento and Headless eCommerce.

We believe in serving 2 stake holders in an eCommerce website – the developer / agency and the merchant. We have tools and features to help both. To remove the pain of taking developer code to production. luroConnect supports dev, staging and production environments, with an inbuilt CI/CD for all platforms we support, with low downtime deploys.

The luroConnect stack deploys on the cloud of customers’ choice. The production site is backed by a performance dashboard, configurable alerts and 24×7 support.

Our extensive agency network helps us match a merchant to an agency.

Considering moving from Magento to Shopify? Talk to us. We may just give you a reason to stay back!

We can analyze your site for free

Schedule a call

Not happy with your website performance and want an expert to look at it?

  • We will analyze your site using public information.
  • We will ask you to give us a 1 day web server log file.
  • We will try to identify what steps if any you should take to improve your sites performance goals.
Click here to schedule the call
September 24, 2022 By Magento, PWA, SEO, Site Speed 0 Comments Read more...

Magento and graphql : A slowdown saga

PWA, Magento and graphql : A slowdown saga

Note : I write this article as Magento 2.4.5 is released and fixes some major performance issues that have resulted in the dream of headless and PWA go sour for many early adopters of technologies like PWA Studio and Vue Storefront 2.

PWAs and headless came with the promise of fast navigation and have had a rough ride at best, especially with Magento backends. Early PWAs like Vue Storefront 1 were implemented using Magento Rest API with a api middleware in nodejs that used elastissearch to store cached version of magento catalog for faster access. Magento implemented Graphql to avoid the need for the rest api. Use of direct rest api is ill-advised without a middleware as it exposes a Magento admin token. A middleware would sanitize the request possibly by checking a cookie and also limit the range of queries run. Graphql prevented the use of admin tokens and instead relied on frontend cookies for authentication.Magento’s REST API also results in large datasets. Graphql has a powerful, standardized query syntax to theoretically present a path breaking solution to build Magento headless around. However, early implementations did not fully cover the entire magento data model – Magento even advised the use of REST api when graphql was not sufficient. And when real world websites with large builds and catalogs were deployed, performance issues emerged.

Graphql are ajax calls in Magento that use sessions. In a typical hit processed by Magento, a session is opened, the hit is processed and then the session is closed. (A hit here is either a frontend hit or an ajax call).

Sessions and race conditions

Graphql are ajax calls in Magento that use sessions. In a typical hit processed by Magento, a session is opened, the hit is processed and then the session is closed. A hit is either a frontend hit or an ajax call.

Magento can store information in sessions – cart data for example. In order to prevent 2 hits from writing contents to the session simultaneously – called a race condition, sessions are locked for the duration of the processing a hit. (Take for example a checkout flow and let us assume that the address and payment info is written to session. You would want to ensure both get written. If both “raced”, only one piece of information would be written). Magento identifies an internal session by setting a cookie in the visitors browser. Each hit carries the cookie allowing magento to identify the session. Since a session is unqiue for a visitor, so Magento can process process only one hit per visitor at any given time.

With ajax in general and graphql in particular, many simultaneous hits may go to the server. Magento, through the session locking mechanism, queues them up. The hits are not guaranteed to be processed in the order they were received or any order in particular.

A typical session content in redis looks like

hgetall sess_eba681783f7000bc668cc45005aeaca4
1) "lock"
2) "0"
3) "writes"
4) "5"
5) "data"
6) "_session_validator_data|a:4:{s:11:\"remote_addr\";s:14:\"116.58.200.181\";s:8:\"http_via\";s:0:\"\";s:20:\"http_x_forwarded_for\";s:0:\"\";s:15:\"http_user_agent\";s:117:\"Mozilla/5.0 (Linux; Android 10; RMX2030) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Mobile Safari/537.36\";}_session_hosts|a:1:{s:10:\"host.com\";b:1;}default|a:0:{}customer_base|a:2:{s:11:\"customer_id\";N;s:17:\"customer_group_id\";N;}checkout|a:0:{}"
7) "wait"
8) "0"
9) "pid"
10) "10.0.2.197.host.com|3735"
11) "req"
12) "POST host.com/graphql"
Most of these entries are used internally by the redis session module. Entry 6 is the main session, stored in php serialized format.

If each hit takes only a few milliseconds and the number of ajax calls are not high, the overall response time may not perceptibly slow the site.

But, if even one ajax hit takes time, the page load can slow down. If a customer opens multiple tabs or refreshes the page, the slowdown may be more severe, sometimes leading to errors.

Here is an example. We are analyzing server logs based on IP. Lines 1 and 2 indicate the same link in google was clicked twice – possibly in 2 tabs on the browser. As the page loads we see graphql’s being loaded. The last 2 items are an indication of the problem.

The 2nd last hit is the slow hit – it took 10 seconds to return a result as the item was not in cache. The problem in the last hit was that it was waiting for the 2nd last hit to be processed, although in all probability it was in cache. If the number of items in this queue grows above 6 – for example if a visitor opens tabs and accesses urls not in varnish, a 500 error may be returned, possibly resulting in the UI showing a block not fully loaded at all. A refresh typically seems to solve the problem.

Server can run out of php resources

When too many graphql calls wait, server side can run short of php resources. This time you can see 504 and 502 errors. Adding more php resources for the same server risks running out of RAM. Adding more servers does help with the problem, but that is a waste of resources.

Graphql and caching issues

Graphql in Magento needs many caches to perform well. However, upon cache clear the “galloping horses” problem can bring down a busy website.

Upon cache clear the first access to graphql results in the schema being read. The performance for this action has improved substantially since Magento 2.3, but we yet highlight it as a concern. A cache warming of this is preferred.

Queries like filter in a category page can be slow and hence caching and warming some queries is always a good idea.

Enabling varnish cache is also important – varnish does not use sessions.

Recommended way to use Magento graphql

Graphql needs authorization – it needs to know what customer is asking for the information. It needs it so that the results include say for example the correct tiered pricing for this customer. While sessions include this information, they also store state and hence need the protection of a lock.

Magento supports JWT customer tokens for graphql.
https://devdocs.magento.com/guides/v2.4/graphql/mutations/generate-customer-token.html

Use the generateCustomerToken mutation to create a new customer token.
Example :

mutation {
  generateCustomerToken(
    email: "bobloblaw@example.com"
    password: "b0bl0bl@w"
  )
}

Response

{
  "data": {
    "generateCustomerToken": {
      "token": "ar4116zozoagxty1xjn4lj13kim36r6x"
    }
  }
}

Magento suggests NOT enabling cookie and JWT token authentication at the same time to reduce the chances of encountering problems caused by the differences between the two authorization methods. However, disabling cookie was added a feature only in Magento 2.4.5

However, Magento 2.4.5 varnish sample configuration disables varnish caching for logged in user. This can reduce performance.

Conclusion

Magento performance continues to be a troublesome aspect of the eCommerce platform. At luroConnect we look at performance in great depths.

Would you like to switch to a modern hosting platform?

Schedule a call of a free evaluation!

With features like ~0 downtime code deploy and many scaling options to reduce your hosting costs, luroConnect offers you unparalleled hosting environment for eCommerce – specifically Magento and various PWA / Headless technologies.

Schedule a call and we will show you how we can

  • Improve your hosting, possibly with autoscale
  • Have a managed dev, staging and production environment
  • Server performance measured every minute with alerts for a slowdown
  • A multi point health check every day
  • Optimize hosting costs
Click here to schedule the call
September 12, 2022 By Magento, performance, PWA, Site Speed, varnish 0 Comments Read more...

Core Web Vitals : Content Layout Shift (CLS)

Introduction

Core Web Vitals contain 3 factors to consider for the speed of your website – LCP or Largest Contentful Paint, FID or First Input Delay and CLS or Cumulative Layout Shift.

This article explores CLS or Cumulative Layout Shift.

CLS measures visual stability of your web page on a given device.

What is CLS?

A Layout Shift occurs anytime a visible element (for example top of fold on an iPhone) changes position (i.e an element’s top left corner moves) as the page is being rendered.

Cumulative Layout Shift is the total of layout shifts until viewport is fully rendered.

When you open a web page and the content moves suddenly, it causes high irritation and can result in a visitor to “bounce” from the site. Some news websites with dynamic ad inserts are notorious, but even slight movement on an eCommerce site will cause visitor frustration.

Imagine you are on a product detail page (PDP) and as the page opens, you do see an “add to cart” button. You try to hit the add to cart button, but by this time the image begins loading and you have to wait until the UI stabilises. In Magento a configurable product page often behaves like this. Another common scenario is that the page shifts as a new font is loaded as the original text was rendered in the substitute or default font.

What are the common reasons for CLS in a Magento Website?

A fundamental reason why CLS occurs is that a responsive HTML is not designed for all widths under consideration.

  1. A javascript loading a dynamic DOM with styles not considered in the original HTML page
  2. A 3rd party plugin takes over the HTML design of the page.
  3. During HTML design, responsiveness to a mobile layout is not planned, but happens due to use of a responsive css such as bootstrap.

Let us look at specific reasons with the hope to come up with best practices.

  1. Use of <img> tag without width and height. Since space is not reserved and fixed, the width will be the actual width of the image – which will be known only once the image is loaded.
  2. Use of javascript to display images late. Most likely the javascript will redo the DOM causing a layout shift at the point of the insertion.
  3. Use of multiple fonts. As the fonts are loaded the text changes its flow
  4. Not knowing how layout shift is calculated. Chrome calculates layout shift as the page loads. It is cumulative. A small shift in the top part of a page can cause a large shift below.

Examples

  1. If a lazy loader is used to load images in a category page, it is common to see the placeholder image being a loading gif. Quite often the gif is not of the same size as the image being loaded. When the final image loads, a layout shift happens. This may apply to various widths designed for.
  2. In designing a product page with image on the left and product name and brief description on the right, it is common for the UI designer to use “float:right” on the text on the right and let the image load in javascript later. However, for mobile, the text will most likely come below the image and a layout shift will happen when the image is loaded.
  3. Hero images and carousels may be loaded later as following a guideline to run “all javascript late”. If space is not reserved, a layout shift will occur.

In the example below, a menu is inserted after the banner is loaded for the mobile, causing a CLS.

Stay tuned to this series on Core Web Vitals for Magento. We will be looking at specific examples and solutions.

February 17, 2022 By CLS, Core Web Vitals, page speed, Site Speed 0 Comments Read more...

Varnish, Magento and frequent product updates

In response to Erwin Hofman’s M2 performance post, a reader commented

Varnish and Magento 2

Use of varnish with Magento has been a popular speed increase. So popular, that Magento decided to incorporate in M2.

This has spread endless debates though

  • Would it not have been better to improve the core code quality instead?
  • How often and which pages do we put in cache?
  • How to organize user personalization content? (Magento has answers in terms of ajax and ESI, but I am afraid the documentation is so spread around, many developers and plugin vendors are not sure).

The question raised by the reader is another point of debate – how can a Magento store, with frequent product updates be made ready for using varnish.

Let us see how Magento works with Varnish – or what it means to say M2 supports varnish.

(Refer this article for a detailed analysis.)

Magento cache has always (yup M1 also) supported tags in caches. A typical cache is a key->value pair, typically implemented as a hash table to lookup the key and return the value. In case of a full page cache, the key is made up of the the URL and parts of the HTTP header that forms the request. When the key is found in the hash table lookup operation, it is a hit and the content is returned. When the key is not found, the request is forwarded to magento to process it. When Magento processes it, the key and the content is stored. The content is the entire HTTP response, including HTTP response headers and HTTP body.

When Magento processes a request, it returns in a HTTP response header, a “hint” header called “X-Magento-Tags”. This header has information about what type of content the page holds.

For example, a category page will have tags that represent the category and each product in that category. A product page would have a tag that represents that product.

This allows Magento to selectively clear the Varnish FPC, say when a product’s content is modified, by sending a special header to varnish to PURGE pages that match the product’s tag.

This is a communication between Magento and Varnish.

(Magento is aware of the location of varnish by the “http_cache_hosts” setting, Varnish is aware of Magento backend IP in its acl_purge list).

Indexing

In order to understand how Magento triggers cache clear events, we need to understand indexing.

Magento has many indexes – a mechanism by which changes made to admin are reflected on the frontend (the end user UI). Varnish only needs to be cleared when Magento moves products to frontend.

If index modes are set to update on save, each product save will result in corresponding pages to be removed from varnish. When making large changes such as with a csv upload, this will result in many pages being cleared multiple times. Note that a product save results in both the product as well as all the category pages of the category / categories the product belongs to.

If indexing mode is set to on schedule, a cron task that processes the “index” group is responsible for running indexing. If acceptable to the business, indexing can be set to run every few hours, reducing the rate at which varnish clears.

If you want a no hassles managed hosting, get in touch with luroConnect. We even give you a free assessment of your website.

We can analyze your site for free

Schedule a call

Not happy with your website performance and want an expert to look at it?

  • We will analyze your site using public information.
  • We will ask you to give us a 1 day web server log file.
  • We will try to identify what steps if any you should take to improve your sites performance goals.
Click here to schedule the call
January 27, 2021 By page speed, performance, Site Speed, varnish 0 Comments Read more...

Case Study : How a simple code change had a major impact on website performance

During black Friday sale, one of our customers’ websites was too slow and unusable for long periods. We were embarrassed, but all our analysis pointed to code. As part of our active support, we help with identifying code bottlenecks. We use many techniques including profiling, but a simple technique for a really slow website is analyzing the php slow log.

Observations

We track slowest URLs and chart them on our dashboard. A typical days chart looked like the one below. Most of the slow URLs were category listing page urls.

What is the php slow log?

The PHP slow request log is where PHP records information about any request that takes more than “x” seconds to execute. The number of seconds is configurable in the php-fpm.d/www.conf file.

The PHP slow request log records stack traces (also known as tracebacks) of each slowly executing script at the moment the request passed “x” seconds in execution. For example the following trace was generated for the website we were optimizing. The first line gives the date and time, the php-fpm pool name and the pid of the fpm process. The second line names the script – for Magento it will be the index.php always. The following lines have the memory address, the function name, the file name and the line number. A stack trace always lists the last call first.

[03-Dec-2020 22:54:57]  [pool www] pid 19267
script_filename = /www/usa/index.php
[0x00007ffa5ec21d30] execute() /home2/customer/77faf58/vendor/magento/zendframework1/library/Zend/Db/Statement/Pdo.php:228
[0x00007ffa5ec21c80] _execute() /home2/customer/77faf58/vendor/magento/framework/DB/Statement/Pdo/Mysql.php:93
[0x00007ffa5ec21be0] _execute() /home2/customer/77faf58/vendor/magento/zendframework1/library/Zend/Db/Statement.php:303
[0x00007ffa5ec21b30] execute() /home2/customer/77faf58/vendor/magento/zendframework1/library/Zend/Db/Adapter/Abstract.php:480
[0x00007ffa5ec21aa0] query() /home2/customer/77faf58/vendor/magento/zendframework1/library/Zend/Db/Adapter/Pdo/Abstract.php:238
[0x00007ffa5ec219d0] query() /home2/customer/77faf58/vendor/magento/framework/DB/Adapter/Pdo/Mysql.php:541
[0x00007ffa5ec218a0] _query() /home2/customer/77faf58/vendor/magento/framework/DB/Adapter/Pdo/Mysql.php:615
[0x00007ffa5ec21810] query() /home2/customer/77faf58/vendor/magento/zendframework1/library/Zend/Db/Adapter/Abstract.php:737
[0x00007ffa5ec21760] fetchAll() /home2/customer/77faf58/vendor/magento/framework/Data/Collection/Db/FetchStrategy/Query.php:21
[0x00007ffa5ec216e0] fetchAll() /home2/customer/77faf58/vendor/magento/framework/DB/Query.php:182
[0x00007ffa5ec21660] fetchAll() /home2/customer/77faf58/vendor/magento/framework/Data/AbstractSearchResult.php:233
[0x00007ffa5ec215c0] load() /home2/customer/77faf58/vendor/magento/framework/Data/AbstractSearchResult.php:107
[0x00007ffa5ec21550] getItems() /home2/customer/77faf58/vendor/magento/module-catalog-inventory/Model/StockRegistryProvider.php:143
[0x00007ffa5ec21440] getStockItem() /home2/customer/77faf58/vendor/magento/module-catalog-inventory/Model/StockRegistry.php:88
[0x00007ffa5ec213c0] getStockItem() /home2/customer/77faf58/vendor/magento/module-catalog-inventory/Model/Plugin/AfterProductLoad.php:40
[0x00007ffa5ec212b0] afterLoad() /home2/customer/77faf58/vendor/magento/framework/Interception/Interceptor.php:146
[0x00007ffa5ec21150] Magento\Framework\Interception\{closure}() /home2/customer/77faf58/vendor/magento/framework/Interception/Interceptor.php:153
[0x00007ffa5ec21070] ___callPlugins() /home2/customer/77faf58/generated/code/Magento/Catalog/Model/Product/Interceptor.php:65
[0x00007ffa5ec20fe0] load() /home2/customer/77faf58/app/code/Plazathemes/Bestsellerproduct/Block/Bestsellerproduct.php:112
[0x00007ffa5ec20ef0] getBestsellerProduct() /home2/customer/77faf58/app/code/Mageplaza/CatalogPermissions/Observer/ProductLoadAfter.php:79

How do you trace from a hit to a slow log entry

From nginx we can trace to the slow log using a match in the php-fpm access log. We format nginx and php access log in a way that helps tracing.

The nginx log entry that we traced using the format

$remote_addr|$remote_user|$time_local|$request_time|$upstream_response_time|$request|$status|$body_bytes_sent|$http_referer|$http_user_agent|$host|$upstream_addr

127.0.0.1|-|03/Dec/2020:22:55:01 -0600|8.966|8.967|GET /usa/health-and-rejuvenation/cereals-health-mix HTTP/1.1|200|20458|https://www.ishalife.com/usa/yoga-gear/bedding|Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36|www.ishalife.com|10.120.0.7:9000

php access log format used
access.format = %R - %u %t %m %r%Q%q %s %f %{mili}d %{kilo}M %{total}C%% %p

php access log entry to the traced url (matched by time and response time)

10.120.0.2 - 03/Dec/2020:22:54:52 -0600 GET /usa/index.php 200 /home2/customer/www/usa/index.php 8962.264 4096 48.20% 19267

The %p records the process id of php-fpm that processed this hit. Based on the time and process id, the slow log entry can be accurately traced.

Analysis

The stack trace clearly indicated that an observer was called when the event “ProductLoadAfter” was called. For this website, it slowed down the category display as the call was made for each product. A peep into the code in productloadafter observer was loading “Best Seller Products”. So, for each product in the category, it would load the (almost) identical set of best seller products. The observer object was not even used.

Let us look at the code

public function execute(Observer $observer)
    {
        /** @var AbstractCollection $productCollection */
        
           $productCollection = $this->productBest->getBestsellerProduct();
       
           foreach ($productCollection as $key => $product) {
                /** @var product $product */

                $productObject = $this->productRepo->getById($product->getId());
                if ($this->helperData->validateConditionDefault($productObject, ObjectTypeAction::TYPE_PRODUCT)
                    && !$this->helperData->checkIPPassAllRestrict()
                ) {
                    /** @var DataObject $productObject */
                    if ($productObject->getData('mpcp_usecf_hideaction') === '0'
                        && $this->helperData->getProductHideCatAndWidget()) {
                        $productCollection->removeItemByKey($key);
                    }
                    // do not use config hide action
                    if (!$productObject->getData('mpcp_usecf_hideaction')
                        && $productObject->getData('mpcp_hideaction') === '1') {
                        $productCollection->removeItemByKey($key);
                    }
                }
            }
    }

The solution

Remove the observer as apart from badly written, the result was never used on the website. Code analysis revealed 2 unused plugins.

2 unused plugins and 1 observer call was removed, resulting some category pages loading 10x faster!

Before and After stats

We monitor hits in real time and chart hits / minute and avg response time per minute. In the graphs below, the left axis is hits per minute (plotted in turquoise) and the right axis is average response time in seconds per minute (plotted in black).

BEFORE

AFTER

CPU usage of php servers

BEFORE

AFTER

Database CPU usage across multiple days

Conclusion

The importance on good code and possibly the negative effects of unused functionality was highlighted in this case study.

As users of plugins we need to understand the motivation of plugin vendors to pack in substantial functionality leads to undesired side effects, especially on functionality you don’t want to use. Budget to clean up vendor code before using.

December 29, 2020 By case study, performance, Site Speed 0 Comments Read more...