If you like DNray Forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...

 

Techniques to Minimize Dynamic AJAX Requests

Started by holoman, Aug 27, 2023, 12:21 AM

Previous topic - Next topic

holomanTopic starter

Hello, I am currently developing a website using PHP, MySQL, and AJAX.

Currently, the main page of the website contains a graph consisting of a set of points {X:Y}. This graph is updated every 10 seconds using AJAX. The AJAX call triggers a PHP function that searches the database for all the values related to the current graph and returns a JSON response. The search in the database is based on the graph ID column and the date (within the last 24 hours). The response includes an array of point IDs and their corresponding X, Y values. Every time the graph is updated, all the points are fully loaded, starting from the first point up to the latest point within the current day.

Even though I have only been working on it for a couple of days and there are no visitors yet, I can already see a load on the hosting from my own usage. This worries me because if I, as a single user, already consume a significant amount of computing power from the hosting package I have purchased for 200p, it's concerning to think about what will happen once contextual advertising is launched.

I am using a hosting service that provides load statistics:
- The green area represents requests to static files, which require minimal resources to maintain.
- The yellow area represents requests to scripts associated with the website, for which server resources are allocated.

I have noticed that almost all requests to the site fall into the yellow category. Out of a thousand requests, only 50 are static. And this is while I am the only one using the site.
  •  


csschopper

There are a few potential reasons why this could be happening and some possible steps you can take to optimize your website's performance.

1. Database optimization: Make sure your database queries are efficient and well-optimized. Use indexes on the columns you frequently search, and consider caching query results if they don't change frequently.

2. AJAX optimization: Review your AJAX implementation to ensure it is as efficient as possible. Check if there are any unnecessary requests being made, and minimize the amount of data being transferred between the client and server.

3. Server-side caching: Implement server-side caching techniques to reduce the load on your server. This can include using caching plugins or server-level caching mechanisms like Memcached or Redis.

4. Code profiling: Use profiling tools to identify any bottlenecks in your code. This will help you pinpoint specific areas that might be causing the excessive resource usage and allow you to optimize those parts.

5. Scaling options: Consider whether your current hosting package is sufficient for handling the expected load on your website. If you anticipate more traffic in the future, you might need to upgrade to a higher-tier hosting plan or opt for a scalable hosting solution like cloud hosting.

few more suggestions to further optimize your website's performance and reduce resource usage:

1. Minify and compress files: Minify your CSS and JavaScript files to remove any unnecessary whitespace or comments, reducing their file size. Additionally, compressing these files can significantly reduce the time it takes to transfer them over the network.

2. Implement caching headers: Set appropriate caching headers for your static files, such as images, CSS, and JavaScript files. This allows browsers to cache these files locally, reducing the need to request them from the server on subsequent visits.

3. Optimize images: Optimize and compress your images to reduce their file size without compromising quality. This can be done using image compression tools or libraries. Smaller image sizes can greatly improve the loading speed of your website.

4. Use pagination or lazy loading: Instead of loading all data points at once, consider implementing pagination or lazy loading techniques. This way, you can load and display only a portion of the data initially, and fetch more as the user interacts with the graph.

5. Fine-tune AJAX frequency: Evaluate whether updating the graph every 10 seconds is necessary. Consider increasing the interval or implementing conditional updating based on user activity or changes in the data.

6. Profile and optimize database queries: Analyze the performance of your database queries using tools like EXPLAIN in MySQL or profiling features in PHP frameworks. Ensure that your queries are optimized and properly indexed to minimize server load.

7. Enable HTTP/2: If your hosting provider supports it, enable HTTP/2 protocol, which has better multiplexing and compression capabilities, allowing for faster and more efficient data transfers.

8. Consider a content delivery network (CDN): Implementing a CDN can distribute your static files across multiple servers worldwide, reducing latency and improving page load times for users around the globe.

additional suggestions to further optimize your website's performance and reduce resource usage:

1. Implement server-side caching: In addition to browser caching, consider implementing server-side caching techniques like opcode caching or data caching using tools like APC or Redis. This can help reduce the load on your server by storing pre-compiled PHP code or frequently accessed data in memory.

2. Enable GZIP compression: Enable GZIP compression on your server to compress the response content before sending it over the network. This can significantly reduce the size of the transferred data and improve loading times.

3. Use a content delivery network (CDN): Consider using a CDN to distribute static assets like images, CSS, and JavaScript files to edge servers located closer to your users. This can help reduce latency and speed up file delivery.

4. Optimize CSS and JavaScript: Minimize the number of CSS and JavaScript files used on your website and combine them into fewer files. Additionally, place script tags at the bottom of the HTML dоcument to prevent blocking the rendering of the page.

5. Enable HTTP/2 push: If your server supports it, consider implementing HTTP/2 push functionality to proactively send resources to the client before they are explicitly requested. This can further optimize the loading time of your website.

6. Monitor and optimize database queries: Continuously monitor and optimize your database queries to ensure they are performing efficiently. Consider using tools like MySQL's slow query log or query optimization features in ORMs to identify and optimize slow-running queries.

7. Evaluate third-party scripts and plugins: Review the third-party scripts and plugins used on your website and assess their impact on performance. Remove or replace any that are unnecessary or that significantly slow down your website.

8. Regularly update and optimize your server: Keep your server software, PHP version, web server, and database engine up to date. These updates often include performance improvements and bug fixes that can enhance the overall performance of your website.
  •  

amberwhite

1) It is impractical to continuously drag the entire database every 10 seconds. Instead, upon receiving the data, it is advisable to store the timestamp (or even better, retrieve it from the server as a separate field) and employ an ajax request during subsequent transfers to the server. By doing so, new records can be extracted from the database based on the timestamp, and then appended to the data array previously received by the client.

2) In regards to table indexes, it is essential to assess the efficiency of typical queries. In case a query performs slowly, examining the index usage through the "explain" command can be beneficial. If the index usage is inadequate, adding indexes to groups of requested fields may greatly improve query performance.

3) Implementing caching with a duration of 10 seconds is highly advantageous when making requests at the same frequency. In theory, this approach alleviates the database load to a level comparable to that of "one user" (assuming the data is not personalized, but rather shared among all users). This effectively reduces the strain on the database by optimizing the retrieval of commonly used data.
  •  

Gingagele

Instead of asking for the complete database, ask for the missing portion.
On the initial request, retrieve and store all the data in the cache. Additionally, when uploading, only update the browser with data that is more recent than what is currently available.

This strategy ensures efficient data retrieval and reduces unnecessary network traffic. By requesting only the necessary information and optimizing the caching process, the system minimizes redundancy and improves overall performance.
  •  

grusla

Your approach is fundamentally flawed. Relying on frequent full data loads is a recipe for disaster, especially when scaling. You need to rethink your strategy to avoid a meltdown when real users hit the site. Implementing WebSockets could provide real-time updates without the overhead of constant AJAX requests. Relying solely on PHP and MySQL for a dynamic graph is outdated, modern solutions exist that can handle this more efficiently.
  •  


If you like DNray forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...