عربي

كيفية ضبط الرموز البرمجية بفعالية من أجل بيئة الإنتاج: التخزين المؤقت والضغط والفهرسة

responsive web design
22nd Nov 2024

في عالمنا الرقمي الذي نعيش فيه اليوم، يمكن أن يكون أداء موقع الويب سبب نجاحه أو فشله. وبصفتك مطوّر مواقع، فمن الأهمية بمكان أن تفهم كيف تضبط الرموز البرمجية من أجل بيئات الإنتاج.

في هذا المقال سنتعمق في ثلاثة مجالات رئيسية خاصة بضبط الرموز البرمجية هي: التخزين المؤقت، والضغط،والفهرسة (إدارة الأصول). وسنستكشف أيضًا كيف تعمل التقنيات الناشئة مثل البنية بدون خادم والوضع في حاويات وحوسبة الحافة على إعادة تشكيل نظام الرموز البرمجية.

أهمية ضبط الرموز البرمجية

قبلما نتعمق في تقنيات خاصة، يجب أن نفهم أولاً لماذا يعتبر ضبط الرموز أمرًا حاسمًا:

  1. تحسين تجربة المستخدم: أوقات التحميل الأسرع تؤدي إلى مشاركة أفضل للمستخدم وزيادة رضاه. لا أحد يحب أو يفضّل المواقع البطيئة!
  2. ترتيب أعلى لمحركات البحث: تفضّل محركات البحث المواقع الأسرع، ومن شأن ذلك أن يحسّن ترتيب موقعك في نتائج محركات البحث ويمنحك ترتيبًا أعلى من هؤلاء الذين لا يمتثلون للمعايير المطلوبة.
  3. زيادة معدلات التحويل: المواقع الأسرع عادةً ما تشهد معدلات تحويل أعلى. وخاصةً في حالة المواقع الحكومية وبوابات الخدمات، الموقع السريع يعني تقليل عدد زيارات مراكز الخدمة أو الاتصالات غير الضرورية بخط خدمة العملاء.
  4. توفير التكلفة: الرموز البرمجية المُثلى تقلل من تحميل الخادم والتكاليف المرتبطة بذلك فيما يتعلق باستخدام البنية التحتية.

1. التخزين المؤقت: تسريع الوصول إلى البيانات

التخزين المؤقت هو تقنية تخزين البيانات التي يتكرر الوصول إليها في موقع يسمح باسترجاعها بسرعة. وهي إحدى أكثر الطرق فعالية لتحسين أداء موقع الويب لديك.

أنواع التخزين المؤقت
  • التخزين المؤقت من المتصفح: التخزين المؤقت من المتصفح يخزن الأصول الثابتة (مثل الصور وصفحات أنماط CSS وملفات JavaScript) على جهاز المستخدم بعد أول زيارة لموقع الويب. وعندما يعود المستخدم إلى زيارة الموقع مرة أخرى، يمكن تحميل هذه الموارد المخزّنة مؤقتًا من المخزن المحلي بدلاً من تنزيلها مرة أخرى. ومن شأن ذلك أن يقلل تقليلاً هائلاً من أوقات التحميل للزوار العائدين ويقلل الحمل على الخادم. ويمكن أن يتحكم المطورون في أداء التخزين المؤقت من المتصفح عن طريق عناوين HTTP وتحديد مدة التخزين المؤقت لكل نوع من أنواع الأصول.
  • التخزين المؤقت على الخادم: يتضمن التخزين المؤقت على الخادم تخزين المحتوى الذي يتم إنشاؤه ديناميكيًا على الخادم لتقليل الوقت والموارد المطلوبة من أجل إنشاء نفس المحتوى للطلبات المتعاقبة. ويمكن أن يشمل ذلك نتائج الاستدعاء من قواعد البيانات أو استجابات واجهات برمجة التطبيقات أو صفحات HTML الكاملة. وتشمل الحلول الشائعة للتخزين المؤقت على الخادم Redis وـMemcached. وبفضل تقليل الحاجة إلى معالجة البيانات نفسها أو إنشاء نفس المحتوى بصفة متكررة، يؤدي التخزين المؤقت على الخادم إلى تحسين هائل لأوقات الاستجابة وتمكين الخوادم من التعامل مع المزيد من المستخدمين في نفس الوقت.
  • التخزين المؤقت على شبكات توصيل المحتوى: التخزين المؤقت على شبكات توصيل المحتوى يوزع المحتوى الثابت لموقع الويب عبر خوادم متعددة في مواقع جغرافية مختلفة. وعندما يطلب المستخدم المحتوى، يتم توصيله من أقرب خادم على شبكة توصيل محتوى بدلاً من الخادم الأصلي للمستخدم. ومن شأن ذلك أن يقلل من زمن الاستجابة، خاصةً للمستخدمين البعيدين عن الخادم الرئيسي للموقع. كما توفر شبكات توصيل المحتوى أيضًا طبقة إضافية من التخزين المؤقت حيث تخزن كلًا من المحتوى الثابت والمحتوى الديناميكي أحيانًا. ويمكنها أيضًا التعامل بكفاءة مع معدلات المرور العالية مما يحسّن من قابلية توسع الموقع وسرعة استجابته لهجمات المرور الكبيرة.
