Final testing before web launching can be a lot of work. This is even more accurate for Magento Progressive Web App (PWA) with a highly complex structure, which may leave you in confusion and overlooking some critical notes. That’s why we created this pre-launching Magento PWA performance checklist to help you stress all the functional areas and deliver the desired user experience.
Magento Performance Quality Testing Process
Before Testing
Prepare The KPIs
Now it’s time to set up the KPIs with specific test deadlines. Some performance criteria for the Magento PWA would be:
- Business metrics
- User response time
- Interaction time and retention rate
- Resources utilisation
Decide The Testing Tools
Prepare a performance testing tool, a profiling tool, and follow up by an analyzing tool.
First, there is quite a list of tools for performance; Magento also equipped you with a handy Performance Toolkit with recommended one:
Next, the profiling tools are software profilers designed to help analyze your site’s weak spots to improve the overall performance where Blackfire and Tideways are two representatives.
Finally, Google Analytics remains the most recommended one for analyzing metrics and data to make a report.
Create Customer Journey
Here’s where you try to predict the comprehensive scenarios every prospect coming to the site will make. Mapping out those steps in detail is key to a convertible performance testing pathway.
Depending on your marketing and sales campaign, it can involve multiple funnels and landing pages. Start with generic scenarios and simulate further actions upon them. Some advanced tests can comprise several user data sets, emulate responses for mistakes, background launch for scheduled tasks, etc.
Testing Process
Generating Data For The Performance Test
You can generate sample data in Magento as the input to carry any performance testing tool. Depending on requests, you can run the sample in the production environment or the cloned one, or any other non-production environment.
When gathering data, it’s crucial to gather the benchmark or your accepted threshold. To adjust the amount of sample data, and user profiles. They can vary from small, medium to large, and extra-large. Magento also creates a profile generator, which provides a wide range of useful supported fixtures.
Set Up The Performance Test
When deciding on the testing tool, plug in the mapped-out user scenarios to generate a complete workload model. Take some guidance on building a web test plan to simulate the target users as specific and realistic as possible.
In the beginning, you need to place all controllers and samplers into a thread group. All the thread group elements will be used to execute the test, with each is delivered in the entire and separate from another. Altogether, multiple threads will simulate concurrent connections in the server.
Run The Test
Before the final test, run a trial to ensure everything’s in place and the data has been recorded and monitored. One thing to avoid is changing the scenarios. You should only change the workload (traffic and duration) at this stage.
You can start slow and steady with load tests. There’s no limit on how many times you can run but make sure each test is the same length. Also, when changing a new round, don’t forget to check whether the monitoring tools are still working.
Analyse The Result
Now that you’ve had the raw data, let’s use a profiling tool to transform the HTML report into an advanced visualized one with charts and graphs.
If then you see the test fails to your accepted benchmark, detect where the issues and blockages are. Create a new improvement plan and retest to verify if you have fixed the problems.
Now for the reports, you should make 2 types for different audiences. To store the site data on performance for the next testing phase or shorten optimization size, create a technical casefile. To the stakeholders, explain the practical meanings behind those stats and graphs, possibly relating to profits.
Magento 2 Performance Checklist
After testing how your Magento store performs, there are still some final touches to optimise for a robust, streamlined, and smooth performance.
Unused Modules
Some unnecessary modules are pre-installed within your Magento 2 account. So, make sure you have removed all of what you don’t need and update all of what you use to the latest version.
Enable Production Mode
Many stores are still running on either default or developer mode while they should be in production. Through CLI is the best way to switch your site to the ideal production mode:
To find out which mode is activated on your store, type this: php bin/magento:deploy:mode:show
If not, set the production mode by this: php bin/magento deploy:mode:set production
Enable CSS/JS Minification and Merging
Magento 2 speed can greatly influence the conversion rate. Loading speed is a key factor in delivering a satisfying and risk-free user experience.
Reduce the page switching requests your site has to make by minifying and merging CSS files. In this way, the load is optimized to improve overall performance.
You can manage this from the admin panel. Navigate the Developer tab, click Configuration, then Advanced (you can only see it in developer mode). Magento recommends using 3rd party plugins such as MagePack or Baler.
Employ Elasticsearch for Magento’s Catalog Search
To enhance the speed and quality of catalog search, Magento has introduced Elasticsearch from version 2.4 upwards. To enable it, access your admin panel:
Stores > Settings > Configuration > Catalog > Catalog > Catalog Search > Search Engine
Here you’ll find a parameters list to configure Elasticsearch and use its endpoint. Then you can check the Test connection to see if it’s all worked.
Use Redis for Session/Default and Full Page Cache
Magento 2 has integrated Redis as a huge valuable support for key database engines. Redis is in charge of leveraging session storage and default/full page. Here are the commands to configure your site to use Redis in the root folder:
bin/magento setup:config:set –cache-backend=redis –cache-backend-redis-=…
bin/magento setup:config:set –session-save=redis –session-save-redis-=…
Use Varnish To Accelerate The Response Time/TTFB
To help merchants configure Varnish correctly, Magento 2 had featured a functional integration that makes this process rather simple:
Stores > Settings > Configuration > Advanced > System > Full Page Cache, select Varnish from the Caching Application > configure the options remaining.
You can also configure Varnish from the CLI by running: php bin/magento config:set –scope=default –scope-code=0 system/full_page_cache/caching_application 2
CDN Usage
The content delivery network stores your media and static assets at the nearest edge servers to your customers.
Look for Stores > Settings > Configuration, under General > Web and expand the Base URL sections. Then update the base URL for Static View Files and another for User Media Files, along with your CDN’s endpoint URL. Do the same for Secure, and don’t forget to save your configuration.
It’s all set when you see your CDN URL serves most of the static files on your site.
Enable Asynchronous Email Notifications & Order Data Processing
You might want to allocate some tasks to the background during high times, such as checkout, order processing notification, and stock updates.
First, to enable email notifications, find Stores > Settings > Configuration > Sales > Sales Emails > General Settings > Asynchronous Sending.
Then, you can activate Asynchronous order data processing with: Stores > Settings > Configuration > Advanced > Developer > Grid Settings > Asynchronous indexing
Key PWA Performance Checklist
After testing and checking with Magento 2, now it’s time for an optimal progressive web app performance checklist.
Starting Fast, Staying Fast
PWA can pre-cache all the data to instantly serve the duplicated views thanks to service workers. The more users stay around, the smoother the scrolling experience and animation feel.
You can audit your PWA performance in Lighthouse or use PageSpeed Insights for the practical data set. Spend time examining all aspects of your site to ensure the transition and interaction are smooth and responsive.
Although PWA is fast, continuously improving its speed is needed to help you avoid any severe issue and always stay enjoyable to customers. Check out the complete list of web app fast load times here.
Active On Browsers
Testing this aspect is simple: you act like a user and open your PWA in Chrome, Edge, Firefox, and Safari to see if they appear and deliver the same experience without any mistakes or being disorganized.
Responsive On Devices
Likewise, users should be able to view your PWA at any screen size, the content should be delivered in complete and proportional. You can test this aspect with Lighthouse, right on a desktop device, or manually check it via a mobile device.
Easily Installable
Installing PWA through simple clicks and no storage is required to make it easier for users to carry out the tasks.
Lighthouse can help you verify if users are prompted to A2HS, but you have to check for the PWA installation experience pointed above manually. If you run into a problem, simply add a Web App Manifest file to the project.
Offering Offline Browsing Experience
To ensure the content stored is enough for fast loading speed, you should determine the features your audience expects to work offline, then make them available and adaptable to offline contexts.
Check if you have the following: IndexedDB for storing and retrieving data, background sync that allows users to keep taking actions and defers all new responses until the connection is on again.
Your service workers can also store all sorts of content for offline use, here’s how to enable it. By doing this, you’re creating a long-lived session, thus making the experience authenticated, and engaged.
Enabling Popup Messages
Visit your PWA and opt-in for push notifications to test this out. When the browsers provide the permission request, you can see if there’s a context for clarification.
The explanation on page load should clarify why users should enable the push notifications. Support the context visually by making Permission UI, and UX feels trustworthy and friendly.
Permission UX and The Right Ways to Ask Users for Permissions are valuable guidance to help you with permission prompts designing.
Takeaways
Key points to remember from this Magento PWA performance checklist:
- Performance testing is to help you detect any blockages, or barriers and make profitable changes to improve your user experience. Start by collecting data from various sources for real-world, authentic performance tests.
- Learn some tactics that point to the value of details to optimize the performance of the powerful Magento 2 platform.
- Ensure all the uniqueness of PWA is there and more by enabling the experience to deliver well on the running device and upon the user’s actions.
If you need help anywhere or want some expert advice on your nearby launching event, drop us a hi at [email protected]. As one of the leading agencies in Magento PWA development worldwide, Tigren‘s more than happy to help you with anything. We now provide both ready-to-use PWA themes and templates for Magento 2 as well as tailor-made solutions.
