{"id":24762,"date":"2022-01-11T11:06:53","date_gmt":"2022-01-11T11:06:53","guid":{"rendered":"https:\/\/www.webscale.com\/?post_type=blog&p=24762"},"modified":"2023-12-29T15:45:37","modified_gmt":"2023-12-29T20:45:37","slug":"3-ways-write-better-caching-modules-magento","status":"publish","type":"post","link":"https:\/\/www.webscale.com\/blog\/3-ways-write-better-caching-modules-magento\/","title":{"rendered":"3 Ways to Write Better Caching Modules in Magento"},"content":{"rendered":"
Paul Briscoe is Director of Development at Human Element<\/span><\/i><\/p>\n In today\u2019s marketplace, online merchants are focused on the speed of their website as a key indicator for how they will perform. Outside of actual sales revenue, page speed can be the ultimate measure of success for a team on whether or not they are delivering the best solution for their clients. Development teams go through site speed audits, Google Page Speed reports, and a myriad of other tools to help them understand how they can get the scores of the pages up, all in an effort to make data load fast, retain customers, and increase conversions. This problem is becoming harder, especially when working within a large application like Adobe Commerce (Magento).\u00a0<\/span><\/p>\n One of the tools a developer can use to drive this measure of success is caching. While caching is one of the two hard problems in Computer Science, doing it right, consistently, can yield great results for the performance of your website, and ultimately, its transactional success in the marketplace.<\/span><\/p>\n To back it up, every Magento developer has, at some point in their career, experienced problems with caching. In some cases, developers were probably staring at the computer in consternation, wondering why on earth the content was not showing on the page after multiple refreshes and triple-checking the code just deployed.\u00a0<\/span><\/p>\n To try and prevent developers from going down this rabbit hole again, this article will share 3 best practices that developers can use to improve the performance of their site, by incrementally utilizing the caching tools in their codebase, saving calls to MySQL, and avoiding unnecessary PHP processing.<\/span><\/p>\n Why is cache so important in Magento?<\/span><\/em><\/p>\n At the end of the day, users are concerned about how long it takes a site\u2019s pages to load. How long it takes the page to load affects Google search ranking and conversion to sales. Utilizing cache allows a developer to have a positive impact on these business goals.<\/span><\/p>\n Think about the desired outcome and how users will interact with the code.<\/span><\/em><\/p>\n At a high level, if developers are thinking about performance and how users will interact with the site, they\u2019re off to a good start. <\/span>Magento docs allude to this<\/span><\/a> when they state that best practices for cache performance involve <\/span>when and how<\/span><\/i> users clear and invalidate the cache, and are not always about saving the data itself.<\/span><\/p>\n For example, a business owner should be able to choose a set of products and then have them appear on a frontend page, but also be able to change them when they need to.\u00a0<\/span><\/p>\n The data needs to be retrieved only once.\u00a0<\/span><\/em><\/p>\n After the data needed is retrieved, save it into the cache with appropropriate tags so that Magento does not need to purge everything to refresh one piece of code.<\/span><\/p>\n Use Redis as the caching backend.<\/span><\/em><\/p>\n Magento makes it very easy to save data by cache keys and invalidate by different cache types. There are three methods available by default.<\/span><\/p>\n Each of these have pros and cons associated with them, but the accepted best practice is to use Redis for the default and page_cache types that are configurable in the application\u2019s env file.<\/span><\/p>\n Once configured, the \u201csave\u201d method is an interface that sits on top of an implementation of one of these three types of persistent backends.<\/span><\/p>\n The side effect of <\/span>cacheable=”false”<\/span><\/em><\/p>\n By default, Magento considers all pages cacheable unless there is a directive from a block layout that calls it \u201cuncacheable.\u201d<\/span><\/p>\n This will pop up from time to time when debugging slow pages because a developer had put the\u00a0 <\/span>cacheable=”false”<\/span><\/em>\u00a0 <\/span>tag somewhere in a layout. The unfortunate side effect of this tag is that it will cause the entire page to be uncached and result in misses from Varnish or another caching tool.<\/span><\/p>\n<\/li>\n If development is being performed <\/span>without<\/span><\/i> full page cache (FPC) turned on, developers can use PHP to get data about a customer that they might not have access to when the result of that page is cached after the initial request.<\/span><\/p>\n This will likely fail in higher environments because of FPC in Magento, Varnish, Redis, Fastly, or some CDN that is statically caching the content.<\/span><\/p>\n Use Private Content and Cache Keys<\/span><\/em><\/p>\n Magento\u2019s technology choice is to use requireJS, Knockout.js, and UI Components, giving developers the ability to serve dynamic data on cached pages.\u00a0<\/span><\/p>\n This happens in the form of private content that gets data through a series of PHP data providers and calls to the backend to save into client side storage and insert it into the page at places indicated by Knockout\u2019s HTML binding elements.<\/span> The real danger of the cache variation is that a developer can unintentionally create pages that are <\/span>too<\/span><\/i> specific, which will effectively bust the cache by creating multiple versions of the same page (which are only accessed once).<\/span><\/p>\n The gist of variations is that they work by creating different versions of the header signature\u00a0 <\/span>x-magento-vary<\/em>.<\/span><\/p>\n One way to create a cache variation is to generate a plugin on Magento\u2019s <\/span>getVaryString <\/span>method to append additional custom data to the string that is used to create the cached page. Generally speaking, cache variations are intended for Public content and should be used sparingly if at all.<\/span><\/p>\n<\/li>\n<\/ol>\n There is always a lot to unpack when it comes to creating successful, dynamic modules that are built for performance with cache in mind. Although there are no magic bullets to make a module development easier, knowledge of the system and the various caching strategies that exist are key to better performing sites.<\/p>\n Magento developers have to keep best practices in mind while developing and testing with caching strategies turned on. Avoid cache variations and make sure that the pages are saving data when possible. Doing this will help to keep the site on the path for better performance. If you are interested in having a deeper conversation around caching techniques,\u00a0reach out to us<\/a>\u00a0today! And if you are interested in a scalable cloud delivery solution that ensures fast and secure commerce experiences, talk to our partner\u00a0Webscale<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Paul Briscoe is Director of Development at Human Element In today\u2019s marketplace, online merchants are focused on the speed of their website as a key indicator for how they will perform. Outside of actual sales revenue, page speed can be the ultimate measure of success for a team on whether or not they are delivering […]<\/p>\n","protected":false},"author":25,"featured_media":255702,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","rank_math_lock_modified_date":false,"_aioseo_description":"","_aioseo_keywords":"","_aioseo_og_article_section":"","_aioseo_og_article_tags":"","_aioseo_og_description":"","_aioseo_og_title":"","_aioseo_title":"","_aioseo_twitter_description":"","_aioseo_twitter_title":"","_author_photo":"field_6513304084a08","_doc_url":"","_dp_original":"","_et_autogenerated_title":"","_et_body_layout_enabled":"","_et_body_layout_id":"","_et_builder_dynamic_assets_loading_attr_threshold":"2","_et_builder_module_features_cache":null,"_et_builder_version":"","_et_default":"","_et_enabled":"","_et_footer_layout_enabled":"","_et_footer_layout_id":"","_et_header_layout_enabled":"","_et_header_layout_id":"","_et_pb_ab_current_shortcode":"","_et_pb_ab_subjects":"","_et_pb_built_for_post_type":"","_et_pb_custom_css":"","_et_pb_enable_shortcode_tracking":"","_et_pb_excluded_global_options":"","_et_pb_first_image":"","_et_pb_gutter_width":"","_et_pb_module_type":"","_et_pb_page_layout":"et_no_sidebar","_et_pb_page_z_index":"","_et_pb_post_hide_nav":"default","_et_pb_row_layout":"","_et_pb_show_page_creation":"","_et_pb_show_title":"on","_et_pb_side_nav":"off","_et_pb_static_css_file":"","_et_pb_truncate_post":"","_et_pb_truncate_post_date":"","_et_post_bg_color":"#ffffff","_et_post_bg_layout":"light","_et_template":[],"_et_theme_builder_marked_as_unused":"","_et_use_on":"","_gallery_link_target":"","_global_colors_info":"","_lh_copy_from_url-original_file":"","_version_history":"","_wp_old_date":[],"_wpcode_auto_insert":"","_wpcode_auto_insert_number":"","_wpcode_conditional_logic":[],"_wpcode_conditional_logic_enabled":"","_wpcode_library_id":"","_wpcode_library_version":"","_wpcode_location_extra":"","_wpcode_note":"","_wpcode_priority":"","_wpcode_shortcode_attributes":[],"_wpmf_gallery_custom_image_link":"","ao_post_optimize":[],"author_photo":"255862","doc_url":"","et_enqueued_post_fonts":{"family":{"et-gf-lato":"Lato:100,100italic,300,300italic,regular,italic,700,700italic,900,900italic"},"subset":["latin","latin-ext"],"cache_key":"{\"gph\":0,\"divi\":\"4.24.1\",\"wp\":\"6.6.2\",\"enable_all_character_sets\":\"false\"}"},"rank_math_contentai_score":{"wordCount":"100","linkCount":"0","headingCount":"100","mediaCount":"62.22"},"rank_math_description":"While caching is one of the two hard problems in Computer Science, doing it right, consistently, can yield great results for the performance of your website, and ultimately, its transactional success in the marketplace","rank_math_facebook_image":"","rank_math_facebook_image_id":"","rank_math_internal_links_processed":["1"],"rank_math_og_content_image":{"check":"cdc4bc970e71561cae055fe9f9b7c44f","images":[]},"rank_math_seo_score":"29","rank_math_title":"","version_history":"","wp-smpro-smush-data":[],"wp-smush-animated":"","wpmf_filetype":"","wpmf_order":"","wpmf_size":"","_":"","_bj_lazy_load_skip_post":[],"_divi_filters_post_type":"","_et_dynamic_cached_attributes":{"sticky_position":["top"],"use_custom_gutter":["on"],"fullwidth":["off"],"button_icon":["$||divi||400"],"social_network":["facebook","twitter","linkedin","youtube","last_fm"],"header_2_font":"|800|||||||","header_2_font_size":"34px","header_2_text_align":"center","animation_intensity_slide":"10%","animation_duration":"800ms","animation_delay":"15ms","animation_intensity_zoom":"15%","animation_intensity_flip":"15%","animation_intensity_fold":"15%","animation_intensity_roll":"15%","animation_direction":"center","animation_style":"none","background_color_gradient_start":"rgba(255,255,255,0)","background_color_gradient_end":"#fafafa","custom_padding":"120px||0px||false|false","background_color_gradient_stops":"rgba(255,255,255,0) 0%|#fafafa 100%","custom_padding_last_edited":"on|desktop","custom_padding_tablet":"||30px||false|false","custom_padding_phone":"60px||||false|false"},"_et_dynamic_cached_shortcodes":["et_pb_post_content","et_pb_contact_field","et_pb_signup_custom_field","et_pb_social_media_follow_network","et_pb_section","et_pb_row","et_pb_column","et_pb_blog","et_pb_blurb","et_pb_button","et_pb_code","et_pb_contact_form","et_pb_post_nav","et_pb_post_title","et_pb_signup","et_pb_social_media_follow","et_pb_text"],"_et_pb_ab_bounce_rate_limit":"","_et_pb_ab_stats_refresh_interval":[],"_et_pb_content_area_background_color":"","_et_pb_dark_text_color":"","_et_pb_light_text_color":"","_et_pb_section_background_color":"","_job_location":"","_job_locations":"","_links_to":"","_links_to_target":"","_product_image_gallery":"","_schema_code":"","_synced_version":"","_wp_attachment_context":"","_wp_attachment_image_alt":[],"_wpie_source_url":"","_yoast_wpseo_content_score":"30","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_metadesc":"While caching is one of the two hard problems in Computer Science, doing it right, consistently, can yield great results for the performance of your website, and ultimately, its transactional success in the marketplace","_yoast_wpseo_opengraph-image":"","_yst_prominent_words_version":"1","inline_featured_image":["0","0","0"],"job_location":[],"job_locations":"","options":"","original-file":"","post_views_count":"101","rank_math_analytic_object_id":"1914","rank_math_canonical_url":"","rank_math_focus_keyword":[],"rank_math_news_sitemap_robots":"index","rank_math_primary_category":"0","rank_math_primary_ccategory":"","rank_math_primary_job_locations":"","rank_math_primary_partners_category":"","rank_math_primary_pr_category":"","rank_math_primary_press_release_year":"","rank_math_rich_snippet":"","rank_math_robots":["index"],"rank_math_schema_Article":[],"rank_math_schema_Organization":[],"rank_math_schema_VideoObject":[],"rank_math_shortcode_schema_s-23675683-fff5-4300-88fe-da8afc8b1bb9":"","rank_math_shortcode_schema_s-307bbc91-c6b1-41aa-950d-c50d435a949c":"","rank_math_shortcode_schema_s-63a052dbc0384":"","rank_math_shortcode_schema_s-63a052dbc039d":"","rank_math_shortcode_schema_s-63a052dbc03a6":"","rank_math_shortcode_schema_s-63a052dbc03aa":"","rank_math_shortcode_schema_s-63a052dbc03b5":"","rank_math_shortcode_schema_s-63a052dbc03ba":"","rank_math_shortcode_schema_s-63a052dbc03bd":"","rank_math_shortcode_schema_s-63b6dd7d53a96":"","rank_math_shortcode_schema_s-63b6dd7d53a9f":"","rank_math_shortcode_schema_s-63b6dd7d53aa2":"","rank_math_shortcode_schema_s-63b6dd7d53aa4":"","rank_math_shortcode_schema_s-63b6dd7d53aa7":"","rank_math_shortcode_schema_s-63b6dd7d53aa9":"","rank_math_shortcode_schema_s-63b6dd7d53aab":"","rank_math_shortcode_schema_s-63b6dd7d53aad":"","rank_math_shortcode_schema_s-63b6dd7d53aaf":"","rank_math_shortcode_schema_s-63c15fcf43311":"","rank_math_shortcode_schema_s-63c15fcf43322":"","rank_math_shortcode_schema_s-63c15fcf43325":"","rank_math_shortcode_schema_s-63c15fcf43327":"","rank_math_shortcode_schema_s-63c15fcf43329":"","rank_math_shortcode_schema_s-63c15fcf4332a":"","rank_math_shortcode_schema_s-63c15fcf4332c":"","rank_math_shortcode_schema_s-63c15fcf4332e":"","rank_math_shortcode_schema_s-63c15fcf43330":"","rank_math_shortcode_schema_s-63f52c5ed40bb":"","rank_math_shortcode_schema_s-6409f40a9b7d5":"","rank_math_shortcode_schema_s-64354a3892419":"","rank_math_shortcode_schema_s-6440158136148":"","rank_math_shortcode_schema_s-6446d2f9353ee":"","rank_math_shortcode_schema_s-6446d2f9353f3":"","rank_math_shortcode_schema_s-6447c0fe4673c":"","rank_math_shortcode_schema_s-64e4d743542d7":"","schema_code":"","smush-complete":"","smush-info":"","smush-stats":[],"synced_version":"","wpmf_remote_video_link":"","_exp":"","_inc":"","_mc4wp_settings":[],"_post-subtitle":"field_5bb39e15297d0","_pwh_dcfh_contact_email":"","_pwh_dcfh_contact_form_id":"","_pwh_dcfh_form_fields":"","_pwh_dcfh_ip_address":"","_pwh_dcfh_page_id":"","_pwh_dcfh_read_by":"","_pwh_dcfh_referer_url":"","_pwh_dcfh_user_agent":[],"_section1_col1":"","_section1_col2":"","_section1_col3":"","_section1_col4":"","_section2_col1":"","_section2_col2":"","_section2_col3":"","_section2_col4":"","_section2_col5":"","_section2_col6":"","_section3_col1":"","_section3_col2":"","_section3_col3":"","_section3_col4":"","_section3_col5":"","_section3_col6":"","_section4_col1":"","_section4_col2":"","_section4_col3":"","_section4_col4":"","_section4_col5":"","_section4_col6":"","_section5_col1":"","_section5_col2":"","_section5_col3":"","_section5_col4":"","_section5_col5":"","_section5_col6":"","_section6_col1":"","_section6_col2":"","_section6_col3":"","_section6_col4":"","_section6_col5":"","_section6_col6":"","_select_author":"","_test":"","_wp_attachment_backup_sizes":[],"_yoast_wpseo_estimated-reading-time-minutes":[],"_yoast_wpseo_focuskw":[],"_yoast_wpseo_focuskw_text_input":[],"_yoast_wpseo_linkdex":[],"_yoast_wpseo_meta-robots-nofollow":[],"_yoast_wpseo_meta-robots-noindex":[],"_yoast_wpseo_primary_category":[""],"_yoast_wpseo_title":[],"_yoast_wpseo_wordproof_timestamp":"","exp":"","inc":"","post-subtitle":[""],"rank_math_schema_BlogPosting":[],"section1_col1":"","section1_col2":"","section1_col3":"","section1_col4":"","section2_col1":"","section2_col2":"","section2_col3":"","section2_col4":"","section2_col5":"","section2_col6":"","section3_col1":"","section3_col2":"","section3_col3":"","section3_col4":"","section3_col5":"","section3_col6":"","section4_col1":"","section4_col2":"","section4_col3":"","section4_col4":"","section4_col5":"","section4_col6":"","section5_col1":"","section5_col2":"","section5_col3":"","section5_col4":"","section5_col5":"","section5_col6":"","section6_col1":"","section6_col2":"","section6_col3":"","section6_col4":"","section6_col5":"","section6_col6":"","select_author":"","test":"","footnotes":""},"categories":[1,25,10,23],"tags":[],"class_list":["post-24762","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-magento-adobe","category-performance","category-popular-posts"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts\/24762"}],"collection":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/comments?post=24762"}],"version-history":[{"count":0,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts\/24762\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/media\/255702"}],"wp:attachment":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/media?parent=24762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/categories?post=24762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/tags?post=24762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n<\/strong><\/p>\n
\nIn this example, the array of cache tags that we pass to the \u201csave\u201d handler can be a custom tag or an existing type.<\/em><\/p>\n\n
\n
\n<\/strong><\/p>\n
\n<\/span>
\n<\/span>While developers can use Magento\u2019s customer-data JS library to access the default private data, they can also customize the library to suit their needs. Magento discusses the difference between <\/span>private and public content<\/span><\/a> in the dev docs extensively, but the main difference is that public content is data that is for the whole world, while private content is specific to one user.<\/span><\/p>\n<\/li>\n
\n<\/strong><\/p>\n
\nThese development methods will have effect on the bottom line of the website and allow visitors to quickly get through relevant content and to the checkout funnel.<\/p>\n