تنفيذ التخزين المؤقت الفعال
<!-- Set cache control headers for static assets --> 
<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$"> 
Header set Cache-Control "max-age=31536000, public" 
</FilesMatch>

This is the simplest and most basic solution: It tells a browser to cache assets of the mentioned file extensions for one year.

On the flip side, Server-side caching involves storing dynamically generated content on the server to reduce the time and resources needed to generate the same content for subsequent requests.

This can include database query results, API responses, or entire HTML pages.

Popular server-side caching solutions include Redis and Memcached. By reducing the need to repeatedly process the same data or generate the same content, server-side caching can dramatically improve response times and allow servers to handle more concurrent users. Redis and Memcached are in-memory data stores that can be used to cache frequently accessed data.

  • Implement full page caches and serve cached versions of your page to users. Ensure to refresh and regenerate cached pages when you update content through your CMS.
  • Create effective cache policies for your database queries, where result sets from the same query do not need to a lookup through the database server.
  • Use Redis or Memcache to store object-based results or calculated data, which would otherwise be processed by the server in real-time. Implement a refresh rate or a user-based override method.

2. Compression: Reducing data transfer

Compression reduces the size of files sent from your server to the user's browser, significantly improving load times.

  1. Gzip Compression: Enable Gzip compression on your server. As an example, for Apache, you can use the following configuration: 
    <IfModule mod_deflate.c> 
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript 
</IfModule>
    Brotli is a newer compression algorithm that can provide even better compression ratios than Gzip.
  2. Image Optimization: Use tools like ImageMagick or online services to compress images without significant quality loss.
    convert input.jpg -quality 85% output.jpg
  3. Use appropriate image formats: JPEG for photographs, PNG for images with transparency, SVG for vector graphics. Traditionally, this has been the practice, however the newest, most effective compression for images is the WebP format. WebP allows websites to display high-quality images — but with much smaller file sizes than traditional formats such as PNG and JPEG. Therefore, use WebP as the source and JPG as the fallback. 
        <picture> 
      <source srcset="image.webp" type="image/webp"> 
      <img src="image.jpg" alt="Fallback image"> 
    </picture>
  4. Lazy load your images, thereby improving page load speed.
  5. Minify your output: Use tools like UglifyJS for JavaScript, cssnano for CSS, and HTMLMinifier for HTML.
  6. For dynamic text content, consider compressing it before sending and decompressing it on the client side. A good example of this is the zlib library.
  7. If you're using custom fonts, consider subsetting them to include only the characters you need. For example, the following font case uses a specific unicode range.
          @font-face { 
      	font-family: 'CustomFont'; 
      	src: url('custom-font-subset.woff2') format('woff2'); 
      	unicode-range: U+000-5FF; /* Latin glyphs */ 
      }
    By implementing these compression techniques, web developers can significantly reduce the amount of data transferred between the server and the client, leading to faster load times and improved user experience.

3. Catalogue (Asset Management): Organizing for efficiency

Effective asset management ensures that your website's resources are organized, easily maintainable, and quickly accessible.

Techniques for efficient asset management include:

  • Minification: Reduce the size of your CSS, JavaScript, and HTML files.
  • Concatenation: Combine multiple files into one to reduce HTTP requests.
  • Versioning: Use versioning in file names to ensure users always have the latest version.

Other techniques to consider

You can improve efficency by considering the following techniques as well.

Serverless architectures

Serverless computing can significantly reduce latency and improve scalability. Consider using services like AWS Lambda, Microsoft Functions or Google Cloud Functions for certain operations.

You must plan and work out what constitutes serverless architecture because running your entire application on this method may defeat the purpose of sustainability.

Containerization

Docker containers ensure consistency across different environments and can improve deployment efficiency. Sustainability in deployment is a very important factor.

Asynchronous loading

Loading scripts asynchronously can prevent them from blocking page rendering. You will notice that Google’s Lighthouse will report scripts that are render-blocking. Therefore, implement this by simply adding the async attribute to your script tags.

Monitoring and continuous optimization

Remember, optimization is an ongoing process. Use tools like Google PageSpeed Insights, WebPageTest, or Lighthouse to regularly monitor your website's performance and identify areas for improvement.

Sustainability in code optimisation is all about ensuring that you continue to optimise your code base and make it better.

Conclusion

Optimizing your code for a production environment is crucial for delivering a fast, efficient, and user-friendly website. You can significantly improve your website's performance by implementing effective caching strategies, utilizing compression techniques, and managing your assets efficiently.

Furthermore, by leveraging emerging technologies like serverless architectures, containerization, and edge computing, you can stay ahead of the curve and deliver cutting-edge performance to your users.
Remember, the web development landscape is constantly evolving. Stay curious, keep learning, and always be on the lookout for new ways to optimize your code.

In this series
علم الترميز المُستدام: كتابة رموز برمجية نظيفة وفعالة وقابلة لإعادة الاستخدام