{"id":19739,"date":"2024-04-05T10:07:27","date_gmt":"2024-04-05T08:07:27","guid":{"rendered":"https:\/\/geekworkers.ch\/?p=19739"},"modified":"2025-12-20T12:57:21","modified_gmt":"2025-12-20T11:57:21","slug":"solve-display-bugs-wordpress-elementor-wprocket-imagify","status":"publish","type":"post","link":"https:\/\/geekworkers.ch\/en\/blog\/resoudre-bugs-affichage-wordpress-elementor-wprocket-imagify\/","title":{"rendered":"Fix display bugs on a WordPress Elementor, WP Rocket and Imagify site"},"content":{"rendered":"<h2 class=\"wp-block-heading\">The Challenges of Maintaining a WordPress Site<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Managing a WordPress site can be complex, especially when it comes to maintenance.<\/strong> Various problems can arise, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Plugin or theme malfunctions:<\/strong>&nbsp;Incompatible updates, unfixed bugs, conflicts between plugins.<\/li>\n\n\n\n<li><strong>Code errors:<\/strong>&nbsp;Accidental modifications, poorly integrated scripts, syntax errors.<\/li>\n\n\n\n<li><strong>Performance issues:<\/strong>&nbsp;Slow loading speed, high response time, excessive resource usage.<\/li>\n\n\n\n<li><strong>Security failures:<\/strong>&nbsp;WordPress core vulnerabilities, outdated plugins, SQL injection attacks.<\/li>\n\n\n\n<li><strong>Browser Compatibility:<\/strong>&nbsp;Incorrect display on some browsers or mobile devices.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Regular maintenance is essential to ensure the security, performance and stability of your WordPress site.<\/strong> However, the multitude of tasks and the diversity of technical skills required can make maintenance tedious and time-consuming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>This is where the framework comes in.<\/strong> By offering a structured methodology and adapted tools, it allows you to simplify and optimize the maintenance of your WordPress site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Fix Image Display Issue with Elementor, WP Rocket, and Imagify<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Analyze the problem<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Identify the type of problem:<\/strong>&nbsp;CSS, Js, images, thumbnails, etc.<\/li>\n\n\n\n<li><strong>Locate the problem:<\/strong>&nbsp;Elementor, classic editor, custom code, etc.<\/li>\n\n\n\n<li><strong>Reproduce the issue:<\/strong>&nbsp;Test on different browsers and devices.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Test Quick Fixes<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Empty the cache:<\/strong>&nbsp;Elementor, browser, CDN.<\/li>\n\n\n\n<li><strong>Regenerate thumbnails:<\/strong>&nbsp;Tool integrated into WordPress, Imagify plugin.<\/li>\n\n\n\n<li><strong>Re-save the page:<\/strong>&nbsp;Elementor, classic editor.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Explore Deeper Solutions<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Analyze the source code:<\/strong>&nbsp;Chrome Inspector, JavaScript errors, non-compliant CSS.<\/li>\n\n\n\n<li><strong>Disable plugins:<\/strong>&nbsp;Test one by one to identify the culprit.<\/li>\n\n\n\n<li><strong>Modify the parameters:<\/strong>&nbsp;WP Rocket and Imagify.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Advice<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Always test before deploying.<\/strong><\/li>\n\n\n\n<li><strong>Use a staging environment.<\/strong><\/li>\n\n\n\n<li><strong>Perform regular backups.<\/strong><\/li>\n\n\n\n<li><strong>Check the documentation and help forums.<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Useful resources<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WordPress Documentation:<\/strong>&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/\" rel=\"noopener\">https:\/\/wordpress.org\/documentation\/<\/a><\/li>\n\n\n\n<li><strong>Elementor support:<\/strong>&nbsp;<a href=\"https:\/\/elementor.com\/support\/\" rel=\"noopener\">https:\/\/elementor.com\/support\/<\/a><\/li>\n\n\n\n<li><strong>WP Rocket FAQ:<\/strong>&nbsp;<a href=\"https:\/\/docs.wp-rocket.me\/category\/1583-faqs\" rel=\"noopener\">https:\/\/docs.wp-rocket.me\/category\/1583-faqs<\/a><\/li>\n\n\n\n<li><strong>Imagify Tutorials:<\/strong>&nbsp;<a href=\"https:\/\/m.youtube.com\/watch?v=EyGsL8pMrfQ\" rel=\"noopener\">https:\/\/m.youtube.com\/watch?v=EyGsL8pMrfQ<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Case study example: Express Recycling<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Context<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Site : <a href=\"https:\/\/recyclage-express.ch\/\" data-type=\"link\" data-id=\"https:\/\/recyclage-express.ch\/\" rel=\"noopener\"><strong>Recycling-Express.ch<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Recyclage Express case study demonstrates how to debug an image display issue on a WordPress site using Elementor, WP Rocket, and Imagify<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"545\" src=\"https:\/\/geekworkers.ch\/wp-content\/uploads\/2024\/04\/probleme-afficahge-recyclage-express-1024x545.jpg\" alt=\"\" class=\"wp-image-19741\" title=\"\" srcset=\"https:\/\/geekworkers.ch\/wp-content\/uploads\/2024\/04\/probleme-afficahge-recyclage-express-1024x545.jpg 1024w, https:\/\/geekworkers.ch\/wp-content\/uploads\/2024\/04\/probleme-afficahge-recyclage-express-300x160.jpg 300w, https:\/\/geekworkers.ch\/wp-content\/uploads\/2024\/04\/probleme-afficahge-recyclage-express-768x409.jpg 768w, https:\/\/geekworkers.ch\/wp-content\/uploads\/2024\/04\/probleme-afficahge-recyclage-express.jpg 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Approach followed<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Problem analysis:<\/strong>\n<ul class=\"wp-block-list\">\n<li>The problem is with displaying a thumbnail image.<\/li>\n\n\n\n<li>The image is displayed correctly in the Elementor editor but not on the website.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Quick solutions tested:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Clearing the cache did not solve the problem.<\/li>\n\n\n\n<li>Regenerating the thumbnail fixed the issue temporarily.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Deeper Solutions Explored:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Analyzing the source code revealed an error in the picture tag.<\/li>\n\n\n\n<li>Enabling the WebP option in Imagify fixed the error.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By following the methodology described and using the available resources, it is possible to resolve most bugs encountered on a WordPress site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Remember:<\/strong> patience and perseverance are the keys to success!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.loom.com\/share\/069ccefcbf8542a1941324a71c466b09?sid=32b82e3a-f502-42f2-a423-a0f181c0561c\" data-type=\"link\" data-id=\"https:\/\/www.loom.com\/share\/069ccefcbf8542a1941324a71c466b09?sid=32b82e3a-f502-42f2-a423-a0f181c0561c\" target=\"_blank\" rel=\"noreferrer noopener\">BONUS: Video<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to fix display bugs on WordPress with Elementor, WP Rocket and Imagify \ud83d\ude80\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/5xcpO2eAa_g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>","protected":false},"excerpt":{"rendered":"<p>Les d\u00e9fis de la maintenance d&rsquo;un site WordPress G\u00e9rer un site WordPress peut s&rsquo;av\u00e9rer complexe, surtout lorsqu&rsquo;il s&rsquo;agit de la maintenance. Divers probl\u00e8mes peuvent surgir, tels que : La maintenance r\u00e9guli\u00e8re est essentielle pour garantir la s\u00e9curit\u00e9, la performance et la stabilit\u00e9 de votre site WordPress. Cependant, la multitude de t\u00e2ches et la diversit\u00e9 des [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":19745,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205,47],"tags":[208,206,209,74,207],"class_list":["post-19739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-maintenance","category-wordpress","tag-bugs","tag-elementor","tag-support","tag-wordpress","tag-wp-rocket"],"_links":{"self":[{"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/posts\/19739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/comments?post=19739"}],"version-history":[{"count":0,"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/posts\/19739\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/media\/19745"}],"wp:attachment":[{"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/media?parent=19739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/categories?post=19739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekworkers.ch\/en\/wp-json\/wp\/v2\/tags?post=19739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}